ZIM - Code and Learn Coding with ZIM for JavaScript and HTML Canvas with CreateJS


Practice with ZIM CODE see the Learn Page for tutorials

Creative Coding Lessons

LESSON 01 - Display Objects
Image showing a beautiful Ornamant Making Tool demonstrating Display Objects like shapes with with beautiful rythmic overlapping lines and the components to make them like sliders and buttons
Classes, Objects, Parameters, Variables, Scope, Statements, Dot Syntax, Chaining, Stage, Shapes, Transformations (x, y, rotation, scale, skew, registration), Components (Label, Button, CheckBox, RadioButton, Pane, Window, Waiter, Indicator, Stepper, Slider, Dial, Tabs, ColorPicker, Keyboard, Loader, TextArea)

LESSON 02 - Configuration Objects and Animation
An image showing six different animation configurations in tidy boxes for absolute, relative, series, from, wait and sequence animations taken from the ZIM animate demonstration page.
Literals, Object Literals, Configuration Objects as a Parameter, Animation (properties, time, easing, wait, loop, rewind, sequence, series)

LESSON 03 - Functions and Events
An image of a sample function reading function simple() {new Label('zim skool').center();} and then calling the function with simple();
Functions, Parameters, Return, Scope, Function Literal, Anonymous Functions, Timeout, Interval, Events, Types of Events, Event Objects

LESSON 04 - Abstraction
A blurred image of a green field with four or five dandelions in seed.  The blur simplifies the image and makes it timeless - as does abstraction.  The technique is called Focuso and is an image by ZIM Founder, Dan Zen - otherwise known as Dr Abstract.  But... when he is a photographer, his name is Hollander Maui.
Abstraction, Organization, General to Specific, Classification, Composition, Object Oriented Programming (OOP), Abstraction with Variables, Functions and Classes

LESSON 05 - Arrays and Loops
A picture showing colors in the square brackets of an array - beneath is a loop through the colors and each color is collected and used to color a new Circle.  The position of the circle is determined by the loop count.  The image has a flaw in it - I will fix it now.
Arrays, Accessing and Changing Arrays, Array Properties and Methods, Multidimensional Arrays, Objects (Classification) or Arrays (Composition), Loops, For Loop, Continue, Break, While Loop, ZIM Loop, Looping Arrays, Looping Objects, Looping Containers, Abstraction with Arrays

LESSON 06 - Conditionals and Debugging
Hand drawn faces in heavy black and white pen - a Hawaiian bartender (Tuk Tit Ti Tong); Coo, a cult of the giant minah bird follower; and gaylord leopardskin.  The characters from a Moustache Mystery by ZIM Founder Dr Abstract - as The Moustache!  The Mystery hold a fourteen nested conditional to give OSCI - off screen character interaction for which a Canadian New Media Awards Programmer of the Year was given.
Logic, Conditionals (if, else, else if), Operators, Boolean Operators, Comparison Operators, Logical Operators, Random Numbers, Debugging, Console, Syntax Errors, Tips

LESSON 07 - Templates and Building
The picture shows three dashed outlined rectangles of the ZIM colors green, blue and burnt yellow.  The first is showing the fit template which keeps a width and height proportion and fits within the dashed lines.  The outside template fits outside the dashed lines.  And the full template fills the dashed lines and does not scale.
Frame, Scaling, Templates, Loading Assets (Images, Sound, Fonts), Removing Security Errors, Building Steps, Efficiencies, Hard Coding, Order, Build Examples, Patterns, Build Techniques (Collections, HitTests, Snapping, Proportions, Damping, Tiling, Controls, Components, Progress Bars)

LESSON 08 - Controls
Colorful thumbnails showing Accessibility - creatiting shapes with a color picker and stepper, a swipe icon, and the many zim controls.  Pragma, Dr Absract's assistant is off to the right sitting on a ZIM rectangle in a ZEN-like yoga meditation pose - smiling her smirk.
Controls, Constants (Animate, Optimize, ActionEvent), Ticker, Control Classes (Accessibility, Swipe, Pages, Layout, HotSpots, Grid, Guide, Wrapper, Beads, Pixel, Bool, Scrambler, Pen, TransformManager, Parallax, Scroller, Dynamo, Accellerator, Swiper, MotionController (Keyboard, GamePad, Mouse), Partical Emitter, SoundWave, Portal, VR)

LESSON 09 - Data
On the left are five bright purple stars on yellow background with a submit button beneath representing a form to submit to the database.  On the right are horizontally nested boxes with their tops and bottoms erased but corners left now looking like nested arrays - a caption above says that brackets are the text-based way to show boxes.
Data, MetaData, Information, Organization, Nesting, Brackets, Hierarchy, Nodes, Client, Server, Front-end, Back-end, PHP, MySQLi, Asynchronous, AJAX, JSON, Database, Table, Record, Field, Binding