YOUR GUIDE TO

For everyone from absolute beginner to absolute professional

Dr Abstract

Jul 21, 2020·10 min read

Let’s get you coding in this very first paragraph! Type or paste the code below into a simple Online Editor and press TEST to make a draggable circle! You can do it, it is just one or two clicks and you are coding. Welcome to the Canvas, an HTML tag for visual content like art and games and can be coded with JavaScript, the word’s most popular programming language.

new Circle().center().drag();

You can set the size (radius) and color of the circle like so:

new Circle(100, red).center().drag();

There are other settings and many more types of objects to make. Let’s try a few more to get a sense of what we can do. Then we will introduce the parts of coding creativity on the canvas! CLEAR your code, type this and TEST:

new Blob().center();

Here is a Component that steps through numbers (or words):

new Stepper().center();

Here is a fun one… a particle emitter! Oooo — how scientific! This can be used for rewards in games or e-learning and also to make fireworks, fire, smoke, snow and explosions, oh my!

new Emitter().center();

CREATIVE CODING ON THE CANVAS - A DOZEN PARTS

We are coding on the canvas. If you are unsure about why we are using the canvas then here is ◎ Your Guide to When to Use a JavaScript Canvas Library or Framework.

We have broken canvas coding into a dozen parts. For each part, we will give an overview, a demonstration and a link to a detailed Your Guide article. The parts are:

1. CANVAS LIBRARIES AND FRAMEWORKS ◎ guide
   CreateJS, ZIM, PixiJS, Phaser, P5js, PaperJS
2. CODE ENVIRONMENT AND TEMPLATE ◎ guide
   text editor, browser, HTML page, template, import, script tag
3. DISPLAY OBJECTS :: SHAPES ◎ guide
   Circle, Rectangle, Triangle, Blob, Squiggle, Container
variables, classes, objects, parameters, properties, methods
4. DISPLAY OBJECTS :: COMPONENTS ◎ guide
   Button, Slider, Dial, List, Tabs, Stepper, Indicator, Selector
events, functions, anonymous functions, arrow functions
5. CONVENIENCES ◎ guide
   object literals, chaining, arrays, random, series
6. INTERACTIVITY ◎ guide
   drag, gesture, transform, tap, change, hitTest, conditionals
7. ANIMATION ◎ guide
   interval, timeout, animate, wiggle, Ticker
8. ACCESSIBILITY ◎ guide
   screen reader for canvas components and content
9. ASSETS ◎ guide
   images, sounds and sprites
10. STYLE ◎ guide
    Set the style for all, types and groups of display objects
11. RESPONSIVE AND ADAPTIVE ◎ guide
    Pages, Layout, HotSpots, Guide, Grid, Manager, Tile, Wrapper
12. CONTROLS ◎ guide
    MotionController, Pen, Parallax, Emitter, SoundWave, VR, Physics

1. CANVAS LIBRARIES AND FRAMEWORKS

CreateJS, ZIM, PixiJS, Phaser, P5js, PaperJS

There are only basic features available on the canvas so people tend to use canvas libraries and frameworks to make things easier. We are using ZIM, at https://zimjs.com, which is a general canvas framework. Please take some time looking around the ZIM site. Here is ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework.

2. CODE ENVIRONMENT AND TEMPLATE FOR THE CANVAS

text editor, browser, HTML page, template, import, script tag

You can continue to code in an online editor but it is better to code in a text editor like Atom, Sublime or VS Code to name a few.

A ZIM template is located at the top of the CODE PAGE. You then press the COPY button and paste the code into an empty document in your text editor. Save this as code.html (or whatever.html) and then open it in a Browser like Chrome, Firefox, Safari or Edge. Here is ◎ Your Guide to Setting up an Editor and Template to Code on the Canvas.

3. DISPLAY OBJECTS :: SHAPES ON THE CANVAS

Circle, Rectangle, Triangle, Poly, Line, Blob, Squiggle
with variables, classes, objects, parameters, properties, methods

