Can 200 tiny agents, each following three simple rules, read as one living thing?
That was the question behind this study. Flock is a browser version of Craig Reynolds' boids, the 1986 model behind the flocks and schools in film and games. Nobody steers the flock. Each bird only looks at its close neighbours, and the whole shape emerges from that.
Three rules
Don't crowd the birds right next to you.
Steer toward the average heading of your neighbours.
Drift toward the centre of your group.
The sliders above change how strongly each rule pulls. Turn cohesion up and the flock balls together; turn alignment off and it dissolves into a swarm of gnats. A fourth force makes it interactive: the pointer is a predator, and any bird inside its radius steers away, harder the closer it gets.
Keeping it fast
The naive approach has every bird check every other bird. With 200 birds that is 40,000 distance checks a frame, sixty times a second. Instead, the study drops birds into a grid of buckets the size of their vision, so each bird only checks the nine buckets around it.
// each frame: bucket the birds by position
const key = ((b.x / vision) | 0) + "," + ((b.y / vision) | 0);
grid.get(key).push(b);
// then only compare against the 3×3 neighbourhood
for (let i = -1; i <= 1; i++)
for (let j = -1; j <= 1; j++)
for (const other of grid.get(cell(i, j)) ?? []) steer(b, other);The canvas also pauses itself when it scrolls out of view, and with reduced motion switched on it settles the flock and shows a single still frame instead of animating.
Where this goes on a client site
- A hero that reacts to the visitor, like the one on this site's home page.
- Loading and empty states with some life in them.
- Brand moments: a logo that assembles from a flock, or a crowd that gathers around a call to action.