Browser Flocking Simulator

Live Demo

Use the control panel inside the demo to adjust boid count, speed, flocking range, and behavior parameters. Move your mouse inside the demo to interact with the boids.

An early implementation of flocking behavior (boids). This was a first introduction to 2D graphics and emergent AI behavior.

The simulation demonstrates three core boid rules:

• Separation — steer to avoid crowding nearby boids
• Alignment — steer towards the average heading of nearby boids
• Cohesion — steer toward the average position of nearby boids

The control panel offers toggles for alternative calculation methods for each rule, along with color-specific flocking, wall avoidance, mouse interaction, trail effects, and more.

Planned improvements include proper position/direction vector models, per-species behavior coefficients, quadtree-based O(n log n) neighbor lookups, and a potential 3D rewrite using WebGL or compute shaders.