RPS Empire
A 3-state cyclic cellular automaton blooms into eternal spiral wavefronts of Rock, Paper, Scissors.
What this is
Three colors on a grid: red beats blue, blue beats green, green beats red. Every frame, each cell looks at its 8 neighbors. If any neighbor holds the color that beats this cell, this cell flips. That's the entire rule. From random noise, spirals form within seconds — and never stop. A bloom layer on top makes the wavefronts glow like neon. A live population graph below traces the three colors locked in eternal oscillation.
Why this is mind-blowing
This is the lava-lamp of cellular automata — pure visual ASMR. There is no goal, no winner, no reset condition. The rule is one line of code. The output is hypnotic geometry that has been studied for decades and still hasn't gotten old. Drop it on a stream as background visuals and the chat will lose track of time watching colors devour each other.
Build a single-file HTML page that runs a 3-state cyclic cellular automaton
in the spirit of Rock-Paper-Scissors. Each cell flips to the color that beats
it if a neighbor holds that beater. The result is eternal spiral wavefronts.
Render with bloom so the spirals glow. Include a live population graph that
shows the three colors oscillate forever. Auto-reset on long runs. No user
input — autoplay forever.Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- A `Uint32Array` view over `ImageData.data.buffer` lets you paint 256×256 cells per frame with a single write per cell.
- Hand-unrolled 8-neighbor toroidal wrap plus an xorshift32 PRNG is the difference between a smooth simulation and a chuggy one at 65k cells/frame.
- A duplicate canvas with `mix-blend-mode: lighter` and `filter: blur(7px) brightness(1.25)` is a one-line bloom that makes pixel CAs look cinematic.