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. …

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