OwMe the cat! Click here to get to the main ZIM site! This is a whole big world of code! Press the back button to come back - or at the very bottom the ZIM site are the gold bars and ZIM Kids is in the gold bars.

ZIM KIDS

Pragma says coding can be fiddly diddly but funtastic!

Creative Coding

JavaScript tutorials for Schools, Coding Camps and Workshops

MAGIC SPELLS SLATE TEACH

This is the first of the ZIM Kids tutorials. They picture thumbnails all have the same format - a title bar, a picture of the tutorial and a footer bar with the name. Each tutorial has three levels but there is only one level pictured on this thumbnails - the rest will be a surprise! Pictured here is a red square on a grid that has lines at every five pixels with thicker lines at every ten pixels - this is how you locate an object on the stage. There is a title bar at top with a title of PARTS in a cool font and then a number in green at the left (number 1). It says basic at the right on the title bar. There is a bar at the bottom that says VARIABLES and it is the theme of this tutorial.

This is the thumbnail for functions - again under the category of PARTS. It shows a cool purple arc made from overlapping rotated rectangles that makes a pattern like a doily or the middle of a sunflower. We ran a function over and over again in time each time rotating the rectangle to make this pattern.

Loops - under the PARTS category. Wow! Concentric circles - or circles within circles of some of the ZIM colors (blue, pink and green). It looks like a target and gives feeling of depth because things get smaller as they are farther away. They were made with loops which can run many times quickly and are great for making pattens. The loops happen all at once - not over time like we did with the interval function in the last example.

Events - under the PARTS category. Events are when something happens, like when we click or press a key. Pictured is a red triangle pointing to the right - if we click it it moves this way! The triangle has faded triangles behind to indicate that it has been moving. In the tutorial, the faded triangles are not really there... it was an effect because just a triangle on the screen looked a little boring for the thumbnail - shhh... do not tell the others!

Conditionals - under the PARTS category. Oooo - it is a big yellow happy face! We are using conditionals - which are if statements - to either show a happy, sad or thinking face based on odds. Programming has a random number which can be used along with conditionals to give us odds of something happening. The odds are one third a chance that a happy face will show, etc.

Containers - under the PARTS category. There are many red circles with random numbers in them. These were added to a container so we can do things with them all at once like hide them or move them or animate them or click on the container and find out which object was clicked. Objects in containers are called children and the container is the parent!

Arrays - under the PARTS category. Here we several long bar graphs - one above the other. The bars are at different heights which represent the number in an array. An array is a list of things - this time we list numbers. We can also hold strings (words or letters) in an array or any type of object in an array - they are very handy. The next bar graph shows the first two numbers switched. The next one shows the first number moved to the last number. The bar graphs show the changes we are making to the arrays in the code!

Objects - under the PARTS category. Woah! Flying saucers! On a dark background, a silver domed suacer is slightly tilted to the left and has a trail of orange, yellow and read rings beneath it showing how the suacer is levetating in the air! A smaller suacer is in the background. These are animated in the tutorial to go up and down and wiggle. This is the last of the BASIC tutorials. We move on to BUGS and THINGS with four tutorials in each - although one day there may be more THINGS added.

a little yellow round bug with dark round eyes offset with white sits on a diagonally striped grey and silver background inside a purple dashed-line pen. The words at the bottom say drag bug in pen.

kids/images/bugpath_s.jpg

Our little round yellow bug with black eyes offset with white is sitting on the grey and silver striped background looking at a white cube of sugar. mmm. The example will let you make a bug that moves to where you press on the page. You try and make the bug eat the sugar and when you do, a new sugar will appear somewhere random.

