YOUR GUIDE TO

For everyone from absolute beginner to absolute professional

Image for post
Image for post
Canvas Examples :: games, apps, puzzles, art, visualizations

Let’s get you coding in this very first paragraph! Type or paste the code below into a simple Online Editor and press TEST to make a draggable circle! You can do it, it is just one or two clicks and you are coding. Welcome to the Canvas, an HTML tag for visual content like art and games and can be coded with JavaScript, the word’s most popular programming language.

new Circle().center().drag();
Image for post
Image for post
Online Editor for Kids to Test Code

You can set the size (radius) and color of the circle like so:

new Circle(100, red).center().drag();

There are other settings and many more types of objects to make. Let’s try a few more to get a sense of what we can do. Then we will introduce the parts of coding creativity on the canvas! …


YOUR GUIDE TO

As Adobe discontinues support for the Flash plugin

Image for post
Image for post
ZIM SHIM to convert Animate and Flash files to ZIM

In December 2020, Adobe will officially stop supporting the Flash plugin.

Adobe Animate (formerly Adobe Flash) exports to HTML 5 as CreateJS. CreateJS is a JavaScript library built for the HTML Canvas. ZIM is a JavaScript framework that adds conveniences, components and controls to CreateJS. You can see what it is all about in ◎ Your Guide to Coding Creativity on the Canvas.

Our current guide has two main parts:

  1. Exporting from Animate to the Canvas
  2. Recreating ActionScript content on the Canvas

1. Exporting from Animate to the Canvas

You can choose a Canvas file when you start an Animate project. You can then code in JavaScript using CreateJS in the Actions window. You will find coding in CreateJS very similar to ActionScript — it is Object Oriented Programing on a Stage with MovieClips, etc. When you export, the output will be HTML and JavaScript (CreateJS) on the Canvas rather than the traditional ActionScript SWF file. …


YOUR GUIDE TO

Welcome readers from ◎ Your Guide to the Mechanics of Creativity

Image for post
Image for post

Creating with Combinations (Composition)

Image for post
Image for post

That was quite the creative cyclone in ◎ Your Guide to Content in Creativity! We created by:

  1. breaking an object into its parts (analysis)
  2. generalizing the parts (classification)
  3. finding alternatives to the parts
  4. bringing parts together (synthesis)

In the above diagram, we have two different objects and we will demonstrate creativity by combining them in different ways. Further on in this guide we will explore the concept of RELEVANCE but let’s look at combining first.

Image for post
Image for post

A ◈ We start with looking at combinations in composition (physical). One thing to note is that in this case, the two objects have no direct parts in common. If we want, we can combine the two objects completely to get a “new” idea but in the patent world, (patents describe and claim an invention) this is called an aggregate and is most likely not patentable. A famous example is an eraser on the end of a pencil. They both keep doing the same thing and there is no synergy or mix resulting in something new. …


Your Guide To

Welcome readers from ◎ Your Guide to the Mechanics of Creativity

Image for post
Image for post

Context

Our first foray into creativity was quite the ride! We went from dresser drawers and bullets to DNA and consciousness! All this and more as we explored the terms of the Creativity Framework with respect to hierarchy including CONTEXT (what is above a node) and CONTENT (what is below a node). We saw that we ANALYZE to break things into aspects and SYNTHESIZE to join things for a new perspect(ive). …


Your Guide to

and The Dan Zen Museum

Image for post
Image for post
Well, if all the drones have tickets, maybe we should get one too!

Your Guide to

Welcome readers from ◎ Your Guide to the Mechanics of Creativity

Image for post
Image for post

This guide is one of five parts. Please start with ◎ Your Guide to the Mechanics of Creativity and then ◎ Your Guide to Context in Creativity. After reading below, follow with Your Guide to Content in Creativity and Your Guide to Relevance in Creativity (articles to come).

Meaning and Two Types of Hierarchies

Easy as pie! In the last parts of the Guide, we introduced the terms and structures used in the Dan Zen Creativity Framework. The structure of a hierarchy is pretty straight forward. Context is above a node and content is below a node. …


Your Guide to

Welcome readers from ◎ Your Guide to the Mechanics of Creativity

Image for post
Image for post
An excerpt from the Creativity Framework by Dan Zen

This guide is one of five parts. Please start with ◎ Your Guide to the Mechanics of Creativity and then after reading below, follow with◎ Your Guide to Flexibility in Creativity, Your Guide to Content in Creativity and Your Guide to Relevance in Creativity (articles to come).

Terms used in the Framework

In part 1 of the Creativity Framework, creator Dan Zen discusses the terms and structures of creativity. These terms and structures will be used in Part 2 to make content. Let’s go through part 1 now.

Image for post
Image for post

A hierarchy! Oh great! Why did you remind me of my boss and my boss’s boss and my boss’s boss’s boss and so on! …


Your Guide to

See the Steps to Create like Magic!

Image for post
Image for post
Excerpt from the Dan Zen Creativity Framework

And a plain English framework called ZIM

Image for post
Image for post
Hello Worlds!

Any code that uses the word context can be simplified. This means, the canvas, as an open source way to make games, art, apps, visualizations and more in HTML with JavaScript, is off to a rough start with its first few lines:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

A big NO THANK YOU to getContext(“2d”)

Artists and designers who are likely to use the canvas will shy away from these words — I know I did! Also, nobody wants to use document.getElementById() to access an object! …


Apparently, the answer is simple…

Image for post
Image for post
Dr Abstract talk on FOUR GOLDEN FUNCTIONS for developers

BREAKING NEWS! ZIM site for Developers launched: https://dev.zimjs.com

Have you seen me giving Dev talks with color and animation flying on the screen made with a few lines of code? Something like this:

new MotionController(new Emitter().center(), "mousemove");

A particle emitter follows your mouse! Code with this Online Editor. Just click the link, copy the code and hit TEST.

Image for post
Image for post

I racked my brain for this talk, to think what would developers like to see. Of course, developers are all different, but in general, I thought I should show some code to make their lives easier.

CI and CX for coder interface and experience! …

About

Dr Abstract

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store