Home▸Algorithms & AI▸2D Boids — Flocking on a Flat Canvas (2D)

🐦 2D Boids — Flocking on a Flat Canvas

Interactive 2D boids flocking lab: Reynolds separation, alignment and cohesion with a spatial hash, field of view, topological neighbours, draggable obstacles, wind and a hunting hawk, with live order-parameter graphs.

Algorithms & AI2DEasy60 FPS📱 Mobile-adapted🟠 Blender⇄ 3D version
2D Boids — Flocking on a Flat Canvas (2D) ↗ Open standalone

The 2D companion to 3D Boids — Flocking: the same Reynolds separation/alignment/cohesion rules, run on a flat plane with a real spatial-hash neighbour search, obstacle avoidance and a cursor-controlled predator.

🔬 What it demonstrates

Emergent flocking from three purely local rules — no boid knows about the flock as a whole, only about the handful of neighbours inside its own perception radius.

🎮 How to use

Drag the weight sliders to reshape the flock live, choose a hawk mode and click or drag the canvas to lure it with your cursor, and drag a tree or the pylon to force the flock to split and reform around it.

💡 Did you know?

Because the neighbour search uses a spatial hash grid instead of checking every pair, this simulation stays smooth well past 400 simultaneous agents in a plain 2D canvas.

⚙ Under the hood

The 2D companion to 3D Boids — Flocking: the same Reynolds model on a Blender-rendered plan view with flapping bird sprites. Spatial-hash neighbour search, field of view, topological neighbours, draggable trees and pylon, wind, a hunting hawk you can lure with the pointer, and live order-parameter graphs.

boidsflocking algorithmCraig Reynoldsseparation alignment cohesionspatial hash gridobstacle avoidancepredator avoidancecanvas 2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)