Boids
Summary
Boids is a flocking algorithm consisting of multiple agents which move according to three basic rules:
- Separation: Steer to avoid getting too close to neighbors.
- Cohesion: Steer towards the average position of neighbors.
- Alignment: Steer towards the average heading of neighbors.
As you can see above, these three simple rules result in pretty convincing flocking behavior when applied to each boid in the simulation. Each boid has its heading and neighborhood radius drawn so you can get a better idea of how flocks form and interact.
Running
There's already an embedded instance running on this page, but if you want to run your own instance, check out the repository and open index.html in your browser.
Remarks
I made a basic Boids implementation as a nice way of learning some JavaScript features & functionality (classes, canvas drawing, DOM manipulation) Unfortunately, my code doesn't scale well to large numbers of boids (80 to 100 depending on your hardware/browser). I experimented with drawing to an offscreen canvas, but I couldn't get it to work without a lot of caveats. I also tried splitting each boid update into an asynchronous task via promises, but the overhead was a lot larger than expected.
