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.

Thursday, June 17, 2010

LSystem 3

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


I added a zoom, and moved the Javascript into its own file.

A tip is to zoom with a very low iteration, as otherwise it is very slow. I am going to look at rendering to a buffer and allowing scrolling.

Monday, June 7, 2010

Falling Leaves



Click on the image on the left to load the canvas demo (requires FireFox or non-IE browser). As with all of these demos, try clicking reload a few times to see different random versions.

Just an idea I had while riding my bike home, looking at fallen leaves (it's the start of winter here)

I changed the l-system renderer to use curves which I think makes the trees look more natural. I also used the canvas wrapper to be able to get the position of the leaves as they are generated so I can animate them.

Update: (23/9/10) Added hack to make leaves appear to collect on the ground beneath the trees.