The Body Votes Before the Mind Consents
The story behind The Census
Inspired by Desire path on Wikipedia
Built with Three.js · ShaderMaterial · WebGLRenderTarget · EffectComposer (UnrealBloomPass, ShaderPass) · Web Audio API
Techniques GPU Heat Simulation · Agent-Based Pathfinding · Tilt-Shift Post-Processing · Bloom
Direction Build a living architectural diorama where simulated pedestrians vote with their feet and desire paths emerge as GPU-accumulated heat trails
Result A miniature plaza where you watch trails burn from cream to red in accelerated time, place obstacles to redirect flow, and discover that every plan is overwritten by collective behavior
The Story
In Finland, urban planners have a ritual. After the first snowfall, before the plows arrive, they walk to the parks and study the footprints. The paths people were supposed to take are invisible under the white. The paths people actually took are written clearly in the snow.
These are desire paths — trails worn by feet that refused the architect’s instruction. As few as 15 passages can create one. German physicist Dirk Helbing found the human constant: if the official route is 20-30% longer than the direct line, people will cut across the grass. They’ll do it alone at first, then in twos and threes, and eventually the worn dirt becomes undeniable. The body votes before the mind consents.
Broadway in New York follows a Native American trail that predates colonization. The Oval at Ohio State is crisscrossed with paths that students wore into permanence over decades. Every desire path is a silent referendum — thousands of feet casting ballots against the planner’s intention.
The Take
An architectural diorama sits on your screen like a model on a city planner’s desk. Grey buildings, a central fountain, careful paved walkways connecting the entrances. It looks pristine. Controlled. Designed.
Then the pedestrians begin to spawn.
Watch the first one cut a corner. Then another. Within seconds, faint trails of heat begin to glow — cream, then gold, then orange where the traffic is heaviest. The official paths are partially ignored. Diagonal shortcuts assert themselves. The gap between “designed” and “desired” becomes visible.
Click to place an obstacle. A thud. A ripple through the heat field. The flow swirls around your intervention like water around a stone, leaving characteristic wakes in the trail pattern. Within moments, a new desire path begins forming to route around your barrier.
Speed up time. Watch decades of wear compress into seconds. The trails crystallize from yellow to deep orange-red. The pristine model becomes a map of collective human choice, the infrastructure overwritten by accumulation.
The Tech
The scene is a Three.js orthographic view with a high camera angle — the tilt-shift miniature effect comes from a custom post-processing shader that blurs the top and bottom 20% of the frame. The ground plane uses MeshStandardMaterial for the paper-like texture, with shadows from the grey infrastructure creating depth.
Agent system. 80-150 pedestrians spawn at four edge entrances and navigate toward random destinations. Rather than rigid A* pathfinding (which looks robotic), agents use fluid-influenced movement: a desire vector toward the goal, repulsive forces from obstacles and other agents, and a small Perlin noise term for organic variation. The result is flow that swirls around barriers rather than making sharp turns.
Heat accumulation. A GPU ping-pong buffer (two WebGLRenderTargets trading roles each frame) accumulates heat. Each agent deposits a Gaussian splat at their position; the previous frame’s heat decays by 0.3% per frame. The buffer resolution is 1024×1024, mapped to the 40×30 world-unit plaza.
Heat visualization. The ground’s fragment shader samples the heat buffer and interpolates through a color gradient: cream → gold → orange → red. A crystallization effect triggers when heat exceeds a threshold — a subtle shimmer that marks the moment an informal path would “become official” in real urban planning.
View modes. Spacebar cycles through three lenses: Blueprint (clean architectural view with flat heat overlay), Ghost (heat trails rise as 3D ribbons, agents become faintly visible), and Stress (cyan highlights show bottleneck zones where agents slow down or change direction sharply).
Time control. Scroll wheel adjusts simulation speed from 0.5× to 8×. At high speeds, trails accumulate rapidly — you can watch decades of pedestrian wear in seconds.
Obstacle placement. Click to drop a cylindrical barrier (max 5). Each placement triggers a low-frequency audio thud and a visual ripple that propagates through nearby heat trails. The flow immediately begins rerouting.
Post-processing: UnrealBloomPass for the warm glow on high-heat trails, a custom tilt-shift shader for the miniature effect, vignette for framing, and subtle film grain for tactile quality.
The Experience
A pristine model. Grey buildings arranged with care. Paved paths connecting the four entrances through a central plaza. This is the plan.
The first pedestrians appear at the edges. They begin to walk. Some follow the paths. Some don’t. A diagonal shortcut flickers into visibility — faint cream, barely there. Then another pedestrian takes it. And another.
Gold appears. The diagonal is now a desire path, voted into existence by accumulated feet. You notice the official right-angle route nearby, ignored by half the traffic. The plan was a hypothesis. The heat map is the data.
Click somewhere. Drop an obstacle. Watch the flow divide, swirl around your intervention, rejoin on the other side. A wake pattern forms in the trails — the visual signature of your attempt at control. But control is temporary. Within seconds, a new path is forming to route around you.
Speed up time. The plaza erupts with trails. Orange veins spread from entrance to entrance. Some follow the infrastructure. Most don’t. The corners of the plaza bloom red — everyone cutting across, refusing the long way.
Toggle to stress mode. Cyan sparks at the bottlenecks. Toggle back to blueprint. The warm trails pulse with accumulated intent.
You are watching a thousand decisions rendered visible. Each trail is a referendum. Each diagonal is a vote against the right angle. The body knows the shortest path, and the body will wear it into the earth whether the planner approves or not.
Every plan is just a hypothesis waiting to be overwritten by collective behavior.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.