Oh no! Our little round yellow bug with black eyes offset with white is surrounded by red bugs! There is a dashed white circle three times as big as our bug around the bug. This shows the area that we can press to make the bug shoot away from the red bugs - or shoot towards the red bugs. Our bug will always move in the opposite direction to where we press and if we press near the bug it moves slowly and if we press farther from the bug but still inside the dashed circle then the bug moves faster. This allows us to control the motion of the bug in a very easy but almost invisible manner. If we press outside the dashed circle then our bug will not move. There is also a big red triangle in the picture and that helps us sweep up the red bugs back into their home that is not shown. It is a cute little game because if our bug hits the home then a new red bug comes out. And we have to bump the red bugs back into their home to get rid of them. Controlling our bug is a little tricky so we often accidentally make more red bugs than we can send back home! All this is done with ZIM physics and simple enough for kids to make!

We have now left the bug tutorial series. Now we are starting general tutorials. This one is a grey rectangular head that has big green eyes a blue triangle nose, a funny red twisty blob for a mouth and a silly looking squiggle for hair! All these parts can be made and dragged about. They can be saved for the next time which is suggested by the pink button that says reset in white letters. The same grey and silver diagonal striped background is on this tutorial and all the next tutorials too.

twenty-five little squares with rounded corners are tiled (five by five) on our striped background. They have the following colors: white, pink, white, green, green then the next row: green, white, black, black, black, etc. They are random and look like yummy candies.

a firey orange and yellow explosion is in the center on our striped background. The explosion is roundish and is bright in the middle and then gets dark and curly around the edges. It kind of looks like a cloud, all puffy and soft but also looks scary like smokey, whispy fingers that will get you! In this tutorial we make simple explosions from a particle emitter that sends little shapes flying from one point. We also use a Sprite which is a bunch of pictures that we play quickly in sequence in the same place. This makes an animation that looks real - and that is how we make our eplosion. We also hear sounds in this one! Boooom!

The word Scribbler is at the top left in black with a white outline. Then there is a thick lined fluffy bumpy cloud with all sorts of thin lined scribbles inside. These are all curly like curly hair or a bunch of wild string. The picture was made with the Scribbler which is a drawing tool we can make in this tutorial. It makes a curve that follows the mouse but also keeps curving on its own!

Here are more examples of code
for when you are done your lessons!

ZIM BITS - example code

Drawing ZIM Shapes - ZIM Bits

Drawing ZIM Shapes

Random from Array - ZIM Bits

Random from Array

Quick Log to Console - ZIM Bits

Quick Log
to Console

Animate Properties - ZIM Bits

Animate Properties

Make a Pop Up Window - ZIM Bits

Make a Pop
Up Window

Drag and Drag Copy - ZIM Bits

Drag and Drag Copy

Parallax 3D - ZIM Bits

Parameters or Objects - ZIM Bits

Parameters or Objects

Swipes and Swiping - ZIM Bits

Swipes and Swiping

Snapping Multiple Objects - ZIM Bits

Snapping Multiple
Objects

Damping and Easing - ZIM Bits

Damping and Easing

Buttons, Radio Buttons, Check Boxes - ZIM Bits

Buttons, Radio Buttons,
Check Boxes

Drag, Slide and Surround! - ZIM Bits

Drag, Slide
and Surround!

Tabs and Button Rows - ZIM Bits

Tabs and Button Rows

Sequencing Animation - ZIM Bits

Sequencing Animation

GUI Editor - Place - ZIM Bits

GUI Editor - Place

HotSpots! - ZIM Bits

Dials and Indicators! - ZIM Bits

Dials and Indicators!

Scaling Content to Fit - ZIM Bits

Scaling Content
to Fit

Dynamic Drawing with Easing - ZIM Bits

Dynamic Drawing
with Easing

Scrollbars with Sliders - ZIM Bits

Scrollbars with
Sliders

Adding a URL - ZIM Bits

Registration Points and Centering - ZIM Bits

Registration Points
and Centering

Tiles and Pads - ZIM Bits

Masks and Masking - ZIM Bits

Masks and Masking

Sound Manipulation - ZIM Bits

Sound Manipulation

Drawing with Blitting - ZIM Bits

Drawing with Blitting

Are Objects Hitting? - ZIM Bits

Are Objects
Hitting?

Scrubbing an Animation - ZIM Bits

Scrubbing an
Animation