Display Objects are things that you can see in your app. We like introducing code with these because they are visual. We put display objects on what we call the stage (the grey box in the picture above). We will start with shapes like Circle, Rectangle and Triangle. In programming, these are made from what is called a Class, which holds the instructions to make what is called an Object using the new keyword. We can customize the shape with parameters, tell the shape to do things with methods and set properties of the shape. In the following article, we introduce important programming concepts and also show how to add and position shapes on the stage. Here is ◎ Your Guide to Coding Concepts with the Colorful Canvas.

const rect = new Rectangle(100, 100, blue).loc(50, 50);

4. DISPLAY OBJECTS :: COMPONENTS ON THE CANVAS

Button, Slider, Dial, List, Tabs, Pad, Stepper, Indicator, Selector
with events, functions, anonymous functions, arrow functions

Components are interfaces to help people use your app. Examples are buttons, sliders, dials, tabs, labels, panes, panels, lists, etc. ZIM has several dozen components. Components are customizable with parameters and have events such as click and change. When the events happen, we can run what is called a function which is a block of code that does something. Please see ◎ Your Guide to Components on the Canvas with JavaScript.

const button = new Button().center();
button.on("click", go);
function go() {
  zgo("https://zimjs.com"); // shortcut to URL
}

5. CONVENIENCES ON THE CANVAS

object literals, chaining, arrays, random, series, loops

PARAMETERS TWO WAYS: When we customize a Display Object, we pass in parameters as the object is built. There can be many parameters and the order matters. This can be cumbersome at times, so ZIM provides a second way to handle parameters: pass in a single Object Literal (configuration object) that has property names that match the parameter names. This was introduced in ZIM DUO (version 2) so we call it the ZIM DUO technique!

ZIM DUO 
new Button(null, null, "OPEN", null, null, null, null, null, 0)
new Button({label:"OPEN", corner:0}) // config object

CHAINING: Traditionally, we tend to one thing per line per statement:

const rect = new Rectangle(); // statement
rect.center(); // statement
rect.rotation = 45; // statement
rect.drag(); // statement

However ZIM is set up to use chaining in most cases.

CHAINING
new Rectangle().center().rot(45).drag();

DYNAMIC PARAMETERS: Sometimes we want parameters to be dynamic. For instance, if we tile a circle, we might want the circle to be different each time. ZIM has dynamic parameters we call ZIM VEE values.

ZIM VEE // tile red circles
new Tile(new Circle(100, red)); // random colors
new Tile(new Circle(100, [red, pink, purple])); 
// using: series(red, pink, purple) would tile in this order// range of radii
new Tile(new Circle({min:50, max:100}, red)); // tile the results of a function
new Tile(makeCustomShape);

These and more conveniences are discussed in ◎ Your Guide to Conveniences when Coding on the Canvas.

6. INTERACTIVITY ON THE CANVAS

drag, gesture, transform, tap, hov, motion, change, hitTest, conditionals

There are a number of built in methods for interactivity in addition to the on() method for capturing events like click, mouseover, keydown, etc. For example, ZIM has one-line drag and drop, gestures, and transforms for scale, rotation, etc. There are ways to capture taps, movements, and changes. We may want to test whether things are hitting with conditionals. See ◎ Your Guide to Interactivity on the Canvas with JavaScript.

INTERACTIVITY
new Poly().center().drag(); // drag a default Pentagon
new Poly().center().gesture(); // pinch, pan, rotate
new Poly().center().transform(); // drag, scale, rotatenew Poly().center().tap(doFunction);
new Dial().center().change(doFunction);
new Poly().center().movement(doFunction);// a conditional with one of many hit tests
if (circle.hitTestCircleRect(rect)) {
  rect.removeFrom();
}

7. ANIMATION ON THE CANVAS

interval, timeout, animate, wiggle, Ticker

Animation is movement over time. In coding we can use an interval that runs a function again and again at a time interval you specify. ZIM has a Ticker that uses a requestAnimationFrame which runs at the frame rate of the monitor for smooth animation but we usually use the very powerful and versatile animate() method for animating or wiggle() to move things randomly within a range. See ◎ Your Guide to Animation on the Canvas with JavaScript for more.

8. ACCESSIBILITY ON THE CANVAS

screen reader for canvas components and content

The canvas, at any given time, is just a single picture which is not good for screen readers used by visually challenged people. This is solved in ZIM by adding surrogate HTML tags behind the canvas to match ZIM components. Just make an Accessibility object to provide functionality for screen readers. The object has a talk() method that can also read out loud any text you pass it. Please see ◎ Your Guide to Accessibility on the Canvas with JavaScript.

