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
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
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
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)
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.
Use ZIM Generator make art like P5js and Processing
