Boids Simulator

Changed a few things to make the experience nicer, such as changing the add boids button for a slider of the number of boids.
Boids can now also go off the edge of the screen and reappear on the opposite side.

I improved the graphics, turning the boids into triangles, so you can see which way they are going.
I then added a UI, with buttons to run certain helper functions, e.g. clearing the boids or adding more. I also made it so clicking adds a boid.
I finally edited some settings and fixed some simple bugs to improve the behaviour of the boids.

I swapped angles for vectors, so the boids move much more realistically now.
I also made it so the boids don’t disappear off one side of the screen onto the other, they avoid the edges.
I need to do some fine tuning and editing of the graphics, but other than that, this is complete.

I added cohesion and tweaked some values. I was struggling to get anything to work well. After some research I’ve realised I must change from using angles to using vectors, this allows the boids to feel more alive, and speed up/slow down.
Also, I removed teleporting from one side to the other when it goes off the screen, so now it turns away from the edge, however now some boids leak off the screen.

I added alignment, so now the boids try to stay in a line with each other. This causes them to stay in groups of the same direction, however they tend to eventually all go the same way, which is quite boring.

First I setup JS with canvas. I then made a boid class and an array of boids, that I can iterate over and update and render each boid.
Then, in the boid class, I made it so boids check for nearby boids and steer slightly away from them. This causes a uniform distribution of boids.
Remember to try the demo!