This is a small flocking simulation example using p5.js.
I made this inspired on the Boids algorithm created by Craig Reynolds and by Coding Challenge #124: Flocking Simulation video of The Coding Train.
Basicaly the dots in your screen follow 3 simple rules:
- The Alignment Rule (https://i.imgur.com/z73JhEf.gif)
-
That causes the boids points towards the average heading of other next boids
- The Cohesion Rule (https://i.imgur.com/uanlXSl.gif)
-
That makes the boid to steer towards the center of mass of the flock
- The Separation Rule (https://i.imgur.com/eaSkcU7.gif)
- This rule makes the boid to avoid crowding
You can read more about these rules here, and you can watch The Coding Challenge video here for more details of the math involved.
In this version of flocking simulation I made some changes and added new functions to the base algorithm:
- Proportion between the perception maxSpeed and max force
- Set the perception -> maxSpeed = perception/10 and maxForce = maxSpeed/10
- Obstacles
- By clicking or dragging the mouse, you can create obstacles in the canvas, so the boids will avoid them
I'm working on this project in my spare time, so it can take a while for me to launch any improvement, bugfix ou new feature. So feel free to open a Pull Request or, if you prefer, send me an e-mail on: [email protected]!