Ok, you can now grab the MotionTracker source code. Version 2 eventually will include the other methods for detecting and tracking motion which I mentioned. For now I have just included code for the technique used in the demo.

For those of you without access to a webcam (and as an example of a practical use for this class) here is a short video demonstrating the program I wrote for the installation piece.

End of update

Webcam required (obviously…)

I’m currently working on putting up a show, part of which will be a live generative piece, constructed from the movement of visitors in the gallery space. So of course I needed a method for not only detecting but tracking motion. I’ve seen some of Grant Skinner and Mario Klingemann’s incredible experiments in this field, the most accurate of which used a coloured object in the camera’s field of vision (such as a ball or glove) to track movement, however I wanted the live response of the artwork to be a surprise to the viewer, and so asking them to hold a coloured object would have detracted from the overall impact.

If you ever want to be amazed by the human mind, try recreating the tasks that it performs, particularly those which we take for granted; you will quickly realise the incredible amount of computation which must be happening just to, for example, detect movement and track an object, or to discern more than one object and their relative motions, velocities and distances. This isn’t an essay on Neuroscience though so I’ll save that for another time…

Anyway; I researched the concept of motion tracking, and made some notes on my own ideas. A few possible approaches emerged.

One of the most attractive ideas was to divide the screen into a grid, and average the colours within each segment at regular intervals. The difference in brightness within each segment (from one calculation to the next) would determine whether or not motion had occurred in this area of the screen. Using this data, clusters of segments with a high rate of change could be used to assume an object in motion. This approach is quite accurate, however it would require a lot of getPixel and setPixel, as well as converting these results into Hue, Saturation, Brightness objects; all of which would be quite processor heavy. A decent computer could handle this fairly easily, however I had to also consider the processing load of the actual generative work running over the top.

The method I used in the end was much lighter, and providing the parameters could be adjusted to suit the environment, it would yield enough accuracy to provide a quite responsive tracking point for the artwork to follow.

Here’s how it works

• After the camera object is set up, it is passed to a MotionTracker class I wrote, which extends the Point object. The MotionTracker class contains two BitmapData objects; one representing the current data from the webcam, the other is used to store the previous frame.
• When the update method is called, the new frame is drawn on top of the previous using the difference filter.
• The result then has a ColorMatrixFilter applied to it, increasing the contrast of the image and dropping the darker areas (with less movement) further into the background.
• A blur filter is then applied in order to further reduce noise and to form blobs from areas where more movement is occurring.
• The threshold method is then called in the resulting BitmapData, effectively causing all near black pixels to be ignored and all light pixels (where movement has been detected) to be set to a certain colour.

So that takes care of the motion detection, but what about the tracking?

• First we call the getColorBoundsRect method on the BitmapData object, which gives us a Rectangle object representing the area occupied by pixels of the colour we used when applying the threshold filter.
• If the rectangle has an area larger than a specified constant, then sufficient movement is occurring and it can be tracked (choosing to ignore small areas of movement helps to eradicate noise caused by background and other interferences).
• We then find the centre point of this rectangle, and then move the x and y position of the MotionTracker instance to these coordinates, applying some gentle easing to give more continuity to the movement.

I will post some source code once the MotionTracker class has been refined, and once I have build a nicer API so that, amongst other things, you can create your own UI for tweaking parameters at runtime; a useful feature if you have requirements such as mine where getting the most accuracy from a particular environment is important.

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!

Download the Cellular Automata source code (AS3)

Speed
My old server was SLOW, and I apologise for that. The ridiculous thing is, it got slower and slower as time went on! Proportionally, my bounce rate went up, and so I finally decided that enough is enough. So I moved to Smudge, and in the UK at least everything is now running at top speed.

Coherence
As I am also in the process of rebuilding my portfolio site, I felt it was time to integrate this with my blog, daily sketchbook, client area and webmail. The later sections will be arriving soon so I’ll let you know.

Time
I’ve been a terrible blogger lately. Ironically, I have been at my most productive, but simply have not had the time to write tutorials or to clean up my experiments before sharing them with you. The plus side is, I now have several projects and experiments to put up here which will be appearing in a quick but intentionally staggered manner.

Motivation
I am a firm believer that change is as good as a break, and since I have had both (with respects to this blog at least) I now feel more prolific and will make sure you share in the bounty. Several old source codes need updating and refining, and as my Actionscript 3 skills have got much sharper in the last few months there will be plenty of source code appearing soon, as well as drawings and other creative projects.

