Simple Boids Simulation
By: Lucas Sedberg
This is Boids
Inspired by the work of Craig Reynolds, this simple Boids simulation showcases flocking behavior of birds. This is a simple 2D Boids simulation made with Canvas and Typescript.
How to use
- Watch: Observe the boids flocking around.
- Interact: Move the mouse around or tap the screen to see the boids avoid the cursor.
How it works
Three simple rules
The boids follow three simple rules:
- Separation: Boids avoid crowding local flockmates.
- Alignment: Boids attempt to match the velocity of flockmates.
- Cohesion: Boids attempt to stay close to flockmates.
Together, these three rules create a complex and realistic flocking behavior.
In addition to the three original rules, I have added a few more:
- Avoid Borders: Avoids the borders of the canvas by applying a force in the opposite direction.
- Avoid Mouse: Avoids the mouse cursor location on click or on mouse move by applying a force in the opposite direction.
- Follow Leader: Selects the first Boid, and makes every other Boid follow it.
Here is some helpful pseudocode.
Tuning the rules
There are plenty of parameters that can be tuned to change the behavior of the boids.
- Distances - Separation, Alignment, and Cohesion distances, where the boids start to apply the rules.
- Weights - The weight of each rule, how much it affects the boid’s velocity.
- Velocity Limit - The maximum velocity of the boids.
Interestingly, my tuning ended up with what looks like a school of fish, rather than a flock of birds.
The canvas
Every frame, the canvas is cleared and a triangle is drawn for each boid. The triangle is rotated to match the boid’s velocity.
Source code
The source code is currently not available.