How O is made

Every piece is built in the browser, drawn to a canvas in five visible layers whose appearance change at random each time it's drawn. There is no static image to speak of: the piece is the code, run once, at the moment it is loaded. Nothing is pre-determined and nothing is saved. What the viewer sees is drawn once, and won't be drawn quite the same way again.

Each piece is driven by the numbers associated with vinyl records. It starts from one thing: an album I love. Its four or five most distinctive sleeve colours define the entire palette for that piece.

1. A field of circles

First, a handful of large, soft circles are planted at fixed points around the edge of the canvas; either the corners, or the midpoints of each side. Each point gets one of two or three colours from the palette, and they're composited with a blend mode chosen at random from a small set, which creates different underlying shapes where the circles intersect and overlap.

This combination of a fixed structure with a random blend mode gives every piece the same underlying skeleton while still looking meaningfully different from its neighbours.

2. Concentric rings

The next layer features rings which build outward from the centre. The number of rings is set to one of three record speeds: thirty-three, forty-five or seventy-eight. This small fixed vocabulary keeps every piece in the same family regardless of which album it's drawn from, though each ring isn't just an outline: it's a filled disc, drawn at very low opacity, with the next one slightly larger drawn on top of it, and the next larger again.

Because every fill covers everything inside its own radius, the middle of the canvas ends up sitting under dozens of overlapping translucent layers, while the outer edge only ever gets one, creating a sense of depth.

3. Arcs and wedges

Five passes of arcs are then stacked over the rings, and each pass actually draws two separate things at the same angle span: a thick coloured band, stroked with no fill, and a translucent pie wedge, filled with no stroke. The result is both a hard-edged ring segment and a soft flooded slice occupying the same space, with greater intensity where the two overlap. The start and end angles are picked, again at random, from eight fixed positions, so the arcs always meet at the same handful of angles piece to piece, even though which ones get used, and in what order, is different every time. The radius grows and the colour drifts a little with each of the five passes, and the whole layer runs in its own random blend mode so it can add, cancel or completely overturn the colours sitting underneath it.

This is the layer most responsible for colours appearing that cannot be found anywhere in the original album sleeve.

4. Grain

Two passes of fine grain settle over everything. The first pass scatters roughly two million near-invisible dots across the piece; the second lays about twenty-seven thousand larger ones over the top. Individually each dot barely registers. Most are only a fraction of a pixel across at full resolution, but in the quantity generated they break up every flat gradient and edge into something closer to ink pressed into rag paper than pixels lit on glass.

It's the one layer whose logic never changes. The number of dots is identical every time. The only thing that varies is where each one happens to fall.

5. Frame

The very last thing drawn is a triple-lined frame just inside the edge of the canvas, in plain black or white chosen at random, sitting in its own blend mode like every other layer.

This finishing touch gives every version of every piece the same quiet, printed-edge finish and helps bring the collection together as a coherent whole.

Putting it together

None of these layers exists in isolation in the finished piece, though sometimes they may be invisible. Each is drawn on top of the last in the order above, each one reacting to whatever blend mode and colours the layers below it landed on. Toggle each one on and off below to see what it's actually contributing, and regenerate to see a new combination of palette, blend modes and layout land all at once.