Drawing With Numbers

Generative art from Daniel Eden

This site serves as a gallery for my favorite select pieces of generative art. These pieces have been generated using Processing, p5.js, or OpenFrameworks and are each accompanied by a description of the underlying logic that generated the results.

For more information about my foray into generative art, you can read a blog post I published.

Along a bezier curve defined by four random points on a canvas, draw a series of points in semitransparent white. In the next frame, move each of the four points by a random vector. If a point reaches the edge of the canvas, reverse its direction and invert the point color.

Given an origin and a parallel destination, draw 1000 points of varying transparency between them. Using Perlin noise, calculate a delta vector for both origin and destination, with x coordinates between -0.2 and +0.5, and y coordinates between -1 and +2. Add the delta vectors to the origin and destination. Repeat until either the origin or destination points are at least 80px from the bottom of the canvas.

Pack as many circles as possible within another circle, ensuring they don't overlap. Draw a line through the middle of each of the sub-circles at a random angle.

Plot two kinds of objects around the canvas; attractors and particles. Particles are attracted to attractors, and their path/history is shown in white. Attractors are invisible. Within a certain radius, attractors reject particles with a force. Plot thousands of each type of object. Observe through the particle history how all particles are attracted to the center of the canvas; the center of mass, if you will.

Pick a random origin and destination vector, and a random delta vector. Draw a series of points between the origin and destination. On the next frame, there is a 30% chance the delta will be added to the origin, a 30% chance the delta will be added to the destination, and a 40% chance the delta will be added to both. The probability of the outcome is determined by Perlin noise. When either the origin or the destination is within 50px of the canvas edge, pick a new origin, destination, and delta.

Plot a series of connected points around the center of the canvas, using three-dimensional Perlin noise to vary the radius. Repeat this with an increasing base radius, stepping forward through the Perlin noise function to slightly vary the next shape.

Vector
In the context of these works, a vector refers to a point in two-dimensional space. These vectors are made up of X and Y values, and determine position or a change in position. More on Wikipedia
Perlin Noise
Perlin noise is an algorithm that generates pseudo-random values in sequence. This means that by stepping through a perlin noise function, you can generate values that are somewhat related to one another. More on Wikipedia
Processing
Processing is “a flexible software sketchbook and a language for learning how to code within the context of the visual arts.” In broader terms, it is a Java library with a bent on visual output, and is typically the method I use for creating generative art. It has an easy learning curve for anyone with knowledge of JavaScript. (Take it from me.) More on Processing.org
p5.js
p5.js is a JavaScript library loosely based on Processing. It was my first introduction to Processing and generative art in general. More at p5js.org
OpenFrameworks
OpenFrameworks is a “creative coding toolkit”, similar to Processing, but written in C++. I use it for more computationally taxing pieces. More at OpenFrameworks