Flocking Simulation
Three simple rules, and suddenly it's a flock of birds.
IntermediateWeb appCreative8–18hAI-buildable 4/5no setup
Boids: separation, alignment and cohesion. Each agent follows only local rules, yet the group behaves like a flock. Tuning the weights live and watching the emergent behaviour shift is endlessly absorbing, and the spatial partitioning needed for scale is a real optimisation exercise.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Agents follow separation, alignment and cohesion rules
- Each rule's weight is adjustable live
- Perception radius and maximum speed are adjustable
- Agents avoid the boundaries or wrap around, selectable
- The count scales into the thousands without dropping frames
- A debug view shows one agent's perception radius and forces
- The pointer can attract or repel the flock
The interesting part
- Naive neighbour search is O(n²), so spatial partitioning is required
- Tuning weights so behaviour is lifelike rather than chaotic or frozen
- Frame-rate independent movement
Once it works
- Add predators the flock evades
- Add obstacles to navigate around
- Add 3D flocking
Suggested stack
reacttypescripttailwindcanvas-api