ZIM - Gen Art - Generative Art with ZIMjs for JavaScript and HTML Canvas with CreateJS


Dr. Abstract explains and defines generative art for the HTML Canvas with JavaScript, CreateJS and ZIMjs interactive media framework Generative Art is created with computer code often using loops or intervals. Loops repeat patterns all at once, whereas intervals repeat patterns in time. Press MORE to see how to make art with ZIM...

Loops

ZIM has a loop function that makes looping easy! The traditional JavaScript for loop has always been awkward to use and hard to learn for beginners. ZIM Loop loops through:
  1. Numbers
  2. Arrays
  3. Object Literals
  4. Containers
  5. HTML Collections
Each time, we are given the object we want, we can also receive the index and the total. Set the third parameter to true to loop backwards.

Time

For generative art, time is important. ZIM has an interval function that runs a function in time. This is like the JavaScript setInterval but has handy features:
  1. It can run a specified number of times
  2. It can run at specified or random times within ranges
  3. It can start right away (or not)
  4. It passes the count and total to the function
ZIM also has a Ticker class that runs as fast as the screen refreshes or can have a set frames per second. ZIM ensures that there is only one stage update after all functions in the queue run.
Ticker.add(function, stage) - adds the function to the Ticker queue for a given stage and returns the function that was added
Ticker.remove(function) - removes the function from the Ticker queue
Ticker.removeAll([stage]) - removes all functions from the Ticker queue (optionally per stage)
Ticker.always(stage) - overrides OPTIMIZE and always runs an update for the stage even with no function in queue
Ticker.alwaysOff(stage) - stops an always Ticker for a stage
Ticker.has(function, stage) - returns a Boolean true if function is currently added to the Ticker for the stage - or false if not currently added
Ticker.setFPS(30, 60) - (mobile, pc) default is set at natural requestAnimationFrame speed - this seems to be the smoothest
Ticker.setTimingMode(mode) - (default "raf") RAF uses RequestAnimationFrame without framerate synching - gets screen synch (smooth) and background throttling
Ticker.raw(function) - a stand-alone direct call to RequestAnimationFrame for maximum speed
Ticker.removeRaw(id) - remove the raw function based on the return value of the var id = Ticker.raw(function)
Ticker.dispose([stage]) - removes all functions from the queue removes and removes the list (optionally per stage)
Docs

Graphics

The Canvas is known for its dynamic drawing. This boils down the Shape class. ZIM uses the CreateJS Graphics class for custom shapes with:
  1. Fills and Strokes
  2. Lines and Curves
  3. Rectangles and Circles
  4. PolyStars and Ellipses
  5. Linear and Radial Gradients
  6. Paths from Adobe Animate
This is how dynamic drawing is handled on Raw Canvas - but ZIM adds a bunch of conveniences listed below.

Pen

ZIM provides a Pen class that can be manually dragged, animated and animated along paths. The Pen has a variety of types and options that can be explored in the GEN-PEN tool.
Pen(size, color, penType, damp, spread, borderColor, borderWidth, end, paper, nib, cache, ctrlKey, cropScale, undo, undoKeys, draggable, onTop, deleteable, doubleClickDelete, immediateStop, lineAlpha, lineBlendMode) Docs

Shapes

ZIM provides a set of shapes all that can be dragged, animated, transformed, used as masks, have blendModes applied, etc. These are:
  1. Circle
  2. Rectangle
  3. Triangle
  4. Blob
  5. Squiggle
The Blob and Squiggle classes have Bezier points with handles and are extremely versatile - see the ZIM NIO site:
  1. Users can change the paths - like in Illustrator
  2. Their points can be animated
  3. Objects can be animated along their paths
  4. Text can be placed along their paths
  5. Objects can be dragged along their paths
  6. Paths can be recorded
  7. User-changed paths can be automatically saved
  8. SVG can be converted into Blobs and Squiggles
Squiggle(color, thickness, points, length, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, dashed, onTop, stickColor, selectColor, selectPoints, editPoints, interactive, style, group, inherit) Docs
Click the example above to try - and note that the colors are being animated.

Tile

The ZIM Tile class lets you easily tile objects. With ZIM Pick, these can be randomized or sequenced. Items in the Tile can be interactive and can be animated in Sequence with the sequence parameter of animate().
Tile(obj, cols, rows, spacingH, spacingV, width, height, squeezeH, squeezeV, colSize, rowSize, align, valign, count, mirrorH, mirrorV, snapToPixel, clone) Docs

Emitter

Particles can be beautiful! The ZIM Emitter class Lets you emit particles and again, with ZIM Pick, these can be randomized or sequenced. Emitter also provides a sink system to attract or repel particles. Any object can be emitted or a Shape object can be used to draw lines in a shape. There are many options some of which are explored on the Particles page.
Emitter(obj, width, height, interval, num, life, fade, shrink, decayTime, decayStart, trace, traceFadeTime, traceShiftX, traceShiftY, angle, force, gravity, wind, layers, animation, random, horizontal, vertical, sink, sinkForce, cache, events, startPaused, pool, poolMin, particles) Docs

Noise

The ZIM Noise class makes working with noise easier - ZIM uses OpenSimplex noise. Noise has 1D, 2D, 3D, 4D equations that can be stepped through in small increments to make beautiful patterns that can be animated in different ways. For example, the smoothStep function helps define blobs with 2D noise and mountain terrains can be created and saved with 3D noise.

Sound

The ZIM SoundWave class lets you animate to sound frequencies! You loop through the frequencies constantly in a Ticker and change any object property such as scale, x, y, rotation, color, etc. This is great for projections on bands or at dances - Samples

Industry

Generative art was huge in Flash and really caught on with Processing - a simplified Java environment - but generative art can be done with any computer language that has a visual display and dynamic drawing capabilities. So... for the most part, whatever can be done in Processing, can be done in ZIM as it is a matter of porting equations. ZIM has had a dozen Picked Pens on CodePen receiving thousands of likes in its first year from front end developers. Inventor Dan Zen received the 2018 Hamilton Arts Awards for Media Arts for projection works in ZIM.

Education

The ZIM Learn section has all you need to know to learn about coding with ZIM. There is a ZIM Badges specifically for ART that shows four different projects including tiling, noise and blobs. The Eighth Lesson of ZIM Skool is about Controls and looks at many techniques used for art.

MORE
Here are examples of Generative Art
open links in new tab

Vases and Lamps made with GEN-PEN
Vases and Lamps made with GEN-PEN

Space Ship made with GEN-PEN
Space Ship made with GEN-PEN

Robots made with GEN-PEN
Robots made with GEN-PEN

Noise on CodePen
Noise on CodePen

ZIM Noise Examples
ZIM Noise Examples

Jared Tarbell Generative Art Dedication
Generative Art dedication to Jared Tarbell

ZIM Particle Emitter on CodePen
ZIM Particle Emitter on CodePen

Domes SciFi Gen Art on CodePen
Domes - SciFi Parallax Art - on CodePen

Kaleidoscope - early ZIM
Kaleidoscope - early ZIM

Op Art Example on CodePen
Op Art example on CodePen

Opartica Controls - op art making tool!
Opartica Controls - op art making tool!

Opartical Spiral
Opartical Spiral

Opartica on Flickr
Opartica on Flickr