Boids Simulator

Boids simulation is back!!!
They now move and simulate, with 5000 boids. It laggs a bit with over 5000 Boids, which I will fix by re-implementing the spacial grid system on the GPU. I will then do some tweaking and then add interactivity, like the Boids running from the mouse, or being able to place obstacles or change the Boid settings.

A compute shader now moves the Boids. Currently they just move in straight lines and bounce at the edges though.
They also look a bit like maggots :O

I am swapping over to WebGPU for speed, mainly to enable more Boids to be simulated, allowing more interactivity and other features.
At the moment it just stores Boids on the GPU and renders them, they aren’t simulated.
The picture below shows 10,000 Boids.

Major optimisations!

• A grid system is now used, so Boids only have to check other Boids in the current tile and the 8 adjacent ones, saving checking every Boid (it used to be O(n^2) which is pretty rubbish)
• Improvements to the graphics, including colour changes with speed, the Boids are smaller, and the constants were tweaked to produce better flocking
  There are now 2000 Boids!
  (It’s exceedingly satisfying…)

Updated the UI to make more sense, I’m mainly doing this devlog to reship after the new voting was implemented.

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!