Electric Dreams

Dialogues with the Machine

Welcome to the workshop! Together, we'll explore some classic pieces of generative design, recreate them in code with p5.js (Processing), and even plot them in the end with a pen plotter. All the content we'll cover is below. So if you are more comfortable, feel free to jump in and explore it at your own pace, otherwise, follow along and we'll walk through it during the workshop.

Here's the plan: First, we'll do a quick introduction to basics of coding visuals with JavaScript and p5.js. Then we'll hand-pick a few examples of generative art and recreate them. With some SVGs saved from our sketches, we'll take them to a pen plotter for drawing.

Broadly, all the sketches we'll cover today can be grouped into three patterns or lenses for viewing randomness – as an offset, as chance, and as choice. If you are working ahead, use the table of contents to jump to these sections.

Language reference & template

Use the page linked below as a short guide to basics of drawing shapes with p5.js. It might be handy to keep this reference open while we work through the examples.

Interactive guide to p5.js

For making the sketches, you can start by cloning the template below. We have a little bit of setup already done to save sketches to SVG. Click the sketch on the right at any time to save it as an SVG. Also, remember to login in to save your changes!

Template with p5.js + p5-svg.js

Randomness as offsets

One common pattern for using randomness in a generative sketch is to apply it as an offset on parameters of a shape, such as its position or dimensions. By controlling where these offsets are applied or by layering multiple offsets we can create quite complex patterns.

In p5.js, you can call the random function with a minimum and maximum bounds, like so: random(-min, max). This returns a random value between those two values (excluding the ends).

Vera Molnár – Untitled (Squares), 1974

In this piece, Molnár draws a series of cascading squares centered on the canvas and then offests their centers randomly. Play with the value of maxOffset on the sketch to get a sense of how the offsets affects the drawing.

We'll start by first recreating this piece in p5.js using a for loop to draw the cascading squares and then add an offset with the random function within bounds. Once done, we'll jump off and explore variations of this basic pattern with different types of shapes and offsets.

Start by opening the sketch below in the p5.js editor. Remember to login to save your work. A walkthrough of the code is discussed below.

Open sketch in p5.js editor 
maxOffset = 
// Max value to offset rectangles by.
var maxOffset = 30

function setup() {
  createCanvas(400, 400)
  rectMode(CENTER)
  noLoop()
}

function draw() {
  background(255)

  for (var size = 10; size < 300; size += 10) {
    var offsetX = random(-maxOffset, maxOffset)
    var offsetY = random(-maxOffset, maxOffset)

    noFill()
    rect(width/2 + offsetX, height/2 + offsetY, size, size)
  }
}
  1. We start by setting up a 400 x 400px canvas inside the setup function. We make drawing rectangles easier for ourselves by setting rectMode to CENTER which moves the anchor point for drawing squares from the default top-left to the center. Finally, because we want a static drawing, we call noLoop() to stop the draw function from being called repeatedly.
  2. Inside the draw function, we use a for loop to draw squares of increasingly larger sizes, starting with 10, upto (but less than) 300, and increasing in units of 10.
  3. At the beginning of the sketch, we've created a variable called maxOffset to control the extent of the random offset we'll apply to center of the square.
  4. Back again inside the for loop, we calculate x and y offsets using the random function, passing it -maxOffset as the minimum and +maxOffset as the maximum.
  5. At last, we draw the square of side length size using the rectangle function, setting the center as the center of the canvas (width/2, height/2) but offset by offsetX and offsetY.

The same basic pattern can be applied in different forms to generate interesting visual variations. Here's a few ideas for you to try out:

Set equal offsets on the center x and y coordinates of the rectangle.
Instead of offsetting the center, try offsetting the rectangle's width and height.
Use other shapes such as circles.

Georg Nees – Cubic Disarray, 1968

Offsets don't necessarily need to do simple translations on a shape. You can also you use rotation or scaling. In this piece by Georg Nees, a grid of cells is systematically translated and rotated by random offset as you go vertically down the grid, creating a sense of controlled disorder.

In p5.js, you can shift the origin of the coordinate system by using the translate function and rotate it by using the rotate before drawing. Remember to place any transforms inside push and pop to isolate it from the rest of the drawing.

Open sketch in p5.js editor 
maxRotate = , maxTranslate = 
// Padding around the canvas.
var padding = 20

// Size of grid cells (cellSize x cellSize).
var cellSize = 40

// Max amount to rotate cells by (degrees).
var maxRotate = 30

