EXPERIMENT_003 // CROWD.FLOW.TWIN
Cellular automata meets agent-based crowd simulation. Draw walls and obstacles, then watch emergent flow patterns form in real-time.
LOADING EXPERIMENT...
10,000 autonomous agents run a flocking algorithm, leaving density trails on a grid as they move. Those trails feed a Gray-Scott reaction-diffusion system — a cellular automaton that transforms raw crowd density data into emergent organic structures resembling coral, lichen, and chemical wavefronts. The result is a crowd simulation that visualises density not as a heatmap but as a living pattern.
HOW IT WORKS
Each of the 10,000 agents follows a Boids flocking algorithm: three rules governing separation (avoid collisions), alignment (match neighbours' heading), and cohesion (steer toward the local centre of mass). A spatial hash grid ensures each agent only checks nearby neighbours, keeping the computation tractable. The result is smooth, biologically plausible group movement across the canvas.
As agents move, they deposit density values onto a 2D grid. Each grid cell accumulates deposits from nearby agents and decays over time, creating a fading trail map that records where agents have been and how densely they travelled. High-traffic corridors light up; empty zones fade to zero. This trail grid is the bridge between the agent simulation and the reaction-diffusion system — it converts discrete agent positions into a continuous density field.
The trail grid's density values seed a Gray-Scott reaction-diffusion model. Gray-Scott simulates two virtual chemicals — an activator and an inhibitor — that diffuse across the grid at different rates. Where agents deposit trails, the activator concentration rises. The inhibitor responds, and the interplay between diffusion rates, feed rate, and kill rate produces self-organising patterns: spots, stripes, branching coral structures, labyrinthine networks. The specific pattern depends on the Gray-Scott parameters, which are tuned so that crowd density produces organic structures rather than uniform blobs.
Clicking creates obstacles that agents must navigate around, reshaping flow corridors and producing new trail concentrations. The feedback loop is visible in real time: place an obstacle, watch agents reroute, see new trails form, watch the trails bloom into coral-like patterns over the next few seconds.
WHAT THIS PROVES
This demonstrates multiple coupled simulation systems running in the browser. Three distinct passes — agent flocking, trail accumulation, and reaction-diffusion — run sequentially each frame, reading and writing shared data structures. That pipeline pattern is the foundation for any serious simulation work in the browser: fluid dynamics, crowd modelling, procedural generation, physics solvers.
The Boids algorithm requires each of 10,000 agents to read positions from nearby neighbours every frame — a workload that spatial hashing makes tractable on the CPU. Combined with the reaction-diffusion system, the experiment sustains three coupled simulations at 60fps, entirely client-side, with no WASM or native plugins.