Afterglowscreensavers

Cyclic Automaton Screensaver

The Cyclic Automaton screensaver is a free, in-browser animation of a cyclic cellular automaton: a grid of cells that each hold a color-state and follow one simple rule until random noise self-organizes into interlocking spiral waves. Each cell advances to the next state in a fixed cycle when enough neighbors already hold that next state. It runs instantly with no download. Press ESC to exit.

Live preview

Cyclic Automaton screensaver — Spirals from noise.

Press ESC to leave fullscreen. Settings are saved in your browser only.

How the Cyclic Automaton screensaver works

The screen is divided into a grid of square cells whose size is set by the Cell size control (2 to 12 px). Each cell starts with a random state, a number from 0 up to the States value (4 to 16). The states form a loop, so the state after the highest one wraps back to 0 — that cyclic ordering is what gives the automaton its name.

Every generation, each cell looks at its four orthogonal neighbors and counts how many of them are already showing the cell's next state in the cycle. If that count meets the Threshold you set (1 to 3), the cell advances to that next state; otherwise it stays put. The grid wraps around at the edges, so the left edge sees the right edge as neighbors.

From pure random static, this single rule causes domains to form, then curl into rotating spiral cores that grow and collide. The saver actually pre-runs 40 generations the instant it starts, so you see spirals already forming rather than a screen of noise. Each state is mapped to a color from the chosen Palette — Spectrum, Fire or Ocean.

The simulation advances on a fixed clock set by Generations / sec (2 to 30), stepping the grid and repainting only when a new generation is computed. A double-buffer swaps the current and next grids each step so the whole board updates at once, keeping the spiral waves crisp and synchronized.

Rock-paper-scissors dynamics in a grid of cells

The cyclic cellular automaton was developed by David Griffeath, and his student Robert Fisch studied the one-dimensional version in papers from the early 1990s. Each cell has one of a number of states arranged in a ring, and a cell advances to the next state once enough of its neighbours already hold that state. Each state is thereby overtaken by the next one around the cycle, a dominance loop much like rock-paper-scissors.

Such loops matter in nature. The male side-blotched lizard has three throat-colour types whose mating strategies beat one another in a cycle (Sinervo and Lively, 1996), and strains of E. coli that produce, resist or are sensitive to a toxin have been studied as a microbial version. Cyclic competition of this kind can let the types coexist, because none can win permanently. In two or more dimensions the automaton shows rotating spiral waves, each centred on a small cycle of cells holding one of every state.

From a random start there is a messy early phase, and then spirals emerge and compete for territory as their boundaries collide. Depending on the number of states and the threshold, the grid may settle into steady spirals, fine-grained turbulence or large static regions. The picture is more than decoration, since it is a compact example of order arising from randomness through purely local rules.

A worked example

With the defaults — States: 8, Cell size: 4 px, Generations / sec: 14, Threshold: 1 and Palette: Spectrum — the grid fills with random values 0–7. Each step, a cell advances to its next state (for example 3 → 4) whenever at least one of its four neighbors already shows that next state. Because the threshold is just 1, waves spread aggressively; after the built-in 40-generation warm-up, spectrum-colored spiral cores are already rotating across the screen.

Settings & tips

Frequently asked questions

Is the Cyclic Automaton screensaver free?
Yes. It is free and runs in your browser with no download or sign-up. Open the page and the spirals form on their own.
What is a cyclic cellular automaton?
It is a grid of cells, each holding one of several states arranged in a cycle. A cell advances to the next state when enough neighbors already hold that next state, which makes random noise self-organize into spiral waves.
How do I exit the Cyclic Automaton screensaver?
Press the ESC key to exit at any time. Moving the mouse or pressing any key also brings back the controls.
Why does it start with spirals already forming?
The saver pre-runs 40 generations the moment it loads, so the random static has already begun organizing. This skips the dull noise phase and shows spirals right away.
What does the Threshold control do?
Threshold sets how many matching neighbors a cell needs before it advances. A value of 1 spreads waves quickly, while 2 or 3 slows them down and produces larger spiral structures.
Why do spirals appear instead of stripes?
Each state is chased by the next one around the cycle, so waves of change travel outward and wrap around small cycles of cells that contain every state. Those cycles become the spiral cores.
Is there a real-world version of this?
Cyclic dominance, where each type beats one and loses to another, has been described in side-blotched lizards and in laboratory and gut studies of E. coli strains, where it can allow the types to coexist.

← All Generative screensavers