- 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 lets you share code.
2. SET UP
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!
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.
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!
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.
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:
|
|
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.
|
|
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:
|
|
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.
|
|
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.
|
|
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!
|
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. |
