LEARN
BEGINNER
The very visual results with ZIM are great for
left and right brained learners!
Start
Open the ZIM Editor and type new Circle(100,
red).center().drag(); Press the TEST button (or ENTER
key) to see
results! See VID
Zapps
Press the ZAPPS button to see examples. Explore the BASIC examples.
Press the EXPO link on the bar to see thumbnails.
Code
Press the CODE button to see the code for any example. Then press the
yellow arrow (bottom right of code) to copy the code to your editor screen.
Next
The first two links below, Kids and Skool, offer full curriculum. Code Zero is a video series for those new to coding. Creative Coding helps
you learn JavaScript in a visual and fun way! The S is link to the Sheridan Interactive Media college
program.
INTERMEDIATE
Canvas
You may know JavaScript - now welcome to the Canvas! ZIM is built on
CreateJS (which we manage). This gives
us a stage, containers (scene graph or display list), basic shapes and hit test, media
loading, and events.
Tips
ZIM has many conveniences like two ways to handle parameters (ZIM
DUO), dynamic parameters (ZIM VEE), and style for the canvas (ZIM OCT). See ZIM Tips for these and more!
Docs
The ZIM Docs show our classes, functions,
constants, etc. The definitions open up to give descriptions, examples, parameters, methods,
properties, and events.
CodePen
ZIM on CodePen has many examples with comments and references. You can
join CodePen, follow ZIM and fork the examples. See the ZIM Topic for a
currated list including ZIM's Creative Coding tutorials.
Next
The links below start with a ZIM Basics video series assuming you know JavaScript and are
new ZIM. Note the two menus in the Cheat Sheet for all
components and controls. See vids of demos made in Five Minutes and Bubbling shows new ZIM features.
ADVANCED
CDN & NPM
Adobe Animate
Adobe Animate (formerly Flash), exports to CreateJS and therefore
ZIM. The Animate page has a set of tutorials on how to use the
ZIM Shim or Adobe Animate.
Mobile
ZIM is made for mobile! See the Mobile Page which outlines mobile features and inlcludes a
link to the PWA Tool to make Progressive Web Apps in five minutes.
Patterns
Here is an info page for Model View Controller with ZIM and a Local Loading with ZIM vid. See our Custom Library page to extend ZIM. All have ZIP files.
Next
The links below go to the ZIM Dev site, the advanced video series ZIM Explore and Under the Hood. Finally, a link to the Helper Libraries for extra functionality.
ARTICLES
GUIDES
Your Guide to: Coding Creativity on the Canvas Your Guide to: When to Use a JavaScript Canvas Framework Your Guide to: Selecting a JavaScript Canvas Framework Your Guide to: Editors and Templates on the Canvas Your Guide to: Coding Concepts with the Colorful Canvas Your Guide to: Components on the JavaScript Canvas Your Guide to: Conveniences when Coding on the Canvas Your Guide to: Interactivity on the Canvas with JavaScript Your Guide to: Animation on the Canvas with JavaScript Your Guide to: Accessibility on the Canvas with JavaScript Your Guide to: Images, Sounds and Sprites on the Canvas Your Guide to: Style on the Canvas Your Guide to: Responsive and Adaptive Canvas Design Your Guide to: Controlling the Canvas with JavaScriptMAKE HTML 5 GAMES
Make Html 5 Games Tile Game Tutorial Make Html 5 Games Falling Game Tutorial Make Html 5 Games Side Scroller Game Tutorial Make Html 5 Games Isometric Board Game Tutorial Make Html 5 Games Physics Game TutorialPUBLISHED
Innovations in Code Canvas API frameworks in Plain English How to get a Developer to use the Canvas 2D Interactivity In 3D Building More In Adobe Animate With Zim Creative Coding For The Both Brained What Is Interactive AnimationPROMOTIONAL
An Invite For Generative Art Makers And Interactive Artists Dr Abstract The Creative Mind Bridging Code Art And The Future Of Innovation Ranking Frameworks To Make Kids Apps Ranking JavaScript Canvas FrameworksThere are also a bunch of short articles on Dev.to Please follow us and leave some claps and hearts! On Medium, you can leave many claps per article.
ARCHIVE
See the ARC for canvas info, all the video, articles, and tutorial series including the older What
IZ, Capture, and ZIM Bits!
Learn Archive
Learn Archive