So i did a minor face lift on my home page, and in the process I ported over some of my favorite code to use. That is Craig Renolds super awesome, boid behaviors. More specifically I ported my Objective-C Boid flocking class, this time around.

You can see it on the action on my site, move the ‘sun’ objects around you can create some interesting visual patterns depending where you place them. The cool thing about these SteeringBehavior’s is that they can be stacked.

For example on my site i’m currently using something like this:

for(var j = 0; j < obstacleCount; j++)
	var obstaclePosition = new Vector(parseFloat(obstacles[j].style.left), parseFloat(obstacles[j];
	boid.fleePanicAtDistanceUsingMultiplier(obstaclePosition, 200, 1);

boid.seekWithinRangeAndApplyMultiplier(mouseCordinates, 100, 0.69);

boid.handleEdgeWithBoundsObjectAndShouldWrap(bounds, false);

Which is saying, loop thru the obstacles array (that I created on page load, it simply contains the 3 suns which are themselves boids). The behavior here is ‘flee:PanicAtADistance:UsingMultiplier’, causing them to avoid the object, and REALLY avoid it if they get closer than ‘PanicAtADistance’, and multiplier adjust the strength of the behavior.

After it says, seek:WithinRangeAndApplyMultiplier causing all the Boids to go towards the mouse unless closer than a certain distance.

Below that we have, Boid.wander(0.2), which tells the boid to ‘wander’.
Wander is an interesting behavior, because it is not random motion. That would look like a jittery mess.
Wander is in the Boid creation function at the top of the file.

boid.setWanderRadiusAndLookAheadDistanceWithMaxTurningAngle(16, 40, 0.3);

It takes the end motion is controlled by three properties. Let’s give them names for reference.


I find the best way to picture that type of motion is to imagine having a stick pointing infront of you as you walk. That stick would represent the LookAheadDistance.
The wander radius can be thought of as an imaginary circle around the leading part of the stick.
Finally we have MaxTurningAngle, which represents say 5-10 degrees left or right.

It’s easy to imagine how these 3 properties combined, can create a nice wandering pattern when you paint this scenario. The stick in front of you, can be turned ‘MaxTurningAngle’ to the left or right, each step. From that point, randomly pick a point around it at most WanderRadius away from the tip of the stick.

Do that each step, and you will be wandering randomly but never make a giant unnatural looking change in position. Playing with these variables yields highly different results. For example imagine if you had only a stick the length of a spoon. You would be moving a lot more sporadically compared to someone using a long broom stick and turning that 5 degrees each time.

Hopefully that shows how cool Wander really is, and why it’s more than just random walking.

Finally we have the edge handling function, which wraps the boids pacman style on the screen when they reach an edge.

It’s really quite amazing how you can stack these behaviors up.
Here are the javascript files themselves: (required by Boid.js) (Usage example)


Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.