Generative Art Machine

I built an app that produces generative art, with several presets for color and algorithm.

Inspired by some of the incredible generative artwork I’ve seen come out of the Processing family of languages, I spent Valentine’s day hacking together a little foray of my own into the world of algorithmic visual art.

How It Works

The machine has two configurable options beyond the height and width of the canvas - theme and template.

Themes control the color scheme of the artwork.

Templates control the algorithm - they represent different approaches that can be applied within this machine’s framework to produce a “work” of art. Each algorithm is stochastic - every run produces a different arrangement of shapes and colors, so each algorithm is more like a family of related works than a single piece.

The Technical Stuff

The whole machine is conceptually based on a grid system. Each template defines a number of rows and columns. On each pass through the grid, a rectangle of configurably random size is rendered into each cell, with several config options applied.

The basic building block of each grid cell is a “wonky” rectangle - my custom shape drawing method that leverages P5’s polygon() to create organic, hand-drawn aesthetics.

Wonky Lines

The gist is that you take the two defining points of a line (A, Z) and interpolate a number of points along that line (B, C, D, etc.). Apply a little randomness to the offset of each of those points, connect them together, and you have a wonky line. Increasing the “wonk” factor creates larger diversions from the original path.

Wonky Rectangles

The wonky rectangle takes this principle and applies it at a larger scale - 4x larger. Each of the sides of the rectangle is actually a wonky line, which when combined creates a P5.js object that you can apply fill or stroke to as you might a normal shape.