YOUR GUIDE TO

Coding Creativity on the Canvas

For everyone from absolute beginner to absolute professional

Image for post
Image for post
Canvas Examples :: games, apps, puzzles, art, visualizations
new Circle().center().drag();
Image for post
Image for post
Online Editor for Kids to Test Code
new Circle(100, red).center().drag();
new Blob().center();
Image for post
Image for post
A Blob() has optional Bezier handles. There is a Squiggle() too!
new Stepper().center();
new Emitter().center();
Image for post
Image for post
Demonstration of ZIM Emitter

CREATIVE CODING ON THE CANVAS - A DOZEN PARTS

1. CANVAS LIBRARIES AND FRAMEWORKS

Image for post
Image for post
ZIM is a general canvas framework with conveniences, components and controls

2. CODE ENVIRONMENT AND TEMPLATE FOR THE CANVAS

Image for post
Image for post
We suggest Atom, Sublime or VS Code as an editor
Image for post
Image for post
ZIM Template on the Code Page — paste into a Text Editor
Image for post
Image for post
ZIM Template inside Atom Text Editor
Image for post
Image for post
ZIM Template inside Firefox Browser

3. DISPLAY OBJECTS :: SHAPES ON THE CANVAS

const rect = new Rectangle(100, 100, blue).loc(50, 50);
Image for post
Image for post
Sample Display Object for tool to make geometric art

4. DISPLAY OBJECTS :: COMPONENTS ON THE CANVAS

Image for post
Image for post
A variety of ZIM Components. There are more.
const button = new Button().center();
button.on("click", go);
function go() {
zgo("https://zimjs.com"); // shortcut to URL
}

5. CONVENIENCES ON THE CANVAS

Image for post
Image for post
Available parameters for a Button from ZIM Docs
ZIM DUO 
new Button(null, null, "OPEN", null, null, null, null, null, 0)
new Button({label:"OPEN", corner:0}) // config object
const rect = new Rectangle(); // statement
rect.center(); // statement
rect.rotation = 45; // statement
rect.drag(); // statement
CHAINING
new Rectangle().center().rot(45).drag();
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);
Image for post
Image for post
DOT GONE :: puzzle to pick most popular color

6. INTERACTIVITY ON THE CANVAS

Image for post
Image for post
ZIM Infoactive :: drag logo to see number of eyes per day
INTERACTIVITY
new Poly().center().drag(); // drag a default Pentagon
new Poly().center().gesture(); // pinch, pan, rotate
new Poly().center().transform(); // drag, scale, rotate
new 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

Image for post
Image for post
Demonstration of Animation basics in ZIM
Image for post
Image for post
Parameters for animate() from ZIM Docs

8. ACCESSIBILITY ON THE CANVAS

ACCESSIBILITY
new Accessibility();
Image for post
Image for post
Accessibility for the Canvas

9. ASSETS ON THE CANVAS

Image for post
Image for post
Animated picture called a Sprite
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();
});
SPRITES
const assets = ["spaceguy.png", "spaceguy.json"];
const frame = new Frame({assets});
frame.on("ready", ()=>{
new Sprite(asset("spaceguy.json")).center().run();
});

10. STYLE ON THE CANVAS

Image for post
Image for post
Style on the Canvas :: color scheme perhaps not recommended ;-)
CSS
{background-color:red; width:300px;}
OBJECT LITERAL
{backgroundColor:red, width:300}
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

Image for post
Image for post
ZIM Layout for flexible regions

12. CONTROLS ON THE CANVAS

Image for post
Image for post
Controls for 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")
Image for post
Image for post
Space Ship drawn with GenPen using ZIM Pen

CONCLUSION

Image for post
Image for post
Learn JavaScript with Creative Coding Video Series

Creativity on the Canvas

Image for post
Image for post

Written by

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store