See the vector math behind each boid rule — in real time.
In a real school of fish or flock of birds — or in the Playground simulation on this site — every entity is a boid, following the same three rules simultaneously. No single boid knows the shape of the flock or where the group is headed. The complex, seemingly coordinated behavior — tight formations, sweeping turns, splitting around obstacles and re-forming — emerges entirely from many individuals making small, local adjustments at the same time.
On this page, we've stripped that away to focus on how a single boid responds. A fixed central boid sits at the center of each demo while passing neighbors follow scripted looping paths around it. These neighbors aren't reacting to our boid or to each other the way real boids would — they're just stand-ins that let you see each rule's effect in isolation, without the feedback loops that make the full simulation so rich and unpredictable.
The central boid appears fixed because we're looking at its environment from its point of view. Imagine you're swimming just above this boid, keeping pace with it — you see the same neighborhood it sees, with other fish drifting in and out of its radius. The boid isn't sitting still; we're moving with it, so everything else appears to move around it. It's a bit like watching the world scroll past from a car window — the car feels stationary, the landscape moves.
Each boid rule — separation, alignment, and cohesion — boils down to a single steering vector. Every frame, the simulation computes all three vectors for every boid, adds them together, and nudges the boid's velocity in that direction. That's it — the rest is emergence.
Below, we isolate each rule one at a time so the effect is clear on its own, then combine all three and watch the interplay. Drag the sliders to change each rule's radius and strength and see how the vectors respond.
Separation keeps boids from crowding each other. For every neighbor inside the separation radius, a repulsion vector points away from that neighbor. Closer neighbors produce stronger repulsion — the force falls off linearly with distance. All the individual repulsion vectors are summed and scaled by the strength parameter to produce the final separation delta.
Arrows
Sliders
In the weeds: When the gray target arrow is longer than the white velocity arrow, that's the boid literally speeding up — not just turning. The raw vector math produces both a direction change and a magnitude increase. In practice, most boids implementations (including the playground on this site) clamp each boid's speed to a maximum, so the burst of acceleration is brief and the speed normalizes. The lasting effect is the direction change. But the length of the gray arrow is honest: it shows the true force magnitude before clamping.
Alignment makes boids swim in the same direction as their neighbors. The rule computes the average velocity of every neighbor inside the alignment radius, then produces a steering force — the delta — that rotates the boid toward that average heading. The delta isn't shown in the diagram (it would add visual clutter without much clarity), but you can see its effect: the gray target arrow swings toward the dashed yellow average, and the white velocity arrow gradually follows.
When neighbors are heading in wildly different directions their contributions partially cancel out, producing a small delta. When the group is already well-aligned the delta nearly vanishes — the rule only pushes when there's disagreement.
Arrows
Sliders
Watch for it: when a school passes through, the dashed yellow snaps to the school's heading, the gray target swings toward it, and the white velocity arrow gradually follows. That rotation is alignment at work.
Remember: in the full simulation, this isn't one-way. Every boid is simultaneously aligning with every other boid in its radius — and those neighbors are adjusting right back. That mutual, decentralized alignment is what produces the sweeping synchronized turns you see in the Playground.
Cohesion pulls boids toward the center of mass of their neighbors. The rule finds the average position of all neighbors inside the cohesion radius — the centroid — and steers toward it. This is what holds the school together: without cohesion, separation and alignment would gradually scatter the group across the scene.
The centroid jumps whenever a new neighbor enters the radius from the opposite side, abruptly shifting the target. These discontinuities create the quick, organic-looking course corrections that make boid flocks feel alive.
Arrows
Sliders
In the real simulation, all three rules run simultaneously. Each produces its own delta vector; the three deltas are summed into a single gray target that steers the boid. The relative strength sliders control how much weight each rule gets in that sum.
Interesting moments arise when the rules conflict — for instance, a boid may be inside both the separation radius of one neighbor and the cohesion radius of another, pulled in two directions at once. The interplay of these competing forces is what produces the fluid, unpredictable motion of a real flock.
Arrows
Sliders
Try this: Set separation high and cohesion high with alignment low. The boid oscillates — pushed away from nearby neighbors but pulled back by cohesion. Now raise alignment and watch the oscillation smooth out as the boid finds a heading that satisfies all three rules.
Three local rules. No global plan. No boid knows the shape of the flock or where the school is headed. Each one simply looks at its immediate neighbors and adjusts its velocity. The collective behavior — the tight schooling, the sweeping turns, the way the group splits around an obstacle and re-forms on the other side — all of it emerges from per-boid vector addition repeated sixty times a second.
Craig Reynolds' original insight was that you don't need choreography to create coordinated motion. You just need the right handful of simple rules operating on local information. The same principle drives real schools of fish, flocks of starlings, and swarms of insects.
Try the 3D Playground →Same arrowheads, same rules — the circles become spheres in 3D.