Interactive visualization of the Boids flocking algorithm. Watch emergent collective behavior arise from simple local rules applied to individual agents.
- Boids Algorithm: Classic flocking simulation with three steering behaviors
- Interactive Control: Attract or repel boids with mouse clicks
- Configurable Parameters: Adjust separation, alignment, and cohesion weights
- Visual Effects: Motion trails and perception radius display
- Real-time Simulation: Smooth 60fps animation
Each boid follows three simple rules based only on nearby flockmates:
- Separation: Steer to avoid crowding local flockmates
- Alignment: Steer toward the average heading of local flockmates
- Cohesion: Steer to move toward the average position of local flockmates
From these simple local rules, complex group behaviors emerge:
- Flock formation and movement
- Natural-looking turns and avoidance
- Group splitting and merging
| Action | Description |
|---|---|
| Left Click (hold) | Attract boids toward cursor |
| Right Click (hold) | Repel boids away from cursor |
| Sliders | Adjust behavior weights |
| Play/Pause | Start or stop simulation |
| Reset | Regenerate flock |
| Parameter | Description |
|---|---|
| Boid Count | Number of agents in simulation |
| Separation | Weight for avoiding nearby boids |
| Alignment | Weight for matching neighbor headings |
| Cohesion | Weight for moving toward neighbors |
| Max Speed | Maximum velocity of boids |
| Perception | Radius for detecting neighbors |
- React 19 + TypeScript
- Vite
- Tailwind CSS 4
- Canvas API for rendering
npm install
npm run devsteering = desired_velocity - current_velocity
steering = limit(steering, max_force)
for each neighbor within separation_radius:
diff = my_position - neighbor_position
diff = normalize(diff) / distance
sum += diff
steer toward sum
for each neighbor within perception_radius:
sum += neighbor_velocity
average = sum / count
steer toward average heading
for each neighbor within perception_radius:
sum += neighbor_position
center = sum / count
steer toward center
- Craig Reynolds' original Boids paper (1987)
- "Flocks, Herds, and Schools: A Distributed Behavioral Model"
MIT
