bill.dev

Art in The Age of Computers

Published

My wife and I recently visited the V&A and stumbled across Chance and Control: Art in the age of computers, a small display celebrating 50 years of computer generated art. Tucked away in the corner of the second room was Schotter, a piece by Georg Nees.

“Nees was fascinated by the relationship between order and disorder in picture composition. To create this work, he introduced random variables into the computer program, causing orderly squares to descend into a heap.”

A photo of an artwork that is algorithmically generated. The artwork in portrait view is a grid of adjacent squares covering the paper. The top row of squares is perfectly aligned but as you move down the page, each square is offset and rotated by an increasing amount. By the time you reach the bottom row there is no alignment at all.
Schotter, Georg Nees

I was toying with the idea of recreating the image when I came across the Go Graphics package by Michael Fogleman (GitHub, GoDoc), a beautifully simple way to get started with drawing graphics in Go. The basics involve creating a context, drawing various shapes, stroking (or filling) them and then rendering the result as a PNG image.

package main

import "github.com/fogleman/gg"

func main() {
    ctx := gg.NewContext(640, 640)
    ctx.DrawRectangle(270, 270, 100, 100)
    ctx.SetRGBA(0, 0, 0, 1)
    ctx.Stroke()
    ctx.SavePNG("out.png")
}
A single square on a white background. The square is unfilled with a black outline.

This code snippet creates a 640 by 640 image and draws a square of 100 by 100px in the centre. To generate the image, I needed a few loops, some randomness, and the ability to offset each square from its regular position. The algorithm seemed fairly straightforward:

  • Use a for loop to iterate over the columns
  • Use a for loop to iterate over the rows
  • Offset each square from its midpoint based on a function of the current row
  • Rotate each square based on a function of the current row
An algorithmically generated artwork made up of a grid of adjacent squares extending down the image. The squares have a black outline on a white background. The top row of squares is perfectly aligned but as you move down the page, each square is offset by an increasing amount.
An algorithmically generated artwork made up of a grid of adjacent squares extending down the image. The squares have a black outline on a white background. The top row of squares is perfectly aligned but as you move down the page, each square is offset and rotated by an increasing amount. The rotation of these squares is significantly greater than the original image in this post.

Tweaking the dimensions and weighting the offset and rotation gives us something remarkably similar to Georg’s original.

An algorithmically generated artwork made up of a grid of adjacent squares extending down the image. The squares have a black outline on a white background. The top row of squares is perfectly aligned but as you move down the page, each square is offset and rotated by an increasing amount. The rotation of these squares has now been reduced resulting in an image very similar to that at the start of the post.

With the ability to produce images I quickly found myself spending hours tweaking parameters, padding, colours, etc. I settled on using an exponentially increasing random offset to generate the images below.

An algorithmically generated artwork made up of a grid of adjacent squares extending down the image. The squares start of turquoise but fade through pink to red as they move down the image. The background is translucent and so overlapping squares result in a stronger colour. The top row of squares is perfectly aligned but as you move down the page, each square is offset and rotated by an increasing amount.
An algorithmically generated artwork made up of a grid of adjacent squares extending down the image. The squares start of turquoise but fade through to blue as they move down the image. The background is translucent and so overlapping squares result in a stronger colour. The top row of squares is perfectly aligned but as you move down the page, each square is offset and rotated by an increasing amount.
An algorithmically generated artwork made up of a grid of adjacent squares extending down the image. The squares start of red but fade through to yellow as they move down the image. The background is translucent and so overlapping squares result in a stronger colour. The top row of squares is perfectly aligned but as you move down the page, each square is offset and rotated by an increasing amount.

I’d love to try plotting some of these on paper (using a real plotter of course) but for now I’ll have to settle for generating wallpapers instead. A zip folder containing a collection of phone wallpapers is available for download below. Full access to the source code is available here: github.com/billglover/aitaoc

Download: iPhone, iPad