Navigation for the ZIM JavaScript Canvas Framework

AboutExamplesLearnEditorCodeDocsDevsGold
LEARN
INTRO

new Circle() 100 radius and green center and drag - demonstration code for how simple and easy ZIM is to Learn JavaScript Coding on the Canvas - code creativity!

ZIM Editor lets you try code right in the Browser
CANVAS

Spirogram-type drawing done on Canvas with ZIM - very beautiful pink, purple and aqua blue lines like nets

The Canvas API includes the HTML 5 canvas tag and the JavaScript to draw in the tag such as the rectangle code below:

The canvas is a picture that can be drawn on by JavaScript code including with the ZIM JavaScript Canvas Framework

The above code is "lower level" and can look a little scary. We make it simple in ZIM:

The canvas is a picture that can be drawn on by JavaScript code including with the ZIM JavaScript Canvas Framework

The canvas is great for making games, puzzles, art, e-learning apps and other visually rich apps. If you are making information sites with scrolling pages of text and pictures, probably just use HTML, CSS and JS. See When to Use a JavaScript Canvas Library or Framework article by Dr Abstract in Medium.

It is best to use a library or framework when making interactive works with the Canvas, otherwise, there is no way to group shapes or tell which shape is being interacted with. The ZIM Framework provides easy containers and shapes, drag and drop, hit tests, components like buttons, sliders, dials and more based on the robust CreateJS. See WHY ZIM.

VIDEOS

A series of video thumbnails for the learn javascript with creative coding youtube series

The LEARN JAVASCRIPT WITH CREATIVE CODING videos match ZIM SKOOL lessons to provide an easy-to-follow way to learn the basics of JavaScript on the colorful HTML Canvas! View ZIM BASICS for ZIM specific video tutorials. Dr Abstract looks through mid to advanced code in the ZIM EXPLORE series. In a rush? See the CODE IN FIVE MINUTES series.

ZIM Kids Creative Coding Tutorials ZIM Basics Creative Coding Tutorials ZIM Kids Creative Coding Tutorials Code in FIVE Minutes with ZIM

Code ZIM inside Adobe Animate with ZIM SHIM. Here is a set of ZIM TUTORIALS FOR ADOBE ANIMATE!

ZIM Tutorials for Adobe Animate

CODEPEN

CodePen is an excellent resource for inspiration and learning. There is a series called CREATIVE CODING LESSONS. The lessons are NOT how to learn basic coding or ZIM (see the video series above or the schools below for those) but rather focus on techniques for making art, games, puzzles, etc. with creative coding.

ZIM on CodePen Creative Coding Lessons ZIM on CodePen Creative Coding Lessons


KIDS

Visit ZIM KIDS for Colorful Coding Workshop Tutorials including an easy online editor to test right in the Browser. TEACHERS can check how the lessons match curriculum. Tutorials are divided into PARTS, BUGS and THINGS and each tutorial has three levels. There are also MAGIC, SPELLS and SLATE pages to learn and practice! Test kids with BADGES.

ZIM Kids Creative Coding Tutorials ZIM Kids Creative Coding Tutorials ZIM Kids Creative Coding Tutorials


SKOOL

Visit ZIM SKOOL for Creative Coding Lessons including colorful theory and practice for both left and right brain learners! There are introduction pages for STUDENTS and TEACHERS. The lessons are found HERE and are supported by the many TUTORIAL examples in ZIM Learn.

ZIM Skool Creative Coding Lessons ZIM Skool Creative Coding Lessons


COLLEGE

Dr Abstract (ZIM Founder) is a Professor of INTERACTIVE MEDIA at Sheridan College in Canada. The Interactive Media program is a one-year post-grad with courses in Interactive Coding (Canvas), Web Design and Development (DOM), Audio Video, UI/UX, Project Management, Creative Technology and Mobile Design. Get MORE INFORMATION.

ZIM at Sheridan College Interactive Media One-Year Post-grad


ARTICLES

Dr Abstract on Medium - this is the logo for Medium

Dr Abstract has provided YOUR GUIDE TO CREATIVE CODING ON THE CANVAS which is a definitive twelve-guide collection to coding the Canvas with ZIM. ZIM ON DEV has articles on specific topics.

Learn JavaScript with Creative Coding Learn JavaScript with Creative Coding


collect Plasma Points for the Plasma Points mobile app with ZIM!
TUTORIALS

Original BASIC, MID and ADVANCED tutorials are below. We recommend the VIDEO series above for more recent material. For new coders and philosophers of code, watch the CODE ZERO videos. Learn to make HTML 5 Games with Dr Abstract! Get CERTIFCATES making ART and GAME projects. The TIPS show latest ZIM techniques and ZIM Bubbling the latest features! See the code of the ZIM INTRO page for a quick demo!

Code Zero - Learn the Philosophy of Code! Make HTML 5 Games with ZIM on the Canvas! ZIM Certificates - Steps to Make an App! ZIM Tips - Latest Code Advice and Techniques! ZIM Bubbling - Videos of all the latest features! ZIM Intro - see a ZIM Demo!
See BITS EXPO for ZIM Bits below in the ZIM Editor

BASIC LEVEL
MID LEVEL
COMING SOON
ADVANCED LEVEL
COMING SOON
COMING SOON