WebGL Flocking Boids
Flocking Animation Using WebGL, HTML, and Javascript
If you want to skip the background information you can view the final product below:
Browser Accessible Flocking Simulation
Flocking and Computer Animation
Flocking is a behavior exhibited in the natural world by living creatures such as migratory birds, schools of fish, and even crowds of humans. Flocking motion can be replicated by computers and animated for a realistic, natural motion effect, which has been used effectively in video games, simulations, and films to great effect.
Flocking motion of a group of autonomous creatures can be replicated by modeling a set of steering behaviors that drives the individuals boids' motions, including separation, alignment, and cohesion.
What is a "Boid"?
Carl Reynolds was the first person to coin the term "boid", which is any member of a flock whose motion is controlled by steering behaviors.
For an in-depth look into the history behind flocking modeling with computer animation, visit Carl Reynolds' boids web page (the father of flocking behavioral motion).
Separation: steer to avoid crowding local flockmates
Cohesion: steer to move toward the average position of local flockmates
Alignment: steer towards the average heading of local flockmates
Images and descriptions of steering behaviors found on Carl Reynold's boids web page:
http://www.red3d.com/cwr/boids/
The Initial Stages of the Project
For a computer animation class at RIT, one assignment was to create a flocking simulation. I completed the initial assignment using C# and XNA. Here is a video of the results:
You can see that the pyramid-shaped boids are following the path of the small cube, which has a programmatically determined path. While the cube is set to a fixed path, the individual boids are controlled by flocking behaviors which tell them to follow the cube while avoiding collision with one another.
Although it works, a few problems with this simulation are that the boids are not capable of fully autonomous motion (they need to have a cube to follow), and that it is limited to running on Windows only. My friend Mark Thill and I set out to change that with an overhaul to the project.
Project Overhaul with HTML5 and WebGL
Mark and I took what I had learned from the the initial version of the project and created a new flocking simulation from scratch using Javascript, HTML5, and WebGL to make it cross-platform and accessible via a web browser. The new version also allowed the boids to move autonomously without the need for a "leader" cube object. There were also improvements the expandability of the flocking system, allowing new behaviors, for example obstacle avoidance, to be created and later added to the system.
In the simulation, boids are spawned in random locations with random velocities. Immediately their steering behaviors begin taking effect and controlling their motion, causing them to flock together.
In the case that a flock reaches the edge of the simulation world, the boids will wrap around to the opposite side. When one boid wraps to the other side, it is no longer near the boids following it who have not wrapped yet. In order for them to continue their motion in the same direction, it was necessary to define a "detection" cone for the boids, so that they are only aware of boids in a cone in front of them. This way they don't worry about the boids following them.
Bonus: Scaring the Boids
I also added in a bonus feature: the boids in the live demo have an avoidance behavior that makes them "afraid" of the mouse cursor, so you can use your mouse to break up clusters and re-direct the boids.
You can check out a working example of the system here (works best in Google Chrome) :
Browser Accessible Flocking Simulation
Boids with moderate cohesion, separation, and alignment traveling in a school.
Boids with a very high cohesion forming a tight cluster.
These boids have low cohesion and high avoidance, making them spread out in a cloud.
Ongoing Work
Mark has continued to work off of the updated WebGL version and use it as the base for an interactive simulation of genetic algorithms. You can check his work out on GitHub:
https://github.com/thillm/Boids_WebGL
My goal with the project is to use it as a base to create an interactive app for iOS that allows touches and gestures to interact with the boids. Work on this "virtual pond" app is currently in progress so look for future updates here on my site.