// Max amount to translate cells by.
var maxTranslate = 15

function setup() {
  createCanvas(400, 400)
  rectMode(CENTER)
  angleMode(DEGREES)
  noLoop()
}

function draw() {
  background(255)

  for (var y = padding; y < height - 2 * padding; y += cellSize) {
    for (var x = padding; x < width - 2 * padding; x += cellSize) {
      drawCell(x + cellSize / 2, y + cellSize / 2)
    }
  }
}

function drawCell(x, y) {
  push()
  translate(x, y)

  var translateBy = random(-maxTranslate, maxTranslate) * y / height
  var rotateBy = random(-maxRotate, maxRotate) * y / height
  translate(translateBy, 0)
  rotate(rotateBy)

  rect(0, 0, cellSize, cellSize)

  pop()
}
  1. At the top of the sketch, we create a few constants to control parameters in the drawing:
    • padding is the whitespace around the canvas
    • cellSize is the size of the grid cells
    • maxTranslate and maxRotate determine the maximum value of the translation and rotation offsets
  2. Inside the setup, we take the usual setup steps: create a 400 x 400 canvas, with rectMode(CENTER) and angleMode(DEGREES) set as default, and a noLoop() to stop draw loop from running on each frame.
  3. Inside the draw function, we use a double for loop to draw across and down the grid of cells. The first loop sets the y coordinate and the second loop sets the x coordinate. We take care of the padding around the canvas by drawing within [padding, width - 2 * padding] on the x and [padding, height - 2 * padding] on the y axis. Each iteration of the loops increase the value of x and y by cellSize.
  4. Inside the double for loop, we hand off drawing of the cell to the drawCell function, passing it the center of the cell ( x + cellSize/2, y + cellSize/2).
  5. The drawCell function first wraps the code in a push() and pop() to isolate the transform. Then we translate to coordinates to the center of the cell (passed as the params x and y).
  6. Next, we calculate the translation and rotation offsets using our constants maxTranslate and maxRotate. Notice the multiplication by y / height at the end which ensures the transforms increase as we go down the y axis. With the offsets calculated, we translate and rotate the coordinates by those amounts.
  7. At last, we draw our rectangle with side length of cellSize and the center of the grid as its center coordinates.

Here's a couple of starting points for variations you can explore.

Increase the translation and rotation offsets along the x axis.
Or outwards from the center.
Use scale as another transform.

Randomness as chance

The next pattern we'll see in generative sketches is to use randomness as a kind of probability or chance — much like flipping a coin to decide. Instead of deterministically drawing a shape every time, you can knock off a piece some arbitrary percentage of time depending on these proverbial coin flips.

Translating to p5.js, the best way to use this pattern is to call the random function without any parameters. The default behaviour is to return a value between 0 and 1. When used inside an if condition like random() < 0.5, you can effectively draw something 50% or half of the time.

Vera Molnár – Des Ordres (Grid), 1974

Similar to her previous piece we looked at, Molnár starts by drawing a set of cascading squares. But instead of adding random offsets, she knocks off a square (does not draw it) some percent of time. The effect is more pronounced by repeating the squares on a grid.

To recreate the piece, we'll use a double for loop to draw a grid of cells on the canvas. Inside each cell, we draw the set of squares, wrapping each rectangle drawing command in a condition like random() < chance which decides whether or not to draw a square.

Open sketch in p5.js editor 
chance = 
// Padding around the canvas.
var padding = 20

// Size of grid cells (cellSize x cellSize).
var cellSize = 40

// Probabiity of drawing an inner rectangle.
var chance = 0.8

function setup() {
  createCanvas(400, 400)
  rectMode(CENTER)
  noLoop()
}

function draw() {
  background(255)
  
  for (var y = padding; y < height - 2 * padding; y += cellSize) {
    for (var x = padding; x < width - 2 * padding; x += cellSize) {
      drawCell(x + cellSize/2, y + cellSize/2)
    }
  }
}