ACCESSIBILITY
new Accessibility();

9. ASSETS ON THE CANVAS

images, sounds and sprites

We call external images and sounds, assets. Assets can be loaded into through the Frame at the start of with the loadAssets method. An optional path to the assets in a folder can be provided.

ASSETS
const assets = ["background.jpg", "boom.mp3"]; 
const path = "assets/"; // optional path
const frame = new Frame({assets, path});
frame.on("ready", ()=>{
  asset("background.jpg").addTo();
  asset("boom.mp3").play();
});

A Sprite is an animated picture made from a SpriteSheet which is a series of poses in one image. Sometimes the Sprite comes with data about how these are packed in with a program such as Texture Packer.

SPRITES
const assets = ["spaceguy.png", "spaceguy.json"]; 
const frame = new Frame({assets});
frame.on("ready", ()=>{
  new Sprite(asset("spaceguy.json")).center().run();
});

There will be a Security Error when running Canvas files locally but this can be easily fixed. Find out more at ◎ Your Guide to Images, Sounds and Sprites on the Canvas.

10. STYLE ON THE CANVAS

Set the style on the Canvas for all, types and groups of display objects

You may be familiar with CSS as a way to set styles for HTML tags. CSS is just like an object literal with a slightly different format. Programming languages have had object literals long before CSS:

CSS
{background-color:red; width:300px;}OBJECT LITERAL
{backgroundColor:red, width:300}

ZIM has styles on the canvas to set parameters and other functions of Display Objects such as color, font, position, animation, etc. These accept the ZIM VEE dynamic parameters (see part 5. Conveniences). For instance, each Label that gets made will take the next color in series. Please see ◎ Your Guide to Style on the Canvas.

STYLE = {
  corner:10, // all corners will be 10 
  types:{
    Button:{corner:0, color:red} // for buttons
    Label:{color:series(green, blue, pink)}
  },
  group:{
    big:{scale:2} // for objects with group "big" 
  }
}

ll. RESPONSIVE AND ADAPTIVE ON THE CANVAS

Pages, Layout, HotSpots, Guide, Grid, Manager, Tile, Wrapper

Coding is responsive and adaptive by nature. For instance, we can set widths to percentages without problem. If you have heard of Media Queries in CSS… that is just a conditional (if statement) in code.

ZIM provides several controls to help with responsive layout. There is Tile, which is similar to Tables in HTML but with collapsible rows and columns. There is Wrapper which wraps objects with all sorts of settings. And there is Layout which scales flexible regions. See ◎ Your Guide to Responsive and Adaptive design on the Canvas.

12. CONTROLS ON THE CANVAS

MotionController, Pen, Parallax, Emitter, SoundWave, Synth, VR, Physics

Controls can be thought of as code that acts on Display Objects. For example, we pass in an object to a MotionController to control its position with mouse, keyboard or gamepad. We pass in objects to the emitter, parallax, physics, etc. Controls feature many of the most exciting things about working on the canvas! See ◎ Your Guide to Controlling the Canvas!

// circle moves to click
new MotionController(new Circle()); // follows mouse
new MotionController(new Circle(), "mousemove"); // arrows or WASD
new MotionController(new Circle(), "keydown"); // game pad
new MotionController(new Circle(), "gamestick")

CONCLUSION

Coding on the canvas is a colorful, exciting and fun way to learn code for left and right brained learners. Not only that, but coding on the canvas will provide years of satisfaction as you code creativity! People will burst with wonder as they try what you have made.

This has been an overview guide to parts of coding on the canvas. Along the way we have seen some code but we go deeper in the guides for each part. These guides will lead you to further resources such as the ZIM Learn section with video and code tutorials, workshops, schools and the Ten Banners of great types things to make on the Canvas.

Creativity on the Canvas

We did not specifically discuss Creativity. For that please see ◎ Your Guide to the Mechanics of Creativity.

We hope you enjoy and share the Your Guide series. You are welcome to join us on the ZIM Slack Channel where we discuss coding on the canvas, show examples, ask and answer questions. All the best!

Dr Abstract

Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!