Gradient and Gloss! - ZIM Bits

Gradient and Gloss!

Swipeable Scroll Window - ZIM Bits

Swipeable Scroll
Window

Falling, Catching and Dodging - ZIM Bits

Falling, Catching
and Dodging

Make a Maze with ZIM - ZIM Bits

Make a Maze
with ZIM

Physics with Box2D - ZIM Bits

Physics with
Box2D

Buoyancy with Physics! - ZIM Bits

Buoyancy with
Physics!

Scroll Parallax Effect! - ZIM Bits

Scroll Parallax
Effect!

Chaining Methods - ZIM Bits

Chaining Methods

Pages and Hotspots - ZIM Bits

Pages and Hotspots

Blend Modes - ZIM Bits

ZIM 4TH Methods - ZIM Bits

ZIM 4TH Methods

Ticker Engine - ZIM Bits

Custom Fonts - ZIM Bits

ZIM Pizzazz! - ZIM Bits

Sprites and SpriteSheets - ZIM Bits

Sprites and
SpriteSheets

Saving Data and JSON - ZIM Bits

Saving Data
and JSON

Side Scroller Animated Background - ZIM Bits

Side Scroller
Animated Background

Color Picker for Propeller! - ZIM Bits

Color Picker
for Propeller!

Path Finding Level Editor! - ZIM Bits

Path Finding
Level Editor!

3D with ThreeJS - ZIM Bits

3D with ThreeJS

Icon and Toggle Buttons! - ZIM Bits

Icon and
Toggle Buttons!

Skew for Effect - ZIM Bits

Skew for Effect

Animate Circles and Spirals - ZIM Bits

Animate Circles
and Spirals

ZIM loop() - ZIM Bits

CODE PEN - serious code

Bloob! Generative Art App on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Bloob!
Generative Art App

Roller Coaster on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Multiuser Shared Letters on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Unlocklet
Multiuser Letters

Animated Face with Blob Bezier on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Flowers
Talking Head

Generative Art on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Gangnam Donut
ZIM Generator

Pattern Game on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Animated drone with Sound Visualization on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Drone
Sound Visualization

teleporter data on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Teleporter Network
Async Data

Flutter Comparison ZIM and Dart with ZIM at 26% on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Flutter Comparison
ZIM at 26%

Animated bubbles on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Optical Illusion

Scroll Parallax like GSAP ScrollTrigger on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Scroll Parallax

100 Shapes with Tips on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

100 Shapes
ZIM Tip()

100 Starts including dynamic Lists on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

100 Stars
Dynamic Lists

VUE Comparison with ZIM at 40% on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

VUE Comparison
ZIM at 40%

Frankie is Loaded Halloween Card on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Frankie is Loaded!

Animated Blob Mask on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Blob Mask
42% the HTML

ZIM emitting Love on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Love!
ZIM Emitter

Repetition with ZIM Tile on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Repetition
ZIM Tile

Holiday Advent-like Calendar and Countdown on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Advent Calendar
with Countdown

Ornament Decorator on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Ornament Decorator

Animated bubbles on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Summer Bubbles!

Bat Light on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Emitter on Hello World Text on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Hello World Typos!
Emitter

3D mobile gallery on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

3D Phone Gallery

Isometric Game of Life on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Isometric
Game of Life

ZIM Overlay on HTML Page on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Splat GSAP Compare on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Splat!
GSAP Comparison

Cut and Paste on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Arrows following path on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Arrows on Path
Interactive Overlay

Star Wars Organizer on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Star Wars!
Organizer

Generative Art Rings on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Hero data game on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Hero!
Game with Data

Pegs - HTML SVG Comparison on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Pegs
SVG Comparison

Positioning on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Positioning
Demonstration

Registration Points on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Registration Points
Demonstration

Color Sliders on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Flutter Comparison on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Flip Flutter!
Comparison at 47%

Control my Heart on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Control my Heart 2

Dr Abstract Dancing on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Dr Abstract Dancing!