On the whole, this new site is in shape, but it is still a work in progress, and so if you have any problems, suggestions or comments then let me know and get involved with the discussions on the posts.

Thanks for coming back – see you soon!

Ok, so there’s not much to say here!

I’m no mathematician, but I’ve been working on putting together a simple particle engine which harnesses the awesome power of Actionscript 3.

My reasons for attempting such a project are purely artistic, as a large amount of work for my next exhibition is generative, and is made by using various rendering methods to map the movement of particles in a system. More posts relating to this will be coming up, including my solution for simulating organic lines in Flash, using a custom pencilLineTo method. I’m excited about this one in particular, as it means I can produce complex generative work using AS3, but maintain the appearance of hand drawn work.

Anyway, more on that later! For now, here is a rather cute tester for the particle engine I mentioned, using the alphabet. So it’s educational as well as fun; if you’re 2 years old and have eyes fast enough to follow the letters that is.

You will see in the source code that certain features are there in parts, but have not been properly implemented. It’s work in progress though (no collision yet for example), but I felt like sharing it in its current state.

Look at them go! Stupid primates.
Click ‘Spawn Platforms’ for a new layout, or play with the Platform and APE count steppers!

I finally found some time to play around with the AS3 physics engine, APE; something I have been meaning to do for a while now.

This is a pretty simple demo, and by no means pushes APE’s capabilities; however it should help introduce you to the API, as well as explaining how to create custom Classes which subclass the Group class in APE. This is a very useful method, as it means that you can build, for example, Classes for bridges, bone structures, Pinball style paddles (as I have done here) and use these to create scenes. Essentially, this is just a particle engine with bouncing particles and collision detection.
Though APE seems to lend itself very well to game development, I am no game developer. However, I do find the possibilities that APE holds very exciting. Here, I have used some basic artwork and added physics and collisions to it, something that could add a dimension to interactive experiments and even website interfaces. For example, it is extremely easy to use custom Sprites or MovieClips as ‘particles’ with collision, so interface buttons or images can become elements in a scene with their own mass, friction and elasticity! Cool.

I use FlashDevelop for Actionscript editing nowadays (which I highly recommend), so have included the project file in the source code. You will also find the Platform Class in there, which will show you how to build your own groups of objects using the APE API. The document Class will show you the basics of creating particles, assigning custom sprites to them and giving them properties which are used when they interact with the environment.

If I have a moment, I will go back and add more functionality, but I hope this demo will at least give an outline as to the potential of APE from a more artistic than mathematical point of view. If you want to know more, you can read the docs here, and download the APE engine here, but be sure to visit the creator’s site and send them some fanmail.

Have fun with it, but go easy on the Gorillas; they’re very irritable…

Having never been before, I thought I was in for an educational but dry few days of indulgent nerdiness; however I was proved very wrong. FOTB had its fair share of inside tips from Adobe and technical tutorials, but also a lot of inspirational talks which encompassed Flash but that were really more generalised observations about creativity, industry, art and computer science.

For me, the highlights were definitely Joshua Davis and Robert Hodgin, who are both masters and push any software they use to its creative limits.

If you didn’t go, make sure you book a ticket next year and I’ll see you there.

www.flashonthebeach.com

What happens when you let vista install drivers for you? Shit happens. But in this case, good shit.

I was playing around with flash and using the Camera class to save stills via the CS3 AIR extension. Unfortunately, my webcam drivers had not been installed correctly, but the results were some really interesting glitches.

You can see the full set and high res versions on Flickr

It got me thinking about the ByteArray and socket classes in AS3, with some experimentation, maybe there will be a way to screw up BitmapData in a similar way? Bring back the 90’s and the cool glitch art that seemed to be coming out more often then. It’s amazing what eye candy can be produced by malfunctions.

Welcome to the latest instalment of the Group 94 style scrolling menu tutorial! (With downloadable source files of course)

I have been very busy lately, and haven’t had a chance to share much code. I have been learning AS3 and have to say that I love it! It is much easier to adhere to OOP principles and building class based applications has many advantages.

Anyway, I received an email today from Adriaan, who was wondering how to convert the Group94 scrolling list into a menu system, with rollovers and click functions. I hacked the old source to do this, but thought it would be a good opportunity to revisit the ‘offset scroll’ idea within the contexts of a fully functional scrolling menu.

So here it is. I have built it into a simple class, which means you need to do very little to get it working :)

The class is very flexible, and you can assign functions and parameters to each menu item that you add. This can mean calling the same function with different parameters, or entirely different functions for each item.

