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

TEACH

Teach  Games  Puzzles   Apps     Art   and more with CODE
  • Make a Browser or Mobile App, Game, etc. with just one page of text
  • New HTML Canvas for Wondrous Free-form Interactive Features
  • Code the Canvas with ZIM using the Popular and Powerful JavaScript
  • ZIM designed for all ~ Absolute Beginner to Absolute Professional
  • Tutorials, Workshops and Lessons prepared by ZIM Founder, Dan Zen
  • Canadian New Media Awards Programmer and Educator of the Year
LEARN SKOOL KIDS PROPS
ZIM is a free JavaScript framework for making Interactive Media on the HTML Canvas with easy shapes, drag and drop, hit tests, components like buttons, sliders, dials and more based on the robust CreateJS. ZIM should not be used for standard information sites - use normal HTML and CSS for this. See WHY ZIM
1. TOOLS

Students will need a computer of any sort like a PC or Mac. A text editor preferably with syntax coloring (Atom, NotePad++, Sublime, Brackets, DreamWeaver, etc.). And any modern browser such as Firefox, Chrome, IE, Edge or Safari. Requirements have never been so freely available!

ZIM ZAP - Code Sharing for HTML Canvas coding with JavaScript and CreateJS ZIM ZAP lets you share code.

2. SET UP
Copy the template from the CODE page or download the ZIM ZIP or see instructions at ZIM Frame. Older templates are inside the ZIP files for the Workshops and Lessons.
3. TEACH
We would be happy to help you out with anything you need to teach coding with ZIM. Please visit ZIM SKOOL for our latest lessons to match your curriculum. We have a SLACK Team which you are welcome to join or contact Dr. Abstract directly!

Lessons :: Creative Coding Lessons with Practice sections

Teach with the ZIM SKOOL Creative Coding Lessons including colorful theory and practice for both left and right brain learners! Please see the TEACHER introduction. The lessons are found HERE and are supported by the many TUTORIAL examples in ZIM Learn. Complement the lessons with Workshops, Modules and Tests found lower down in ZIM Teach.
ZIM Skool Creative Coding Lessons ZIM Skool Creative Coding Lessons

VIDEO SERIES :: Learn JavaScript with Creative Coding

The LEARN JAVASCRIPT WITH CREATIVE CODING video series supports the ZIM SKOOL lessons to provide an easy-to-follow reference for learning the basics of JavaScript on the colorful HTML Canvas!
Learn JavaScript with Creative Coding

Kids :: Creative Coding Tutorial Workshops for Kids

Teach Kids to code at ZIM KIDS where there are resources for Creative Coding Workshop Tutorials including an easy online editor with code to follow and test right in the Browser. Tutorials are divided into PARTS, BUGS and THINGS and each tutorial has three levels! There is a MAGIC section that is like a little textbook for kids. Visit the Kids' TEACH info page to help match curriculum.
ZIM Kids Creative Coding Tutorials ZIM Kids Creative Coding Tutorials

Workshops :: Three-hour workshop packages for Teachers

Each workshop is designed to teach core techniques in THREE hours. Workshops are distributed in ZIP files that contain instructions and code for Teachers, a ZIP for the Students and the steps to be followed. There are local versions of code libraries and documentation in case of no Internet connection. We hope you find teaching rewarding - please contact us if there are any requests or comments.
ZLWS_01 | C A N V A S : Create on the HTML Canvas - learn the basics of Interactive Media.

Dedicated to Carrie Fisher - an eternal idol

Add shapes, images and text to a canvas stage and set properties like position, rotation, scale and alpha. Nest objects in containers. Drag content and apply mouse interactivity. Use components like buttons and sliders to control a small application including sound and animation. Skills to be learned:
  • Canvas Template with Stage
  • Shapes and Registration Points
  • x, y, rotation, scale, alpha
  • Containers and Nesting
  • Dragging and Dropping
  • Events and Targets
  • Images and Sounds
  • Components like Buttons

ZLWS_02 | C O D I N G : Learn the basics of coding with JavaScript and the Canvas.

JavaScript is the popular and powerful programming language of the Web and Apps. We will learn the basics of coding such as variables, conditionals, functions, random numbers, loops, arrays, objects, events and more as time permits. These techniques are common across many languages giving you transferable skills.
  • Script Tags in HTML
  • Programming Syntax
  • Expressions, Operators, Statements
  • Variables and Concatenation
  • Objects, Properties, Methods
  • Random Numbers
  • Conditionals and Loops
  • Arrays and Object Literals
  • Classes and Parameters
  • Functions and Scope
  • Timeouts and Intervals
  • Tickers, Animation, HitTests

ZLWS_03 | G A M E : Make a game to stop circles from hitting one another as they grow.

The player sees colored circles growing randomly on the stage. They have to click the circles to make them smaller. If the circles touch they stop growing. If all the circles have stopped growing then the game is over. The score is how long the player has played. Skills to be learned:
  • Shapes (with random colors)
  • Tiling (looping)
  • Timers (intervals)
  • Animation
  • HitTests
  • Interaction (click / mousedown)
  • Sound
  • Scoring (text fields)
  • Toggle Buttons

ZLWS_04 | A S T E R O I D S : Shoot and explode asteroids from a flying pod!

Add assets like images, spritesheets and sound and control them with keyboard, mouse and touch events. Animate objects in random directions, shoot and perform hit tests. Make asteroids explode and keep score. Make labels, indicators and panes for display interfaces. Keep track of time and lives and handle game end and restart.
  • Images, Sounds & Sprites
  • Looping & Timeouts
  • Keyboard & Mouse Events
  • Animation & Randomness
  • Hit tests & drawing
  • Logic & Scoring
  • Timers & Tickers
  • Labels, Indicators & Panes

ZLWS_05 | P H Y S I C S : Create a magical data visualization!

Make a cluster of interactive circles that represent data. The circles can be moved about but will always settle in a cluster. In this workshop we explore a physics world with bodies, forces, linkages and mappings to visual elements in ZIM. Physics has many uses from games and puzzles to e-learning apps. ZIM provides an easy connection to the Box2D Physics Engine.
  • Create a physics world
  • Add bodies such as basic shapes
  • Map the shapes to ZIM shapes
  • Apply forces and linkages
  • Apply mouse interaction
  • Create shapes based on data
  • Add labels to visualization
  • Apply colors to match data

ZLWS_06 | M E M E : Create an editing tool to make memes with graphics and text!

Make a tool panel to handle all the interface needed to create a meme! Allow the user to upload pictures from their desktop or mobile with click or drag and drop. Let the user drag, resize and rotate the image with handy components. Add text and backing rectangles and adjust dimensions and position. Provide interface to change layers of the items and save the final meme!
  • Drag and collapse a panel
  • Load images from device
  • Make Dials and Sliders
  • Rotate, Scale and Color
  • Use a TextArea for input
  • Use Steppers for dimensions
  • Sort and delete items by layers
  • Save an image to a new window

TESTS :: THREE HOUR Practice Tests

Each Test Practice is three hours long and is mid to advanced level. The Practice ZIP includes a video of what to build, docs, libraries, test file and test answer file.
ZPT_01 | : Practice Test 1



Sprite, Swiper, Bitmap, Squiggle, Blob, Animation, Label, etc.

ZPT_02 | : Practice Test 2



Bitmap, SoundSprite, Swiper, Label, Wiggle, HitTest, Drag, Tile, Interval, Animation, etc.

ZPT_03 | : Practice Test 3



Tile, Wiggle, Animation, Sound, Interval, HitTest, MotionController, Label, etc.

Beyond :: Further exploration in creativity and coding