function drawCell(x, y) {
  push()
  translate(x, y)
  for (var size = 5; size <= cellSize; size += 5) {
    if (random() < chance) {
      noFill()
      rect(0, 0, size, size)  
    }
  }
  pop()
}
  1. We've got some constants at the top like padding around the canvas and cellSize for the size of the grid cells. We also set chance, a value between 0 & 1 which controls the probability of drawing an inner square.
  2. Inside the setup function, we draw a 400 x 400px canvas, set the rectangle drawing mode to CENTER, and set noLoop() to run the draw loop only once.
  3. At the beginning of the sketch, we've got a double for loop to draw a grid of cells. The loop takes care of ensuring we keep the padding around the canvas.
  4. Inside the for loops, we hand of drawing of the cells to drawCell passing it the center coordinates of the cell.
  5. The drawCell function first wraps the code in a push and pop to isolate the transforms. Next, we translate the coordinates to the center of the cell.
  6. We use another for loop to draw the series of squares, starting from a size of 5, upto and including cellSize, incrementing by 5px each time.
  7. Now for the magic, instead of drawing the squares directly, we have an if statement with the condition random() < change wrapping the call to rect. Interpret it as draw a particular inner square 80% of the time, if chance is set to 0.8.

Sol LeWitt – Cubes

We don't have to limit ourselves to simple rectangles and circles. The same idea applies to complex shapes made of multiple parts. In this piece, Sol LeWitt imagines a grid of cubes with an side removed at random.

The p5.js recreation is a bit more involved but fundamentally utilises the same idea. Instead of using random() < chance as a condition, we break the shape into a list of lines and pick a random line from the list to exclude from the drawing.

Open sketch in p5.js editor 
// Padding around the canvas.
var padding = 20

// Size of grid cells (cellSize x cellSize).
var cellSize = 40

function setup() {
  createCanvas(400, 400)
  angleMode(DEGREES)
  noLoop()
}

function draw() {
  background(255)

  for (var y = padding; y < height - 2 * padding; y += cellSize) {
    for (var x = padding; x < width - 2 * padding; x += cellSize) {
      drawCell(x + cellSize/2, y + cellSize/2, 16)
    }
  }
}

function drawCell(x, y, r) {
  push()
  translate(x, y)
  
  var lines = [
    [0, 0, r * cos(30), r * sin(30)], [0, 0, r * cos(90), r * sin(90)], [0, 0, r * cos(150), r * sin(150)], [0, 0, r * cos(210), r * sin(210)], [0, 0, r * cos(270), r * sin(270)], [0, 0, r * cos(330), r * sin(330)],
    [r * cos(30), r * sin(30), r * cos(90), r * sin(90)], [r * cos(90), r * sin(90), r * cos(150), r * sin(150)], [r * cos(150), r * sin(150), r * cos(210), r * sin(210)], [r * cos(210), r * sin(210), r * cos(270), r * sin(270)], [r * cos(270), r * sin(270), r * cos(330), r * sin(330)], [r * cos(330), r * sin(330), r * cos(30), r * sin(30)] 
  ]
  
  var randomIndex = floor(random(0, lines.length))
  for (var i = 0; i < lines.length; i++) {
    if (i != randomIndex) {
      line(...lines[i])
    }
  }
  
  pop()
}
  1. We define the usual padding around the canvas and the size of the cells as cellSize.
  2. Inside the setup function, we draw a 400 x 400px canvas, set the angle mode to DEGREES, and set noLoop() to run the draw loop only once. Setting angles to degrees will come in handy when we define the lines later. Feel free to use the default radians if you find that easier to work with.
  3. In the draw function, we have the same structure as the Georg Nees sketch. A double for loop to draw a grid of cell, with x and y coordinates determined by padding, the canvas dimensions, and cellSize. The actual drawing inside the cell is handled off to a drawCell function which get the coordinates of the cell center and the radius of the cube.
  4. The drawCell function first wraps the code in a push and pop to isolate the transforms. Next, we translate the coordinates to the center of the cell.
  5. With the coordinates set to the centre of the grid, we make our list of lines that compose the cube. This includes 6 spokes that start from the center (0, 0) to the corners of the cube and 6 sides that connect adjacent corners. For each line we define the starting point (x1, y1) and the ending point (x2, y2). Notice that angles here are in degrees, increase in units of 30, and go clockwise. The coordinates of a point on a circle of radius r at an angle θ is r * cos(θ) and r * sin(θ).
  6. Next, we pick a random index by using the floor(random(0, lines.length)) with returns are whole number between 0 and 11. We run through the lines one by one in a for loop and draw them by passing the coordinates to the line function with a spread operator. If the line index matches our randomly choosen index, we don't draw the line.

Randomness as choice

The final pattern we'll look at treats randomness as a choice between drawing different shapes. In p5.js, you can translate this either as an if-else statement that uses random() < chance pattern. Each branch draws a different shape depending on the value of chance. We'll see in this in the 10PRNT example. Otherwise, you can also pass an array of functions like random([drawA, drawB, ...]) to random to pick a shape to draw. We'll see this in following tiling Waves example.

