Boids

Boids: 150

Separation: 1.0

Alignment: 1.0

Cohesion: 1.0

Max Speed: 4

Mouse Force: 0.5

Debug Mode

Technical Details

p5.js for canvas rendering and animation
Boids algorithm for flocking behavior
HSB color mode for vibrant, speed-based coloring
Particle trails with alpha blending for smooth motion blur
Mouse interaction with distance-based force fields

The Code

Each boid follows these steps every frame:

1
// 1. Calculate forces from neighbors
2
let alignment = this.align(boids);
3
let cohesion = this.cohesion(boids);
4
let separation = this.separation(boids);
5

6
// 2. Apply forces as acceleration
7
this.acceleration = alignment + cohesion + separation;
8

9
// 3. Update velocity and position
10
this.velocity += this.acceleration;
11
this.position += this.velocity;
12

13
// 4. Limit maximum speed
14
if (speed > maxSpeed) {
15
  velocity = normalize(velocity) * maxSpeed;
1 collapsed line
16
}