Adding menu items is as brilliantly simple as newMenuItem(label, function, parameters)

You can download the source code and pick it apart all you like. However, here is a quick explanation of how to use the G94Menu class.

Firstly we import the classes:

import com.soulwire.g94menu.G94Menu;
import com.soulwire.g94menu.MenuItem;

MenuItem is linked to a movieClip in you library, so you can use any style of menu item you like.

Now, we create a new instance of the G94Menu class and add it to the stage.

exampleMenu = new G94Menu(3, 1, 25);
addChild(exampleMenu);

The parameters the class constructor requires are:

• Visible items: The amount of items visible at one time
• Item spacing: The gap between each item
• Item offset: How far the items scroll up or down as they fly off to the top or bottom

Then we simply add as many items as we want using the new MenuItem constructor, for example:

myMenu.addItem(new MenuItem('Text', func, { params } ))

Here is a breakdown of the parameters you pass to the MenuItem constructor inside the addItem method:

• Item label: A text string which will be the visible label of the item
• Function: This is optional, but if present will make the item a clickable button, executing this function when clicked.
• Parameters: This is an object containing as many parameters as you need. Again, this parameter is optional, and only needed if you have passed a function and it requires parameters.

Now we create a function that will be called when a menu item is clicked:

function someFunction (e:MouseEvent)
{
	if(e.currentTarget.params != null)
	{
		var info:Object = e.currentTarget.params;
		trace(info.page);
	}
}

In this example, we check that the parameters are not null, then access the parameters object using e.currentTarget.params. If your function will open a link (for example), and you pass a URL identified in the parameters object as pageLink, then you can use this by calling e.currentTarget.params.pageLink.

Lastly, to listen for mouse clicks on the scroll arrows, and to enable the mouse wheel, both of which will scroll our menu up or down, we add some event listeners:

function enableScrolling():void
{
	btnUp.buttonMode = btnDown.buttonMode = true;
	btnUp.addEventListener(MouseEvent.CLICK, exampleMenu.scrollUp);
	btnDown.addEventListener(MouseEvent.CLICK, exampleMenu.scrollDown);
	stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
}
 
function onMouseWheel(e:MouseEvent):void
{
	e.delta <0 ? exampleMenu.scrollDown() : exampleMenu.scrollUp();
}

The scrollUp and scrollDown methods can be called whenever you like (i.e. remotely) on any instance of the G94Menu class.

Once again, I really hope this is useful, even if it is just a simple introduction to Actionscript 3 and writing classes.

Thanks to Adriaan and all of you who have been commenting for inspiring me to update this example.

If anyone wants to use this in older projects, and needs an AS2 version, please let me know and I’ll convert it when I get the time.

Disabled Algebra is a showcase for the incredible music of Jason kerley, aka Blackpepper.

It was also my first venture into Actionscript 3.0, using the computeSpectrum function to visualise streaming audio.

Disabled Algebra is build around a 3D engine I put together, which uses Fuse to tween the camera in 3D space. There are also four distinctive music visualisations, one for each track on one disc of the release.

All visualisations are dynamic, and some interactive also, so play with the mouse. They utilise a basic Actionscript 3 mp3 player I built to stream the music, and the user can scrub through the track with the visualisation reacting as they do so.

Check out some Actionscript 3.0 sound visualisations on www.disabled-algebra.co.uk.

You can buy Blackpepper’s music from Dirty Demos

I built this circular version of the group94 style scrolling menu for a flash website awards showcase I was asked to work on. The original design was based around circles, but we ended up redesigning as parts of the interface (not this menu!) were too processor intensive.

Ok, so part two of my tribute to Group 94’s menu system! This is again inspired by the Group 94 (at least they are most famous for it) shuffle menu in Flash, which pushes items off the top and bottom as the menu shuffles into place.

This version is circular though, and each menu item rotates around a pivot. Initiating the prototype with particular variables will define the spacing between items, the radius of the Group 94 circular menu and the amount of items visible at one time.

Please note, this is in no way a rip of the Group 94 menu. In fact, I haven’t even seen a circular version which is why I made it. I have no idea how Group 94’s actionscript looks, or how they would have approached this style of menu. I do know however, that they have produced many innovative navigation systems, and so this is a simple tribute to their talent and innovation.

As with the regular group 94 scrolling menu, you will need Fuse installed, though all it does is handle tweening so you could use tweener or the inbuilt Flash tweening functions. I just prefer Fuse!

