ONLINE EDITORS FOR CODING THE CANVAS
You can try coding with an online editor at the popular CodePen site. This is an excellent, quick way to start coding and to explore new front-end libraries and frameworks.
A ◈ To get started, press this link to take you to CodePen Topics.
B ◈ Press the ZIM icon to see all sorts of examples of coding creativity on the canvas! There is an basic template second from the top. You can select New Pen from Template to “fork” (copy) the template and start a new app. You can also fork any of the “templates” — which are really basic examples. Or fork any of the Featured Pens listed there in a tab.
We do not like calling what we make an app because it might be a game, art work, puzzle, visualization, etc. Unfortunately, our industry does not have a well known name for what we make. Other industries have song, story, film, site, video, etc. The Interactive industry calls them interactives. Neal Stephenson, the writer, called them ractives in Diamond Age. Inventor Dan Zen wanted to use doeo, or digido. At ZIM, we call them Zapps!
HOW DOES CODEPEN WORK?
The code you see in the JS window is not all the code. There are also Settings at the top that let creators import various libraries, frameworks or other scripts. Under the JS section we have imported CreateJS and ZIM. CodePen wraps all this up and presents it in the preview window. You can also use the Change View button to see different editor layouts and eventually see different views such as Full Page View and Details View (and Editor View).
TEXT EDITORS FOR CODING THE CANVAS
Traditionally, for practical reasons, we code in a text editor on our computer and then, for instance, upload the code to a server to be seen on a Website. In this section we will guide you as to how to do this. A computer, text editor and Browser are all you need!
A ◈ We use the Atom text editor, which is a free and quick-to-download editor made by the folks at GitHub. This has color syntax highlighting and very nice editing features like multiple select and edit. Similar features can be found in Sublime Text, Brackets and VS Code. NotePad++ can be used but we recommend you try one of the others.
B ◈ Open the text editor and create a new text file called code.html or something.html. Save this in a folder where you want to save your code. Eventually, this might be a folder per project. We will describe where to get the template to copy and paste into the text file next. There is also the video below that takes you through the steps.
ZIM TEMPLATE FOR CODING THE CANVAS
Templates are code that most, if not all, projects use. They allow you to get started faster. We have a number of templates in ZIM.
C ◈ The basic template can be found at the top of the ZIM Code page. Press the COPY button and then paste the code into the code.html file in your text editor. This uses what is called the fit scaling mode and is the easiest way to start coding. The majority of the ZIM examples use the fit template.
OTHER ZIM CANVAS TEMPLATES
There are also other templates listed on the code page. There is a minimal template without comments. There are Frame templates to handle different scaling. There is a template to work with Adobe Animate called ZIM SHIM. You can explore these templates as you get more used to coding the canvas. For now, do not worry about them.
A GUIDE TO WHAT IS IN THE TEMPLATE
If you have not coded before, do not worry too much about what is in the template. You can just use it and as you code more, you will start to recognize things. The video above takes you through the template and we will restart our ◈ letters to describe the parts below.
A ◈ The template is an HTML page. You should change the title as that will show at the top of the Browser, in search results, in bookmarks, etc.
B ◈ We then import CreateJS and ZIM scripts. These scripts hold a lot of code that helps you code on the canvas more easily.
<script> tag where you are going to add your code. At the bottom is the
</script> tag where we go back into HTML for the body. Nothing is in the body. ZIM will add the canvas tag for you.
D ◈ Inside the script tag is the top of the ZIM template. We make a Frame that will handle scaling, size, colors, and you can load assets here too. There are comments in // throughout that help describe what is happening.
E ◈ When the Frame is ready we call a function and inside that function is where you do your code! At this point, the frame has made the canvas tag and set up (through CreateJS) what is called a
stage. Anything we want to see on the canvas we put on the stage. This is a metaphor from Director and Flash.
F ◈ We then come to where you add your own code. Here we have an example of a Circle that is centered and can be dragged. We show this with chaining (multiple dots) and without chaining (commented out). Chaining can be on one line or on multiple lines. Just delete this when you are ready.
G ◈ We add a
stage.update() so that any changes we make get shown on the canvas. We then end the frame ready function made in the top part of the template.
VIEWING THE PAGE IN A BROWSER
Save the page and then you will want to view the page in a Browser such as Chrome, Firefox, Edge or Safari. There are several ways to view the file in a Browser. The last way is probably the best but takes a little set-up.
- Find the file in your folder and double click it. Usually HTML pages will open in your default Browser. Or you can adjust the file properties to do so.
- Find the file, pick it up and drop it on an open Browser window or the Browser icon on your desktop.
- Right click the file and open or open with your Browser.
- Open the file from your text editor. For Atom, go to Packages in the top menu, choose Settings View > Install Packages/Themes and search for Open in Browser (singular not Browsers). This just takes a second to install. You can then right click and Open in Browser or use the Hot Key.
Once you have the file in the editor and the browser, just keep both open. Make changes in your text editor (CTRL/⌘S) and refresh your Browser (CTRL/⌘R) to see the change.
Well… we know. This guide was a little on the practical side and less on the creative side. But it gets us set up which is often a barrier. So if you have a template and got some code happening then you are on your way!
If you would like to see what coding is like on a Canvas Library or Framework here is ◎ Your Guide to Coding Creativity on the Canvas.
Or jump right to ◎ Your Guide to Coding Concepts with the Colorful Canvas.
Have a great day or night! And if you know anyone else who might want to code —invite them along! You will make the journey twice as fun!