Flocking Simulation: Boids (JavaScript)

In this project I fiddled around with a boids simulation, making them fly through space and underwater (using the three.js JavaScript framework). I run through some of the basic steering behaviours and how to combine them, building them up into something that looks complex and interesting. I also taking the flocking simulation and apply it to an underwater scene and an outer space scene, describing any tweaks and changes I make along the way.
Can't promise the code is bug free, but its all available online on github. Feel free to grab it, fork it, laugh at it, etc.
What's covered:
* Steering Behaviours
I'll go over the steering behaviours we used in this particular flocking simulation (separation/alignment/cohesion), how they're derived, and how they're combined.
* Underwater Scene
Using the working behaviours and boids from the first section, I threw together a small underwater scene with a few (poorly modelled) fish. I describe what tweaks I made to the flocking simulation and steering behaviours to get the behaviour I wanted.
* Space Scene
Again, took the existing flocking simulation and tried to apply it to a more "Battlestar Galactica" type of scene, with ships and explosions and stuff. Described a few of the tweaks and changes I applied.
Github: github.com/simondevyoutube/Fl...
Wikipedia: en.wikipedia.org/wiki/Boids
Craig Reynolds: www.red3d.com/cwr/boids/
#flocking #boids #gamedevelopment

[@amerjabar7825]

I found gold! Probably the best channel on pure and creative programming with short videos! Thank you for these great videos. I suggest you make videos on low-level programming versus high level and how it works with the hardware in the matter of performance, speed and security.

[@nomadshiba]

not even using THREE.js but watching ur stuff for the techniques you use

[@AlexDemskie]

I can't imagine a better and more concise tutorial on this topic. Well done.

[@simondev758]

Thanks, appreciate the comment! Got any topics in mind for a future video?

[@icepickonefive]

Thank you for your great tutorials, you concisely explain every topic so well and give so much insight beyond the docs!

[@TheNerdyDev]

Awesome stuff on Three.js. Really liked it Simon. Most of the tutorials on Three.js that I have seen is that silly rotating cube. This was superb. Keep it coming :).Top notch stuff

[@simondev758]

Thanks! I'm gathering some ideas on what to do next, might make a quickie Minecraft clone in the browser. Got any ideas for what you'd like to see down the road?

[@simondev758]

Like & Subscribe, thank you! What other scenarios do you think boids would work well in?

[@AleksanderFimreite]

Fun fact, I would summarize fish behaviours in 3 separate categories actually. - Swimming (mostly simular to what you implemented, constant smooth forward motion) - Feeding (Quite random seek locations, quite random speeds, quite random rotations inc. upside down) - Scouting (Staying still for a random time, and moving to a new location quite rapidly)

[@simondev758]

Ooh it'd be fun to revisit this with better behaviours.

[@AleksanderFimreite]

@@simondev758 I agree. If you need some reference material, some fish I can think of off the top of my head which frequently behave like the other two types would be: For the feeding behaviour, most fish when there is food nearby, but the following do it more so than other types of behaviours. Guppies, Platies, Discus, Angelfish. Most tetra type of fish, for example Neon Tetras tends to do a lot of scouting behaviour. There exist many types of videos showing each of these behaviours I'm sure. Some fish also tends to do a rapid vertical movement without facing vertically. Which I have found to be a challenge using boids. But perhaps there is some trickery to be achived by not having the mesh exactly look at the heading direction all the time.

[@simondev758]

Interesting, yeah the boids implementation I did, heading is locked to velocity. This is interesting though, might be an excuse to merge all of this with a sort of eco-system simulation idea I've wanted to do.

[@matheushussain]

Hi SimonDev! Thankyou so much for the vid, really awesome to see this topic explained so clearly!

[@simondev758]

Glad it was helpful, let me know if there are other things you want covered.

[@alichamas63]

Love your content man. Reminds me of a technique I used once where you render an offscreen cloud texture and use the grayscale value of the current pixel at the boids location to determine the angle of rotation. Makes for nice flocking movement but doesn't take other objects into consideration. Interestingly because they're all following the same cloud texture thier flight path looks cohesive.

[@WhoIsMrKemp]

I love it, especially the ending... I'm learning about boids but I'm a very visual person...(been drawing all my life)... but I've been stuck on boid design(squids or spaceships). If I do space ships I want to use missiles or grappling hooks but can't figure out how to adjust the code of the laser to get the arching affect instead of the straight line.... if I go squids I'm a little confused on how to get the tentacle effects. Both the noodle effect when they swim and the use when interacting with something... Am I getting too caught up in the ideal of doing it in code and should maybe use a visual program? Or should I embrace this journey down this rabbit hole?

[@simondev758]

Not sure what you mean, you want to add missiles to the ships?

[@jasonjennings3913]

If you replace the random direction with a direction from a pathfinding algorithm, could you use this to have groups of units move in formation (like in RTS games)?

[@simondev758]

Most likely yeah.

[@MechanicalMooCow]

That's literally how Starcraft does it, so yes.

[@williamchamberlain2263]

Boids is best