10PRNT();

This classic artwork divides the canvas into a grid of squares and within each draw either forward or backward slash randomly alternating between the two. The end result is a maze-like generative piece.

To recreate this work, we use the simplest implemenation of randomness as choice: an if-else statement where one branch draws a forward slash and another a backward slash. We bias the drawing towards prefering one shape over another based on the value of bias.

Open sketch in p5.js editor 
bias = 
// Size of grid cells (cellSize x cellSize).
var cellSize = 40

// Bias towards one shape over another.
var bias = 0.5

function setup() {
  createCanvas(400, 400)
  noLoop()
}

function draw() {
  background(255)
  
  for (var y = 0; y < height; y += cellSize) {
    for (var x = 0; x < width; x += cellSize) {
      if (random() < bias) {
        line(x, y, x + cellSize, y + cellSize)
      } else {
        line(x, y + cellSize, x + cellSize, y)
      }
    }
  }
}
  1. We define the the size of the grid cells as cellSize, and bias which should be a value between 0 and 1.
  2. Inside the setup function, we draw a 400 x 400px canvas and set noLoop() to run the draw loop only once.
  3. In the draw function, we a double for loop to draw a grid of cell, with x and y coordinates determined by the canvas dimensions, and cellSize.
  4. For each grid cell, we draw either a line going from the top-left (x, y) to bottom-right (x + cellSize, y + cellSize) corner or from the bottom-left (x, y + cellSize) to top-right (x + cellSize, y) corner. The choice between the two lines is determined by the condition random() < bias. Higher the bias (closer to 1) more we prefer the line from bottom-left to top-right.

C S Smith – Tiling (Waves)

This work with its tiling wave pattern is the most of complex of what we'll look at in this workshop. Instead of the squares and lines we've seen so far it uses arcs to create a sense of continuous lines.

To implement this form, we'll create separate functions for each unique grid cell in the tiling and use the random function to pick between them. We'll also take advantage of the arc function in p5.js to draw open arcs given their center point, start and end angles.

Open sketch in p5.js editor 
// Padding around the canvas.
var padding = 20

// Size of grid cells (cellSize x cellSize).
var cellSize = 40

function setup() {
  createCanvas(400, 400)
  angleMode(DEGREES)
  noLoop()
}

function draw() {
  background(255)
  
  for (var y = padding; y < height - 2 * padding; y += cellSize) {
    for (var x = padding; x < width - 2 * padding; x += cellSize) {
      var selectedCell = random([drawCellA, drawCellB])
      selectedCell(x, y)
    }
  }
}

function drawCellA(x, y) {
  push()
  translate(x, y)
  arc(0, 0, cellSize, cellSize, 0, 90)
  arc(cellSize, cellSize, cellSize, cellSize, 180, 270)
  pop()
}

function drawCellB(x, y) {
  push()
  translate(x, y)
  arc(0, cellSize, cellSize, cellSize, 270, 360)
  arc(cellSize, 0, cellSize, cellSize, 90, 180)
  pop()
}
  1. We define the the size of the grid cells as cellSize, and padding around the canvas.
  2. Inside the setup function, we draw a 400 x 400px canvas, configure angleMode to DEGREES, and set noLoop() to run the draw loop only once.
  3. In the draw function, we use a double for loop to draw a grid of cell, with x and y coordinates determined by the canvas dimensions and padding, and the cellSize.
  4. Now for the part that's different: later on we'll define two functions for drawing unique cells in the tiling - drawCellA and drawCellB. Here use pass both functions as an array to random, which picks one of the functions are returns it. In the next line, we call the selected function passing it the top-left coordinates of the cell.
  5. The first draw function - drawCellA - wraps the code in push and pop to isolate the transform and moves the coordinates to the top-left corner of the cell. It then draw two arcs of width and height matching the size of the cell. The first arc is centered on the top-left corner, starts at 0 degrees and ends at 90 degrees. The second arc is centered on the bottom-right corner, starts at 180 degrees and ends at 270 degrees.
  6. The second draw function - drawCellB - is similar. It calls push and pop to isolate the transform and moves the coordinates to the top-left corner of the cell. Next, it draws two arcs of width and height matching the size of the cell. The first arc is centered on the bottom-left corner, starts at 270 degrees and ends at 360 degrees. The second arc is centered on the top-right corner, starts at 90 degrees and ends at 180 degrees.