LIVE cartercole.net --:--:-- UTC

// THE BACKDROP

BACKGROUNDS

Behind every page here, something is running: 27 scenes take turns, a new one every minute, and 50 design eras (on /eras) can re-skin the whole site. This page explains every background, gives the cellular automata a key to their colours, and lets you keep the one you like.

> A tour of the backgrounds, filmed from this page1:15

Play

Any scene can be handed over to you; these are the ones worth it. Pick one; Esc or ✕ gives the page back, and ◀ ▶ flip between them. Best scores stay in this browser. Things with homes of their own are at /asobi.

Machines

Toys

The cellular automata are ported from golife, my CUDA experiments with Life on Archimedean tilings; the rules there are generalised so one rule means something on triangles and dodecagons alike. On a phone, holding the background's name in the top bar of any page starts the one that's showing.

Your choices

NOW SHOWING —

On AUTO the era picks: some eras bring a background of their own, some a few that suit them, and the rest let all of them rotate. Pick one yourself (tap the background's name in the top bar, the beside it, or SHOW on a scene below) and it stays, on every page and through every era, until you go back to AUTO. Hue and harmony work the same way: set them and they stay until AUTO in the era panel. HOLD STILL freezes the background on one frame, if the motion is the problem.

All of this is kept in this browser's local storage and never leaves it: see privacy. With your device set to reduce motion, the backgrounds are always still.

The scenes

SHOW puts a scene behind this page and keeps it. Untick IN ROTATION and it won't come up by itself any more. PLAY hands you the controls; Esc gives the page back.

Ambient

Quiet ones: they drift, and react to the cursor.

  • GLYPH RAIN

    IN THE ROTATION

    The site's original background: columns of glyphs falling like a terminal waterfall.

    TOUCH A mouse or a passing finger scrambles the glyphs around it and starts new drops in the columns it crosses.

    ERAS 1990 Deconstructivism · 1992 Grunge · 1994 Experimental Type · 2011 Glitch · 2023 Gothic · 2024 Surveillance

  • NODE MESH

    IN THE ROTATION

    Drifting nodes that wire themselves together whenever two come close enough.

    • Two nodes closer than a set reach are joined; the line fades as they part.

    TOUCH The cursor pulls nodes in and links itself to them. In play mode a tap drops a burst of new nodes; tilt drifts the lot.

    ERAS 1930 Modernism · 1955 Mid-Century Modern · 1965 Minimalism · 1980 Post-Modernism · 2013 Flat · 2019 Neumorphism · 2022 Cyberminimalism · 2024 Type Doodles

  • TOPOGRAPHY

    IN THE ROTATION

    Contour lines of a slowly drifting landscape, traced the way a map is.

    • Each line joins points of equal height (marching squares over a noise field); lines bunched close are steep ground.

    TOUCH Rest the cursor and a hill rises under it, following you and slumping when you leave.

    ERAS 1930 Modernism · 1965 Minimalism · 1972 70s Retro · 1980 Post-Modernism · 2009 Skeuomorphism · 2013 Flat · 2019 Neumorphism · 2022 Cyberminimalism · 2024 Type Doodles

  • LOW POLY

    IN THE ROTATION

    A triangle mesh whose corners breathe in and out of the screen, shaded like a lit surface.

    • A facet facing the lamp is bright, one turned away is dark.

    TOUCH The cursor is a lamp held just above it. In play mode every finger is a lamp and a tap sends a ripple across.

    ERAS 1930 Modernism · 1980 Post-Modernism · 1982 New Wave · 2002 Chromecore · 2013 Flat · 2019 Neumorphism

  • SYNTH HORIZON

    IN THE ROTATION

    A perspective grid racing out to a striped sun behind two ridges of mountains. Wireframe tanks, jeeps and mines roll in out of the haze, Vector Tanks style, and left alone the scene steers itself and shoots them.

    TOUCH The cursor steers and banks the camera; tilting a phone does the same, and leaning it forward or back is measured from how you first held it. In play mode Space (or a click, or a tap) fires the main gun, the arrow keys steer, and the tanks shoot back, so dodge; hold to boost. On a phone a second finger fires the gun, and a hard shake sets off a smart bomb that clears the grid (it takes a few seconds to recharge).

    ERAS 1983 Italo Disco · 1984 Synthwave · 2012 Vaporwave · 2018 Future Funk

  • STARFIELD // 1996

    IN THE ROTATION

    Flying through space, the way every 90s screen saver did.

    TOUCH The cursor, or tilt, moves the vanishing point; hold down to warp.

    ERAS 1996 Web 1.0

  • MYRTLE & ALICE

    IN THE ROTATION

    Myrtle, a Great Dane, and Alice, a pit bull mix: my two dogs as chibis from the chibi maker, drawn live by its own renderer on a floor that runs up the window. They wander, sniff, nap and now and then bow to each other and tear round in circles.

    TOUCH They turn to the cursor and come over to sit by it; rest it on one to pet her. A click on an empty stretch of page throws a ball and they race for it. Scroll and they look up, leave them alone for a minute and they fall asleep. In play mode a click on a dog is a trick, Space throws, C changes the drawing style and G what they wear; tilting a phone rolls the ball.

  • OFFICE ASSISTANTS

    IN THE ROTATION

    Office assistants, the late-90s kind, loose at the bottom of the page. The ten animated agents of pithings/clippy (Clippy, Merlin, Bonzi, F1, Genie, Genius, Links, Peedy, Rocky and Rover, whose frame lists and branching are played by a small player of ours) share the room with the chibis: me in a few outfits, doing the assistant poses, and Myrtle and Alice. They arrive, idle, wander and every so often one speaks in a yellow balloon. The characters are Microsoft's; the library that unpacks them is MIT.

    TOUCH They look at the cursor. A click on an empty stretch of page and the nearest one gestures at the spot; a click on one and it reacts. Scroll and they look busy. In play mode drag any of them anywhere, Space makes the room talk, N calls a new cast, A adds one (up to six), D sends the newest away and C changes the chibi drawing style.

Cellular automata

A board of cells and a rule each cell follows, every tick, looking only at its neighbours. Everything you see comes out of that rule.

HOW THE AUTOMATA WORK

  1. A board of tiles. Not just squares: these run on the Archimedean tilings, where regular polygons meet the same way at every corner. The name lists the shapes round one corner, so 4.8.8 is a square and two octagons, and 3.6.3.6 goes triangle, hexagon, triangle, hexagon.
  2. Every tile is a cell with a state: alive or dead, a colour, a phase in a cycle, or how much of a chemical it holds.
  3. Each tick, every cell looks at its neighbours (the tiles touching it; on some boards the ones touching only at a corner count half) and its rule decides its next state. All cells change at once.
  4. Rules are written as fractions of the neighbours rather than counts, so one rule means something on a triangle with 3 edge neighbours and a dodecagon with 12. Conway's “born on 3 of 8” is “born at 37.5%”.
  5. If the board goes quiet, fresh seeds are dropped in so it keeps moving.

THE SHAPES, WHEN THEIR COLOUR MEANS ALIVE

  • triangle
  • square
  • hexagon
  • octagon
  • dodecagon

  • CONWAY // B3/S23

    TILING 4.4.4.4IN THE ROTATION

    Conway's Game of Life, the original: every square is alive or dead, and each tick decides again.

    squares

    • A dead square with exactly 3 live neighbours (of 8) is born.
    • A live square with 2 or 3 live neighbours survives; with fewer it dies of loneliness, with more of crowding.
    • When the soup settles into still blocks and blinkers, fresh seeds are dropped in.
    • alive
    • dead

    TOUCH Drag to draw live cells (in play mode you have to press, and every finger draws at once). Every run has a seed shown on the bar: R rolls a new one, the arrows step to the next or previous, Enter starts this one over, C clears the board to draw from nothing, and the buttons do the same on a touch screen. Space drops seeds. Add #seed=N to a link to share a start.

    ERAS 1960 Brutalism · 1977 Punk · 1992 Grunge · 2018 Tech Spec · 2022 Cyberminimalism · 2024 Type Doodles

  • KAGOME SPACESHIPS

    TILING 3.6.3.6IN THE ROTATION

    Life on triangles and hexagons where a dying cell takes two ticks to fade, which is what lets spaceships fly.

    triangleshexagons

    • Neighbours touching an edge count fully, those touching only a corner count half.
    • Born when live neighbours make up 33–48% of the weight; survives at 27–47%.
    • Otherwise it doesn't vanish: it fades through two dying shades, which can't be reborn or count as alive.
    • alive triangle
    • alive hexagon
    • dying, two ticks
    • dead

    TOUCH Paint seeds and watch which ones crawl away.

    ERAS 2018 Tech Spec

  • HIGHWAY GLIDERS // 3.3.3.4.4

    TILING 3.3.3.4.4IN THE ROTATION

    Rows of squares between rows of triangles: gliders find the rows and run along them like traffic.

    trianglessquares

    • Only neighbours across an edge count.
    • Born at 19–29% live neighbours; survives at 14–42%; otherwise fades for two ticks.
    • alive triangle
    • alive square
    • dying
    • dead

    TOUCH Paint seeds.

    ERAS 1919 Constructivism · 2018 Tech Spec

  • CHROMA // SPECIES WARS

    TILING 4.6.12IN THE ROTATION

    Life with genetics: 48 hues are 48 species, newborns take their parents' colour, and neighbouring species fight over the board.

    squareshexagonsdodecagons

    • A dead cell with live neighbours making up about 16–17% of the weight is born, in the average hue of those neighbours, now and then one shade off (a mutation).
    • A live cell survives while 15–39% of its neighbours are kin (within a sixth of the colour wheel) and strangers stay under 28%.
    • one hue, one species
    • empty

    TOUCH Drag to paint a new species in.

    ERAS 2023 Maximalism

  • RGB FOOD CHAIN

    TILING 4.4.4.4IN THE ROTATION

    Three games of Life on one board, red, green and blue, each the next one's prey.

    squares

    • Each colour plays Life on its own: born at 49–58% of its own kind around, survives at 21–57%.
    • Green eats red, blue eats green, red eats blue: a colour can't be born where its predator sits, and dies once its predator fills 52% of the neighbours.
    • Where layers overlap the colours add, like light.
    • red
    • green
    • blue
    • red + green
    • red + blue
    • green + blue

    TOUCH Paint life in.

    ERAS 2019 Acid · 2023 Maximalism

  • FIREFLY SYNC // 4.6.12

    TILING 4.6.12IN THE ROTATION

    Every cell is a firefly with its own clock; flashing nudges its neighbours, and whole regions fall into one rhythm.

    squareshexagonsdodecagons

    • Each cell counts up and flashes when it wraps round. Bigger polygons have longer cycles.
    • A neighbour's flash pushes a cell's clock forward (once it has rested a few ticks), so flashes spread as waves and clocks sync up.
    • flash, on a square
    • flash, on a hexagon
    • flash, on a dodecagon
    • counting to the next one

    TOUCH Touch to make cells flash.

  • KURAMOTO SPIRALS

    TILING 4.6.12IN THE ROTATION

    Oscillators that pull each other into step. Patches agree on a colour; where patches meet, spirals wind up.

    squareshexagonsdodecagons

    • A cell's colour is where it is in its cycle. Bigger polygons turn more slowly.
    • Each tick every cell is pulled a little toward its neighbours' phase (the Kuramoto model).
    • One colour across a patch means in step; the whole wheel around a point is a spiral defect.
    • phase, round the wheel

    TOUCH Drag to pin a phase.

    ERAS 2023 Maximalism

  • CYCLIC TRIANGLES

    TILING 3.3.3.3.3.3IN THE ROTATION

    A 13-colour cyclic automaton on triangles: a colour can only be eaten by the one after it, so waves chase round forever.

    triangles

    • A cell takes the next colour in the cycle when at least 13.5% of its edge neighbours already have it.
    • The 13th colour wraps back to the 1st.
    • 13 colours, each eaten by the next

    TOUCH Scramble it and watch order come back.

    ERAS 1977 Punk · 1992 Grunge · 1994 Experimental Type

  • RPS SPIRALS // 3.4.6.4

    TILING 3.4.6.4IN THE ROTATION

    Rock, paper, scissors on a board of triangles, squares and hexagons. Three colours chase each other into spirals.

    trianglessquareshexagons

    • Red becomes green, green becomes blue, blue becomes red, when 33% of the neighbours (corners counting half) already beat it.
    • rock
    • paper
    • scissors

    TOUCH Scramble it.

    ERAS 1994 Experimental Type

  • TURING MAZE // 4.8.8

    TILING 4.8.8IN THE ROTATION

    Two chemicals reacting and spreading across octagons and squares, growing a maze: the pattern Alan Turing predicted for animal markings.

    squaresoctagons

    • Gray-Scott: chemical U is fed in everywhere; V eats U to make more V (U + 2V → 3V) and slowly decays.
    • U spreads twice as fast as V. With this feed and kill rate the stripes join up into a labyrinth.
    • little V → lots of V

    TOUCH Drag to seed.

    ERAS 1960 Brutalism · 2018 Tech Spec

  • TURING MITOSIS // 3.12.12

    TILING 3.12.12IN THE ROTATION

    The same two chemicals tuned to make spots that grow, pinch in the middle and split, like cells dividing.

    trianglesdodecagons

    • Gray-Scott again, with more feed and more kill: a spot that grows too big can't hold its middle and breaks in two.
    • little V → lots of V

    TOUCH Drag to seed.

    ERAS 1960 Brutalism

Simulations

Real models, run in your browser.

  • INK // FLUID

    IN THE ROTATION

    Neon ink in a real fluid solver (Stam's stable fluids), with swirls kept alive by vorticity confinement.

    TOUCH Every finger and the mouse stir it; tilt a phone and the heavy ink pours that way. With nobody touching, slow jets keep it moving.

    ERAS 1895 Art Nouveau · 1967 Psychedelic · 2017 Gen X Soft Club · 2019 Acid · 2020 Glassmorphism · 2023 Maximalism

  • FLY BRAIN // 138,639 NEURONS

    IN THE ROTATION

    A fruit fly's whole brain, all 138,639 neurons where FlyWire mapped them, with a scan plane drifting through.

    TOUCH In play mode the brain wakes up (a 31 MB download): paint to stimulate neurons and watch the spikes spread. 1 sugar, 2 bitter, 3 a looming shadow, 4 bass, 5 a touch, R resets.

  • CHIMERA // AIRWAY

    IN THE ROTATION

    A throat in cross-section, from CHIMERA, a physically modelled voice. It mouths its way round the vowels in silence, with the tract's resonances underneath.

    TOUCH In play mode hold to breathe and drag round the vowel chart: left is the back of the mouth, right the front, up closed, down open. 1–9 sing a vowel, Space speaks, S sings, B changes the body, C lets an animal out.

Games

With the page showing, a robot plays. Hold the name in the top bar to take over.

  • SUBSTRATA

    IN THE ROTATION

    SUBSTRATA: a drill-bot tunnels through banded rock, zapping glitch bugs and dropping boulders on them.

    • your drill-bot
    • glitch bugs (they can phase through rock)
    • gems
    • boulders: dig under one and it falls

    TOUCH Arrows or WASD dig, Space zaps; on a phone, drag to steer and tap to zap. With the page showing, a robot plays.

  • PACKET HOP

    IN THE ROTATION

    PACKET HOP: one button, one glowing packet, gaps in a scrolling firewall.

    TOUCH Space, Up, a click or a tap thrusts. With the page showing, a robot flies (and now and then gets lazy).

  • VECTOR SWARM

    IN THE ROTATION

    VECTOR SWARM: a neon twin-stick shooter on a grid that's a sheet of springs, so every blast ripples across the screen.

    • SHARD: homes in
    • DRIFT: wanders
    • CELL: splits into mites
    • SINK: pulls in the grid, you and your shots

    TOUCH WASD moves, the mouse aims and fires, Space bombs; on a phone, left thumb moves and right thumb aims.

    ERAS 2001 Cyberpop · 2019 Acid

  • SCRAP RUN

    IN THE ROTATION

    SCRAP RUN: run and gun through an endless junkyard of viruses, blobs, spider-bots, a crawler tank and a drop-ship.

    TOUCH Arrows run, W or Space jumps, X shoots, Up aims up, C throws a grenade; on a phone, drag on the left, tap on the right.

  • KERNEL PANIC

    IN THE ROTATION

    KERNEL PANIC: a first-person corridor shooter, raycast the 1993 way, in a rusted server compound under a sky of volumetric clouds, baked live into a skybox, that changes with the sector: red and bad, a storm with lightning, a moonlit night with an aurora, an acid dawn, a blue calm. The walls carry this site's screenshots and memes; the things loose in it are bugs.

    • GLITCH BUG: a green spider; walks up and bites
    • VIRUS: a purple ball; floats, keeps its distance, spits fire
    • POPUP: a window with teeth; rushes you and pops
    • cards open the doors of their colour

    TOUCH W/S move, A/D strafe, the mouse or Left/Right turn, a click or Space fires, 1 and 2 pick the gun, T or a right click sprays a chibi Carter tag on the wall in front of you; on a phone the left thumb moves, the right aims, a tap fires. With the page showing a robot plays: the cursor turns its head, and a click on empty page fires a shot that lights the clouds.

Era scenes

Drawn for one design era, in that era's own colours; they only come up with it.

  • COMPOSITION

    WITH ITS ERA

    A Bauhaus poster: circles, squares, triangles and bars along a diagonal, overprinting like ink, gliding into a new composition every few seconds.

    TOUCH The cursor nudges shapes aside. In play mode drag them, tap paper to add one, tilt to slide the sheet, Space recomposes.

    ERAS 1923 Bauhaus · 1962 Pop Art · 1981 Memphis · 2020 Naive

  • SUNBURST

    WITH ITS ERA

    A machine-age sunburst: gold rays fanning up from a sun below the screen, stepped arcs and a stepped frame.

    TOUCH The cursor, or tilt, moves the sheen across the gold. In play mode a tap sends a ring out.

    ERAS 1925 Art Deco · 2010 Steampunk · 2016 Luxury Minimal

  • THE GRID

    WITH ITS ERA

    A strict Swiss column grid: black blocks, a red disc, rules and a big numeral, sliding one at a time to new cells.

    TOUCH Hovering lights your column and the disc follows you. In play mode a tap fills or clears a module and dragging paints.

    ERAS 1957 Swiss · 1985 80s Editorial · 2025 Blueprint

  • BUBBLES

    WITH ITS ERA

    Glossy Web 2.0 bubbles rising with a sway, over soft ribbons.

    TOUCH The cursor nudges bubbles away. In play mode tap to pop; tilt a phone to choose which way is up.

    ERAS 1999 Y2K · 2000 Bubblegum · 2007 Web 2.0 gloss

  • BLOCKS

    WITH ITS ERA

    Neubrutalist stickers with thick outlines and hard shadows, dropping in and stacking.

    TOUCH In play mode grab and throw them, tap to drop a new one; on a phone gravity follows the tilt.

    ERAS 2019 Kidcore · 2021 Neubrutalism

The eras

The site can also be redrawn in 50 styles from design history, from 1895 to now, and each one brings a background of its own. They have a page of their own: /eras.