Cellular Automation
Interactive 3D multi-state cellular automaton with worker-driven simulation, shader rendering, and adaptive quality control.
Click, hold, rotate / Scroll in and out
Cellular Automation Control Matrix
Shape birth, survival, excitation, and stochastic chaos in real time
Faster ticks, lower survival constraints, and elevated noise.
Actions
OVERVIEW
A browser-native 3D cellular automaton where every cell holds one of five states and advances through a strict priority rule chain. Pointer, scroll, click, and keyboard input continuously reshape the birth and survival thresholds, so the lattice reorganises itself while you steer it. The same seed and the same inputs always replay the same evolution — the piece feels alive without ever being random.
ARCHITECTURE
The piece separates simulation from rendering so neither can stall the other. Generations are computed off the main thread in a Web Worker that recycles transferable buffers between ticks, with a reduced-size main-thread simulation standing by if the worker fails to start. The renderer draws the lattice as a single instanced mesh and interpolates each cell between its current and next state in the shader, so motion stays smooth even when generations arrive slower than frames. A quality controller samples measured frame rate and moves between device tiers with hysteresis, and the surface recovers on its own from WebGL context loss.
SYSTEM ARCHITECTURE
┌────────────────────────────────────────────────────────────────────────┐
│ POINTER · SCROLL · CLICK · KEYBOARD │
└────────────────────────────────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────────────────┐
│ CELLULAR AUTOMATION RUNTIME │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ INTERACTION MAP │ │
│ │ Rule thresholds · temperature · seed injection · tilt │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ SIMULATION TRANSPORT │ │
│ │ ┌─────────────────────────┐ ┌────────────────────────────┐ │ │
│ │ │ Worker generation loop │ │ Main-thread fallback sim │ │ │
│ │ │ transferable buffers │ │ degraded lattice size │ │ │
│ │ └─────────────────────────┘ └────────────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ FIVE-STATE RULE CHAIN │ │
│ │ Strict precedence · birth and survival bands · seeded RNG │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ INSTANCED LATTICE RENDERER │ │
│ │ State interpolation · quality tiers · context-loss recovery │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────────────────────────────────┐
│ EVOLVING 3D STRUCTURE + LIVE HUD READOUT │
└────────────────────────────────────────────────────────────────────────┘FUNCTIONALITY
SIMULATION CORE
- Five cell states advanced by a strict precedence rule chain
- Deterministic seeded mode so an identical seed replays an identical evolution
- Worker-driven generation loop with transferable buffer reuse and stale-frame rejection
- Main-thread fallback simulation at a reduced lattice size when the worker cannot start
RENDERING
- Single instanced 3D lattice carrying per-cell state, density, age, and generation
- Shader interpolation between current and next state so evolution reads as motion rather than stepping
- Post-processing intensity bound to the active quality tier
INTERACTION
- Pointer position and scroll retune the birth and survival thresholds live
- Click and keyboard actions inject local seeds into the lattice
- Renderer control panel for direct parameter access and canvas capture
RESILIENCE & ADAPTATION
- Adaptive desktop, tablet, and mobile quality tiers with hysteresis to prevent tier flapping
- Reduced-motion mode honouring the operating system preference
- Off-screen and background-tab pause with resume on return
- WebGL context-loss detection with a guided recovery overlay
HOW IT WORKS
Each generation walks the lattice and resolves every cell through the rule chain in strict order, so the outcome never depends on evaluation sequence. The worker returns the finished generation as a typed array, and the renderer hands it to the instanced mesh as per-cell attributes; the shader then interpolates between the previous and incoming state across the frames until the next generation lands. Your pointer and scroll position continuously bias the birth and survival thresholds, while clicks and key presses seed new activity at a specific point. In the background a quality controller watches measured frame rate and steps the tier up or down — with a deliberate gap between the two triggers so the piece settles instead of oscillating.
STEP-BY-STEP GUIDE
- Let the lattice settle for a few seconds — the opening structures show the rule chain finding its equilibrium.
- Move the pointer across the surface to bend the birth and survival thresholds and watch the structures reorganise.
- Scroll over the piece to push the system toward order or chaos.
- Click into the lattice, or use the keyboard, to seed new activity and watch it propagate through its neighbours.
- Open the renderer controls to set parameters directly, and check the HUD for the live frame rate and active quality tier.
OUTCOMES
- Lets visitors shape a living 3D cellular system through pointer, scroll, click, and keyboard input.
- Makes state-machine behaviour visible as evolving structures instead of abstract rules.
- Adds a richer interactive art piece with motion, depth, and direct control.
- Gives the portfolio a distinct real-time system that rewards experimentation.