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

🐦 2D Boids — Flocking on a Flat Canvas

A genuine 2D flocking engine: separation, alignment and cohesion computed from a real spatial-hash neighbour search, with draggable weight sliders, obstacle avoidance and a cursor-controlled predator.

Algorithms & AI2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

Details

CategoryAlgorithms & AI

RenderingCanvas 2D

DifficultyEasy

Target FPS60

ControlsSliders for Count, Max speed and Perception radius; separate Separation / Alignment / Cohesion weight sliders; checkbox to enable a predator that follows the cursor; Place obstacles button to click-drop obstacles on the canvas, with a Clear button; Rebuild flock button; live stats for agent count, FPS, obstacle count and average neighbours per boid.

boidsflocking algorithmCraig Reynoldsseparation alignment cohesionspatial hash gridobstacle avoidancepredator avoidanceemergent behaviourcanvas 2d

Related simulations

Ant Colony Pheromone Trails SimulationExplore the fascinating world of ant colonies as you observe how they use pheromone trails…

Pathfinding — A*, Dijkstra, BFSDraw walls, generate mazes and watch A*, Dijkstra, Greedy Best-First and BFS explore the…

Genetic AlgorithmPopulation evolves via tournament selection, crossover and mutation. Two modes: classic… ⊞ All 435 in Algorithms & AI →

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, tick the predator to hunt it with your cursor, and click the canvas in obstacle mode to force the flock to split and reform around a wall.

💡 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: a genuine Reynolds flocking engine on a flat canvas. Separation, alignment and cohesion are computed from a real spatial-hash neighbour search (not an all-pairs scan), with draggable weight sliders for each rule, obstacles you click to place that the flock must split around, and a predator that hunts wherever you move the cursor.

boidsflocking algorithmCraig Reynoldsseparation alignment cohesionspatial hash gridobstacle avoidancepredator avoidanceemergent behaviourcanvas 2d

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