How to play
This is a sandbox, so there is nothing to win. The flock starts moving on its own. Pick a preset to see very different behaviour, then drag the sliders and watch what changes. Move your pointer across the canvas to scare the birds (or pull them towards you), and click or tap to drop round obstacles that they must steer around. Tap an obstacle again to remove it.
How the simulation works
Every bird, called a boid, follows the same three simple steering rules and looks only at its nearby neighbours. Nobody leads the flock and nobody sees the whole picture, yet a coordinated group emerges. The idea was introduced by Craig Reynolds in the 1980s as a way to animate flocks of birds.
- Separation pushes a boid away from neighbours that are too close, so the birds do not collide.
- Alignment turns a boid towards the average heading of the neighbours it can see, so the group moves in the same direction.
- Cohesion steers a boid towards the average position of its neighbours, which keeps the group together.
Each rule produces a steering force. The forces are multiplied by your weights, added up and limited by a maximum force, so a boid turns smoothly instead of snapping around. Speed is capped between a small minimum and the maximum speed. A boid only counts neighbours inside its perception radius and inside its field of view, the angle it can see around its heading. Very close neighbours are always avoided, even behind the boid.
The Order figure shows how aligned the flock is: 100% means everyone flies in exactly the same direction, and a value near 0% means headings are random. To keep 1,000 or more boids smooth, the world is split into a grid so each boid only checks the few cells around it instead of every other boid.
Controls
- Mouse: hover to use the pointer as a predator or attractor. Click empty space to place an obstacle and click an obstacle to remove it.
- Touch: touch and hold on the canvas to act as a predator or attractor. A quick tap places or removes an obstacle. The page does not scroll while you touch the canvas, so scroll using the area around it.
- Keyboard: Space or P pauses, S steps one frame, R resets, C clears obstacles, O drops an obstacle at a random spot.
- Sliders: count (10 to 1,500; boids are added or removed without a reset), separation, alignment and cohesion weights, perception radius, maximum speed, field of view and obstacle size.
- Options: wrap-around or soft-bounce edges, colouring by heading, speed or species, trails, and overlays for one highlighted boid. Your settings are remembered in this browser.
Tips and strategy
- Set alignment and cohesion to 0 and raise separation: the birds spread out and stop bunching up. Do the opposite, with only cohesion, and the group contracts into a tight swirling ball.
- Only alignment keeps the birds together in direction but not in position. Watch the Order figure climb towards 100%.
- A small field of view makes flocks stringy and slow to react. A full 360° view makes them very tight.
- A larger perception radius gives one big, stable flock. A small radius splits it into many little groups.
- Turn on Two species: each kind aligns and gathers only with its own, but they still keep out of each other's way, so they tend to form separate streams.
- Turn on trails and the predator to paint the paths the flock takes to escape.
Frequently asked questions
Is this how real birds flock?
It is a simplified model. Real flocks use more cues, but local rules like these reproduce the look of flocks, schools and herds surprisingly well.
Why do the boids never collide with obstacles?
They are steered away from obstacles, and the simulation also pushes any boid that touches an obstacle back to its edge, so none can pass through.
How many boids can my device handle?
Most desktop computers handle 1,000 boids comfortably. On a phone, try a few hundred. The FPS box shows the current frame rate, and lowering the count or perception radius speeds things up.
What does “Order” mean?
It is the length of the average of all boid direction vectors, shown as a percentage. All boids pointing the same way gives 100%.
Why do boids reappear on the opposite side?
That is the wrap-around edge mode. The world behaves like the surface of a doughnut. Switch to soft bounce to make the edges gently turn the boids back.
Does it work offline?
Yes. Everything runs in your browser and no data is sent anywhere.