Puppet Blobs on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Generative Art on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Holiday Lights on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Holiday Lights!

Tree Puzzle on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Tree Puzzle
Radial Menu

Holiday Beads on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Happy Holidays!
With Beads

CreateJS Saucert Sprite Comparison on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Saucer Sprite
at 29% CreateJS

Controlled Simplex Noise on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Controlled Noise

Create on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

ZIM at half the size of GSAP3 on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

GreenSock
Comparison

Radial Menu on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Radial Menu
Letter Animation

Grim Reaper on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Path animation and trails on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Perspective Path
Emitter Trail

Multiple Select on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Code General
Multiple Select

Animation on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Pattern at 1% size of CSS on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

CSS Comparison
ZIM at 10% size

Drone Sound Game on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Peace
Drone Game

P5js Processing Comparison at 40% size on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

P5js Comparison
ZIM at 42% size

Soundscape on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Dr Abstract's Car
Soundscape

Animated Arrow Squiggle on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Five Lines of Code Blend Mode Tool on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Five Line
BlendMode Tool

Pinball with Sparkle Particle Emitter at 21 percent Vanilla code on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Pinball Sparkles
21% Vanilla

Color Game on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

DOTGON
Color Game

Arrows with Pizzazz on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Animated Blob on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Op Art on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Twitter App on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Tweet Doctor!
Web App

Trading Card on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Fibonacci Math Visualization on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Fibonacci Brain
Math Visual

Web App on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Syllable Creator
Web App

Physics Game featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Noodles
Physics Game

3D Icon
with zDog

Pulldown Menu - Dat Gui - featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

PixiJS Comparison featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

PixiJS
Comparison

React Comparison featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

React Comparison
with ZIM at 40%

CSS Animation Comparison featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

CSS Animation
Comparison

Ice Cream Pizzazz featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Detecting Colors on Path Game featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Rocket on Path Game featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Rocket on
Path Game

Zdog 3D with ZIM featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Tiles featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

ZIM greeting featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

ThreeJS Planet featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Anti-grav Physics featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Anti-grav
Physics

Blob with SVG featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

PaperJS Comparison with drag on path featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

PaperJS
Compare

Star Ship Alien Portal Game featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Star Ship
Alien Portal

Simple Op Art Moire on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Parallax Aliens featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Isometric Maze featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Polygons featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Animated Blob featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Parallax Domes featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Dynamic Path Animation featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Jared Tarbell inspired Generative Art featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Tarbell Inspired

Polygons featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Blobatar featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Blobatar
(prototype)

Data Visualization on the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Data
Visualization

Animated Pen featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Moustache
Pen on Path

Pen within Bounds featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Physics featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Spark along Fuse featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Animated Art featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Path Animation featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Path Animation featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Squiggle to Blob featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Squiggle to Blob

Physics featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Dynamic Sprite and Scroller featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Dynamo & Accelerator

Animated Sprite and Scroller featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Sprite & Scroller

Interactive Hand-drawn Maze made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Hand-drawn
Maze

Global to Local Coordinates featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Global and Local
Coordinates

Generative Art featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Shape Tween featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Animate Blob featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Kaleidoscope featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

VR Virtual Reality featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Virtual Reality
Depth Shifting

Layers featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Transformable
Layers

Drag on Path featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Animated Pen featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Path Animation featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Styles featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Pages and HotSpots featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Pages and
Hotspots

Responsive Design 3 on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Responsive
Design (3)

Responsive Design 2 on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Responsive
Design (2)

Responsive Design 1 featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Responsive
Design (1)

Noise featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Beautiful Noise

Buttons featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Parallax featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Particle Emitter featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Progress Bar with percentage featured on CodePen for the Canvas made with ZIM JavaScript HTML Canvas Interactive Media Framework powered by CreateJS - ZIMjs

Patterned Progress

ZIM would like to thank Karel Rosseel
for making ZIM Kids better!