How it is done.

First import Fuse for tweening, then setup the array we will use for the menu:

import com.mosesSupposes.fuse.*;
ZigoEngine.simpleSetup (Shortcuts,PennerEasing);
 
var planets:Array = new Array ();
planets.push ("Mercury");
planets.push ("Venus");
planets.push ("Earth");
planets.push ("Mars");
planets.push ("Jupiter");
planets.push ("Saturn");
planets.push ("Uranus");
planets.push ("Neptune");
planets.push ("Pluto");

Then some very basic functionality for each menu button. I have ommited rollOvers for the demo…

MovieClip.prototype.circNavBtn = function (id:Number, par:MovieClip, name:String)
{
	this.pos = this.id = id;
	this.par = par;
	this.btn.txt.text = name.toUpperCase ();
 
	this._rotation = 90;
	this._alpha = 0;
 
	this.onPress = function ()
	{
		this.par.circNavRot (this.pos);
		this.activeBtn ();
	};
};

Then two small prototypes to handle the activation and de-activation of the buttons when the scroll function is called:

MovieClip.prototype.activeBtn = function ()
{
	activeNavBtn.inactiveBtn ();
	activeNavBtn = this;
 
	this.btn.scaleTo (200,0.5);
 
	this.enabled = false;
};
 
MovieClip.prototype.inactiveBtn = function ()
{
	this.btn.scaleTo (100,0.5);
};

Then the main shuffle or rotation function, which designates tweens to all visible movieClips and hides those outside of the visible items range.

MovieClip.prototype.circNavRot = function (num:Number)
{
	var diff:Number = num;
 
	for (var i:Number = 0; i < this.btns.length; i++)
	{
		var btn:MovieClip = this["navBtn" + i];
 
		btn.pos -= diff;
 
		if (Math.abs (btn.pos) < this.visItems)
		{
			var offset:Number;
			btn.pos != 0 ? (offset = btn.pos > 0 ? 15 : -15) : offset = 0;
 
			var rot:Number = offset + (this.spacing * btn.pos);
			var alph:Number = 100 - ((100 / this.visItems) * Math.abs (btn.pos));
			var scl:Number = 100 - (5 * Math.abs (btn.pos));
 
			btn.rotateTo (rot,0.5,"easeOutExpo");
			btn.alphaTo (alph,0.5);
			btn.btn.scaleTo (scl,0.5);
		}
		else
		{
			btn.stopTween ("_alpha");
			btn.stopTween ("_rotation");
			btn._rotation = btn.pos > 0 ? 90 : -90;
			btn._alpha = 0;
		}
 
		btn.enabled = Math.abs (btn.pos) < this.visItems;
	}
	this["navBtn" + num].activeBtn ();
};

Now we setup the circular scrolling menu on a movieClip:

MovieClip.prototype.circNav = function (array:Array, radius:Number, spacing:Number, visItems:Number)
{
	this.btns = new Array ();
	this.spacing = spacing;
	this.visItems = visItems;
 
	for (var i:Number = 0; i < array.length; i++)
	{
		var navBtn:MovieClip = this.createEmptyMovieClip ("navBtn" + i, i);
		var btnTxt:MovieClip = navBtn.attachMovie ("btn", "btn", 0);
		btnTxt._x = radius;
 
		navBtn.circNavBtn (i,this,array[i]);
		this.btns.push (navBtn);
	}
	this.circNavRot (0);
};

Her we dynamically create a movieClip, position in, then call our prototype to create the lovely Group94 style menu…

var testMenu:MovieClip = this.createEmptyMovieClip ("nav", 0);
testMenu._x = 20;
testMenu._y = 112;
 
testMenu.circNav (planets, 60, 15, 4);

And finally we add the ability to use the mouse wheel to scroll the menu. otherwise we just click the menu items:

var mouseListener:Object = new Object ();
mouseListener.onMouseWheel = function (delta)
{
	var navIndex:Number = activeNavBtn.id;
	if (delta < 0 && activeNavBtn.id < planets.length - 1)
	{
 
		testMenu.circNavRot (1);
		testMenu["navBtn" + (navIndex + 1)].activeBtn ();
	}
	else if (delta > 0 && activeNavBtn.id > 0)
	{
		testMenu.circNavRot (-1);
		testMenu["navBtn" + (navIndex - 1)].activeBtn ();
	}
};
Mouse.addListener (mouseListener);

I hope this is useful to someone! If you find a home for it, please let me know.