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

Eventually each pattern will expose a number of customizable parameters, and users could write their own themes and use this rudimentary engine for their own artistic creations!

I’m embedding the CodeSandbox project below as well so you can check out some code.

If you haven’t used CodeSandbox before I’d highly recommend it. It’s an online IDE / notebook / …micro-deployment service?) that I used for the first time in prototyping this app. Using CSB significantly reduced the amount of time I spent switching between my code and the browser to verify things, and it comes with the bonus of having 0-setup static hosting for your project built in!

The Breakdown

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

The machine currently has two configurable options beyond the height and width of the canvas - theme and template. Themes control the color scheme of the artwork, and templates control basically everything else - they represent the different algorithms that can be applied within this machine’s framework to produce a “work” of art. I use scare quotes around “work” because each algorithm is stochastic - every run of the machine will produce a different arrangement of shapes and colors, so each algorithm is more like a family of related “works” than anything else.

The Technical Stuff

So how does it all work? If you tinker with the machine for a minute, you’ll probably notice that you’re seeing a lot rectangles of all sizes and variations. The whole machine is conceptually based on a grid system, such that 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. Currently, these options include borderCross (which allows you to specify how and when to overrun the boundaries of the cell) and gridLoopTransform / drawLoopTransform which allow you to apply a matrix transform after each each grid cell render or after each pass through the whole grid respectively.

This grid + transformation options setup explains the “warped” or “planar” appearance of some of the templates. But many of these templates are a little more wild-looking. How would those be accomplished?

The basic building block of each grid cell is in fact a rectangle, but it’s more than the built-in rect() that p5.js offers. I wrote my own shape drawing method that leverages p5’s polygon() shape to create what I call a “wonky” rectangle.

In order to understand the wonky rectangle, it would help to first understand a wonky line.

Above are several wonky lines. I won’t do too much explaining since the code is right here, but 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! As you can see, increasing the “wonk” factor creates larger diversions from the original path of the line. This wonkiness, as well as the number of new line segments to create, is configurable by each template.

The wonky rectangle takes this principle and applies it at a larger scale - 4x larger, in fact. Each of the sides of the rectangle is actually a wonky line - the polygon method allows you to define each point in each line as a vertex, which when combined creates a p5.js object that you can apply fill or stroke to as you might a normal shape.

In combination, these tools mean you can get a rather enormous variation of shapes out of this little machine. Since this is inherently a visual post, I’ll close with a few more examples, but I urge you to check out the machine yourself and see what you can come up with!