Saturday, June 19, 2010

Flock in a cloudy blue sky

Click on the image to load the canvas demo (requires FireFox or non-IE browser)

I took the existing Javascript boids implementation from Coderholic, and made it look pretty with swallows on a cloudy background.

The birds follow the standard 3 rules for Boids as first implemented by Craig Reynolds

Separation: steer to avoid crowding local flockmates
Alignment: steer towards the average heading of local flockmates
Cohesion: steer to move toward the average position of local flockmates

These simple rules for each individual leads to the group behavior - there is no central group intelligence or control. Flocking behaviors like this are often described as being emergent.

Update: (23/9/10) There is now an initial pause as the simulation runs 500 steps before displaying the boids. This removes the ugly initial craziness before they start flocking properly.


  1. I've been reading over your blog, really great stuff. One quick question though, why not add google's excanvas to support IE until they jump on the HTML 5 ball?

  2. Thanks. A reasonable person would do that, but after being driven to an uncontrollable rage from dealing with IE problems at work, on my own time I'm just going to pretend IE doesn't exist.

    Here's a nice video of flocking birds...

    If you want to ever try something that large, check out: - oh, and don't use Javascript :)