I’ve uploaded the Boid source code. Sorry for the delay. I’ve also included some basic examples of how you can create nice behaviors using the Boid class. If you set Main.as as your document class then you’ll see that within that you can specify the demo to run when you compile.

The basic demos included are:

• Chase – Boids chase each other
• Flock – Boids flock together with some wander
• Graphics – How to use custom graphics with a Boid instance
• Seek – Boids seek the mouse position
• Wander – You guessed it, they wander

I’ve commented all of the methods and properties and there is also documentation (open index.html in the docs folder) to get you started. Before you mention it, yes, there is some redundant code ;) (such as the constrainToRect method which doesn’t really work) but I need to do some optimisations anyway so I just left it as is for now, rough and ready.

Download: AS3 Boid Class & Demos

It’s been a little while since I posted! I’m in the process of moving house and office, plus I’ve been repeatedly slammed at work. Apologies to those of you who’ve left comments and haven’t got much by way of reply. I’ll hopefully be visible again over the next few weeks.

I actually coded this experiment back in November, but only recently decided that enough was enough and hijacked an evening so I could tidy up the code and build a UI for the demo.

Since coming across Craig Reynold’s paper; “Steering Behaviors for Autonomous Characters” whilst I was researching complexity theory for a university project (it wasn’t as academic as it sounds!), I’ve found myself becoming fascinated by flocking and swarm beahviors and the notion that you can create complex systems from relatively simple components. Much like the Cellular Automata, you can program an agent to have only a limited set of abilities and awareness, define a set rules for it to follow, and then create a multitude of instances of the agent to see what patterns begin to emerge through their interactions.

Flocking is a great example of this, as Reynolds demonstrated. His agents, or “Boids”, could perform certain maneuvers, such as seeking a target, fleeing from a predator, avoiding obstacles or wandering randomly. Combine these behaviors though, and allow each Boid to consider it’s neighbors when deciding on its locomotion, and complex behaviors begin to emerge.

The most infamous of these combinations is that of separation, cohesion and alignment, as it can produce a swarm behavior reminiscent of flocking birds or shoals of fish.

Separation means that each Boid attempts to maintain a certain distance from its immediate neighbors, Cohesion ensures that each Boid attempts to stay close to the centre of the immediate flock and Alignment will calculate the average heading of the flock and steer towards this vector.

Each of these behaviors is fairly simple in isolation, but the results can give the impression that some significant AI is at work, when all that’s really going on is some simple vector math.

Robert Hodgin has done some amazing work with flocking behaviors, so too has Psyop, and of course Reynolds is the daddy of all this stuff. There are some good libraries out there too, such as OpenSteer, and Keith Peters talks about this too in Advanced Actionscript Animation.

I’ve been trying to sharpen up my mathematical skills lately though, and was eager to play around with the new (new when I created this experiment anyway!) Flash Player 10 API – the 3D aspects in particular. So at the core of the Boid class are the native Vector3D, Matrix3D and PerspectiveProjection classes. Ok, so we’ve all got our own Vector3D and Matrix3D class in our library, but I thought it’d be good to use Adobe’s, especially seeing you can then apply the Matrix3D directly to a DisplayObject’s transform property.

Another cool feature I came across was the Matrix3D.pointAt() method, which will rotate a Matrix around a given axis and in this case can be used to orientate the Boid to it’s heading vector… Nice!

I’ve had a lot of fun putting together the Boid demo anyway – tweaking various settings on the individual Boids as well as the group behaviors (my personal favorite is ‘Chase’ mode with ‘Number of Boids’ cranked right up!).

If you have a play with the settings though, you’ll quickly see what I mean about the plethora of different effects that can be accomplished, even by simply adjusting the locomotive abilities of the Boids.

Due to said lack of free time as of late, I haven’t documented the code fully, though I have started and so if anyone is interested in the source code then please say so in the comments and I’ll try and finish the job (after a mere 6 months!) and put it up for download.

Related posts:

1. Perlin Noise Flow Field
2. AS3 Shuffle Grid Class
3. Double Sided 3D Plane in FP10

It was a rainy Sunday and I found myself playing around with perlin noise for a couple of hours.

The idea was to create a simple flow field using the BitmapData perlinNoise method, and use this to influence the movement of autonomous agents. There is no complex vector math or steering behaviours, just some simple logic for how a particle or agent reacts to the current pixel it is positioned over.

