The Flock
The story behind The Flock
Inspired by Complexity on Wikipedia
Built with Canvas 2D · Boids algorithm · Spatial hash grid
Techniques Reynolds flocking (separation, alignment, cohesion) · Canvas fade trails · Spatial hash O(n) neighbor lookup · Screen wrapping · Cursor gravity well
Direction Simple rules, no leader, no plan — just proximity and imitation. Complexity emerges from nothing.
Result Flowing rivers of light on charcoal that self-organize, scatter at your touch, and patiently reassemble
The Story
Complexity science asks a disorienting question: how does order emerge without a designer? A single starling follows three rules — don’t crowd your neighbor, fly the same direction, stay close to the group. No starling knows the shape of the murmuration. No starling intends to create it. Yet thousands of birds, each following local rules about their nearest neighbors, produce coherent waves that ripple across the sky like a single living thing.
Craig Reynolds formalized this in 1986 as “boids” — artificial life agents governed by separation, alignment, and cohesion. The insight that stunned the computer graphics community wasn’t the realism of the flocking. It was that the realism was unintended. Nobody programmed “form a river.” Nobody specified “split and rejoin.” The behavior emerged from the interaction of simple rules at scale.
The question complexity asks: if you can’t point to a designer, does that mean there isn’t one — or that the design is distributed across every participant?
The Take
Six hundred bright dots on a dark field. At first, chaos — random positions, random velocities, no structure. Within seconds, streams begin to form. Particles that happen to face similar directions reinforce each other’s heading. Small groups merge into larger flows. Rivers of light sweep across the screen.
Your cursor is a gravity well. Hold still, and they spiral inward — drawn to your presence. Move fast, and they scatter violently — your urgency disrupts the patient work of self-organization. The metaphor is embodied: you are a force in their system, not a controller. You can attract or repel, but you cannot direct. The flock decides its own shape.
The narrative surfaces only when earned. “Simple rules” appears when the boids first align on their own. “They feel you” when you hold still and the flock orbits. “Too fast” when you shatter them. “Order requires patience” when they reform after chaos. The final beat — “complexity from nothing” — arrives only after sustained engagement.
The Tech
Alignment-Dominant Flocking: The classic boids recipe balances three forces equally. Here, alignment (0.065) dominates cohesion (0.0005) by two orders of magnitude. This produces flowing streams rather than tight clusters — boids share direction without collapsing to a point. Separation (0.045) keeps individuals visually distinct within streams. A gentle wander force (±0.08 radians/frame) prevents convergence to static equilibrium.
Spatial Hash Grid: Naive boids is O(n²) — every boid checks every other boid. With 600 agents, that’s 360,000 distance checks per frame. A spatial hash divides the screen into cells matching the visual range (55px). Each boid only checks its 9 neighboring cells, reducing to ~20 comparisons per boid. Grid uses flat Uint16Array with max 16 boids per cell — zero allocation per frame.
Canvas Fade Trails: Instead of storing and drawing explicit trail histories, each frame overlays a semi-transparent rectangle (rgba(10, 12, 16, 0.065)) over the previous frame. Boid positions are drawn as bright 2px dots on top. The result: each dot leaves a trail that fades exponentially over ~16 frames (~270ms at 60fps). A second pass draws a larger, dimmer 5px glow underneath each dot for subtle bloom.
Screen Wrapping: Boids that exit one edge reappear on the opposite side, creating infinite flow. This prevents the “center-clustering” effect of edge avoidance, where boundary forces push everything inward. The tradeoff: the spatial hash doesn’t handle wrap-around neighbors, so flocks briefly fragment at screen edges.
Cursor Duality: Cursor influence uses quadratic distance falloff ((1 - d/radius)²) for natural feel. Below 0.8 pointer speed: gentle attraction (0.04). Above: strong repulsion (0.25). The asymmetry matters — it’s easy to destroy order, hard to create it. Matches the concept: complexity is fragile.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.