DEV Community

Cover image for Boids Flocking Simulation in JavaScript (Canvas)
Hitesh Shetty
Hitesh Shetty

Posted on

Boids Flocking Simulation in JavaScript (Canvas)

I spent my weekend playing around with the canvas element. One thing I had on my list for a long time was to try the Boids algorithm and see if I could recreate flocking behaviour, the way birds move in the sky.

It always felt like magic when you look up and see a flock moving together so smoothly. Turns out, there is a beautiful logic behind it. With a bit of math and patience, I managed to get a clean minimalist version working. The idea was to keep it subtle, calm to watch, and still feel natural.

It’s not perfect yet, but seeing those tiny triangle flock and glide around the screen felt super rewarding. Sharing it here in case anyone wants to play with the demo or explore the code.

Top comments (0)