Despite its simplicity, by changing parameters such as the level of offset per frame or the x and y frequency, it is possible to create some interesting effects which resemble the movement of flocking birds, shoals of fish or indeed more fittingly for this time of year; panicking Christmas shoppers desperately hunting for gifts.

At each update step, an agent will grab the value of the pixel it is on top of and alter its trajectory based on the brightness of the pixel. Throw in some variance relating to how strongly an individual agent will react to this value and some interesting patterns begin to emerge.

The basic logic I’m using in this demo is as follows:

// Get the pixel the agent is over
var pixel:uint = noiseBitmap.getPixel( agent.x, agent.y );

// Find the brightness of the pixel
var brightness:Number = pixel / 0xFFFFFF;

// Set the angle and the speed according to brightness
var speed:Number = brightness * agent.speed;
var angle:Number = brightness * 360 * Math.PI / 180;

// Update the agent's position / rotation
agent.x += Math.cos( angle ) * speed;
agent.y += Math.sin( angle ) * speed;
agent.rotation = brightness * 360;

Feel free to download the source code and start tweaking the many variables. Adding further life to the agents by introducing collision or allowing additional individual traits beyond simply speed and wander might be one option worth exploring.

Have fun!…

Related posts:

1. Flipping you the Boid
2. AS3 Webcam Motion Tracking
3. Double Sided 3D Plane in FP10

Inspired by Conway’s game of life, I decided to program a 2 dimensional Cellular Automaton in Actionscript 3.

I had been reading up on complexity theory for a recent project and the Cellular Automata just kept on rearing its head. Of course it displays the fundamental qualities of complexity; starting with an object following a set of simple rules and then creating multiple instances to form complex and unpredictable patterns.

In terms of visualisation, the Cellular Automata is interesting because it has potential to be used for many applications. Complexity Theory and Systems Theory are used to simulate various growth patterns such as that of a city or population. My personal ideas are of course much simpler, one being a 3 dimensional version which uses Papervision 3D; and, rather than switching cells on or off, would incrementally grow or shrink shapes in 3D space to create landscapes or cityscapes whose growth is determined by the development of the Automata.

This particular Actionscript 3 version is a fairly direct port of the 2 dimensional ‘Game of Life’ permutation, but is fun to play with none-the-less.

The rules are as follows:

Each cell can be either empty, new, alive or dead. As the grid updates, each cell observes its 8 neighbouring cells (or less if it is at a corner or edge) and changes it’s state depending on the state of said neighbouring cells.

• If less than 2 neighbours are alive, the cell dies (loneliness)
• If more than 3 neighbours are alive, the cell dies (overcrowding)
• If a living cell has 2 or 3 living neighbours it continues to live
• If a dead cell has 3 living neighbours it comes to life

There are many initial shapes which either form patterns of perpetual growth or at least interesting shapes as the system updates; some simply die out. Have a play and see if you can find shapes, or combinations of shapes which do interesting things. It’s quite addictive!

I have added a few presets to illustrate how certain groupings of cells that are alive when the system starts can behave in the grid as the automaton runs, and also a randomise button which will create a random grid of empty and alive cells and can form some interesting patterns as the system iterates and emergence begins to kick in.

The source code is of course available, so have a play with that and see what happens when you change the rules or create bigger grids.

A quick note about the Actionscript.

I have created a CAGrid class for building Cellular Automata, which can be instantiated at any size and with any amount of rows and colums.

/**
* A grid of cells used to produce a 2 dimensional cellular automata
*
* @param	gridSize	The dimensions in pixels of the grid
* @param	segments	The number of cells in each row or column
* @param	cellPad		The padding (or spacing) inside each cell
*/

public function CAGrid( gridSize:int, segments:int, cellPad:int )

The CAGrid class contains methods for drawing the grid, resetting the grid, updating the system, randomising cells, saving configurations and loading presets, and is automatically redrawn when the size or rows / columns are changed during runtime using the size and segments setters respectively.

The Cell class contains a simple setter for status, and some constants for easy reference to the cell’s state. In this example the cell is drawn by choosing a colour which corresponds to the state of the cell, but a movieclip with labelled frames (for example) could just as easily be used to create more visually interesting results.

Oh, and included are some custom skinned CS3 components (button and comboBox) which look a bit like the Vista skin, so maybe those are goodies in themselves!

Related posts:

1. Flipping you the Boid
2. Recursive Polygon Subdivision
3. Perlin Noise Flow Field