GEN ART - Generative Art with ZIM JavaScript Canvas Framework - zimjs.com

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:

Numbers
Arrays
Object Literals
Containers
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:

It can run a specified number of times
It can run at specified or random times within ranges
It can start right away (or not)
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:

Fills and Strokes
Lines and Curves
Rectangles and Circles
PolyStars and Ellipses
Linear and Radial Gradients
Paths from Adobe Animate

This is how dynamic drawing is handled on Raw Canvas - but ZIM adds a bunch of conveniences listed below.

Generator

A Generator class was introduced in ZIM Cat. This handles relative shape drawing like Processing and P5js. See the Demo Page. ZIM's dynamic parameters makes generative art fun and easy! Also see the Bubbling Video and the Explore Video.

Generator(color, strokeColor, strokeWidth, draw, stamp, setup, maxCount, boundary, drawCount, drawPause, drawSpacebarPause, startX, startY, cache, recordLinePoints, style, group, inherit) Docs

Shaders

ZIM 016 introduced Shaders which have their own language GLSL with OpenGL for the WebGL GPU. Wow! Shaders are the pinnacle of coding with color! Shaders have two parts, Vertex (points) and Fragment (pixels) - we tend to use the Fragment code in 2D to change colors.

Shader(width, height, fragment, uniforms, vertex, dynamic, preCall, postCall, rate, version, canvas, vertexPosition, strip, log, style, group, inherit) Docs

Many of the examples come from ShaderToy where you can see all sorts of wonders and bring the code into ZIM - please attribute the creators!

NFTs

See the ZIM NFT info page about making interactive and generative art NFTs. ZIM itself is an NFT and we would be happy to give you a starting amount of Tezos to collect or mint. We have also added a few functions to help along with a video series Making Interactive NFTs.

Docs rarity(weights, shuffle, zimColors, dynamicPayload)
Docs seedRandom(seed)
Docs odds(percent)
Docs pluck(array, remove)
Docs repeats(array, total)
Docs makeSyllable(length, firstVowel)
Docs makePrimitive(obj)

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:

The Blob and Squiggle classes have Bezier points with handles and are extremely versatile - see the ZIM NIO site:

Users can change the paths - like in Illustrator
Their points can be animated
Objects can be animated along their paths
Text can be placed along their paths
Objects can be dragged along their paths
Paths can be recorded
User-changed paths can be automatically saved
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.

Dr Abstract has sold out numerous NFT projects on Teia and (fx)Hash and provides templates and tutorials.

Education

The ZIM Learn section has all you need to know to learn about coding with ZIM. There is a ZIM Certificates 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.