Update

Ok, you can now grab the MotionTracker source code (AS2 & AS3). 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 to view the demo (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.

Download: AS3 Webcam Motion Tracking

You can also download the AS3 Motion Tracking source code from the soulwire code repository.

Related posts:

1. BitmapData Colour Palette
2. Fit DisplayObject into Rectangle
3. Perlin Noise Flow Field

In PHP there is a very useful function called array_count_values. It sorts an array by returning a 2 dimensional array consisting of non duplicate elements as keys, and values determined by how many times these elements appeared in the original array.

update 09.10.10

This can be achieved (in AS2 and AS3) in a much simpler manner, using the following function or prototype:

Array.prototype.countValues = function() : Array
{
	var i, j = -1, c, o = {}, r = [], v, n = a.length;
	for(i = 0;i < n;++i) (c = o[v = a[i]]) ? ++c[1] : r[int(++j)] = o[v] = [v,1];
	return r;
}

So, for example, an array [“red”,”green”,”blue”,”red”] would be converted into [“red” => 2, “green” =>1, “blue” => 1]. Duplicate elements are removed and the new array indicates how many times each, now unique value occurred in the array.

Unfortunately, Actionscript has no such function built in, so I made one. It is a modification of Senocular’s array.unique() prototype (which you can find in his Actionscript library), however rather than simply returning a unique array, it returns the 2 dimensional array mentioned above.

Array.prototype.countValues = function ()
{
	var z, x = this.length, c = false, a = [], d = [];
	while (x--)
	{
		z = 0;
		while (z < x)
		{
			if (this[x] == this[z])
			{
				c = true;
				d.push (this[x]);
				break;
			}
			z++;
		}
		if (!c) a.push ([this[x], 1]);
		else c = false;
	}
	y = a.length;
	while (y--)
	{
		q = 0;
		while (q < d.length)
		{
			if (a[y][0] == d[q]) a[y][1]++;
			q++;
		}
	}
	return a;
};

Example useage:

var myArray:Array = new Array ("the", "cat", "sat", "on", "the", "mat");
var newArray:Array = myArray.countValues ();
trace (newArray);
// Returns [[mat,1],[on,1],[sat,1],[cat,1],[the,2]]

This prototype should work with arrays of objects, though it was designed for simple datatypes such as strings.

Note: This prototype is case sensitive for strings. If you want it to be case insensitive, just modify to, for example:

if (a[y][0].toLowerCase () == d[q].toLowerCase ()) a[y][1]++;

Related posts:

1. Splitting Strings
2. Dynamic Stacking
3. BitmapData Average Colours

Update: AS3 Version using TweenLite is available here

In this experiment, you can drag the boxes; when you release them the stack will shuffle to accommodate the dropped box.

I have recently been working on building an application in which I wanted to use Photoshop style ‘layers’ which the user could create, drag onto different depths and delete.

The basic idea was for the user to click and drag ‘layers’, and drop them in between others. This would cause the other layers to reposition to accommodate the new layer and to fill the gap which it had left in it’s old position. Get it?

Perhaps I’m just a bit dim, but I was surprised at how many difficulties I encountered when trying to sort the boxes or ‘layers’. I began taking the approach of calculating whether the surrounding layers were above or below, and moving them up or down accordingly; but with this approach I found that deleting layers or adding new ones caused the system to go a bit crazy.

As usual, it was the simple and elegant approach which eventually yielded the solution. I basically handled all of the movement from a single, straightforward array. The array was shuffled based on a nifty little prototype I wrote for extracting and reinserting elements (essentially shuffling without randomness), from which all movement calculations (i.e. the eventual positions of the shuffling boxes) could be made.

Array.prototype.shuffle = function (x, y)
{
	var i:Number = this.slice (x, x + 1);
	this.splice (x,1);
	this.splice (y,0,i);
};

The shuffle prototype itself could be very useful, as it pulls items out of the array, and by reinserting them; muscles the other elements outwards around it – no complicated calculations needed for determining where the elements go thanks to some really basic build in Flash Actionscript features. Also, by omitting one line of code, the prototype could be used to simply insert items into an array at a particular position (insertAt(value, index) or something along those lines).

I have attached a bare bones example for you, though I assure you, you can do great things with this script. The menu I was working on will probably make an appearance on Soulwire once the program is finished. One example of its usage would be to associate each box with a layer elsewhere; for example a Stack of photos which are depth ‘shuffled’ through the easy manipulation of their affiliated boxes.

You can download the FLA here above, but here is the basic commented code. It is simple but works quite well.

// Include the Zigo tweening prototypes to make life easier
#include "lmc_tween.as"

// Create the main holder for the boxes
var menu:MovieClip = this.createEmptyMovieClip ("menu", 0);
menu._x = menu._y = 20;

// Set up our Arrays and counters
var boxes:Array = new Array ();
var boxCount:Number = 0;
var boxGap:Number = 37;

/*
The core 'SHUFFLE' function
This pulls out an array item at a given index and inserts it back into the array
at another index. The other array items are consiquently 'pushed' outwards from
the element, so our new array reflects the visual appearance we want for the
shuffled menu. We can now 'sort' our menu based on this modified array...
*/
Array.prototype.shuffle = function (x, y)
{
	var i:Number = this.slice (x, x + 1);
	this.splice (x,1);
	this.splice (y,0,i);
};

// Our sort function
function sort ()
{
	var count:Number = boxes.length;
	for (var i = 0; i < count; i++)
	{
		// Check which ID is at this point in the array
		var id:Number = boxes[i];
		// Find the corrosponding box
		var box:MovieClip = eval ("menu.box" + id);
		// Calculate the position the box should be at
		var y:Number = i * boxGap;
		// Alter it's id to it's new position
		box.id = i;
		// Tween it there (or just use box._y = y)
		box.tween ("_y",y,0.8,"easeInOut");
	}
}

// Creating new boxes
function addBox ()
{
/*
We use getNextHighestDepth() because of the swapDepths() function used
when the buttons are pressed. This creates new levels and so could
cause problems if we just create boxes at depths based on the length
of the boxes array.
*/
	var d:Number = menu.getNextHighestDepth ();
	var i:Number = boxCount;
	// We could use Push(), but I want the boxes stacked, with newest on top
	boxes.unshift (i);
	// Attach the box
	var box:MovieClip = menu.attachMovie ("box", "box" + i, d);
	// Initiate the box
	box.initBox (i);
	// Increase the counter
	boxCount++;
	// Sort the boxes
	sort ();
}

/*
This is a simple function which can be called to remove boxes. It splices the array and
resorts the stack accordingly.
*/
function deleteLayer (id)
{
	var box:MovieClip = eval ("menu.box" + boxes[id]);
	box.removeMovieClip ();
	boxes.splice (id,1);
	sort ();
}

// The box actions
MovieClip.prototype.initBox = function (num)
{
	this.id = num;
	this.name.text = "Box " + num;

	this.onPress = function ()
	{
		var top:Number = boxCount + 1;

		this.swapDepths (top);
		this.startDrag ();
	};

	this.onRelease = this.onReleaseOutside = function ()
	{
		this.stopDrag ();
		// Slide back to the edge
		this.tween ("_x",0,0.8,"easeInOut");
	/*
	Find the original position, and the new position, based on the
	location of the draged box in relation to the other boxes.
	*/
		var x:Number = this.id;
		var y:Number = Math.round (this._y / boxGap);
		// Call our shuffle function based on these calculations
		boxes.shuffle (x,y);
		// Sort the boxes based on our shuffled array
		sort ();
	};
};

// Add some boxes to test it!
for (var i = 0; i < 5; i++)
{
	addBox ();
}

Related posts:

1. Dynamic Positioning Continued
2. Dynamic Positioning
3. Group94 Style Menu

Following another post regarding using stage listeners to dynamically resize and position MovieClips in Flash, I was asked to upload and FLA as an example. The previous code can just be pasted into the actions panel and will run without any MovieClips needed, and was designed to show the StageListener function rather than showcase a particular dynamic layout.

Download: Fluid Flash Layout Example

Anyway, here is a slightly amended version of this simple technique which uses MovieClips, and produces a fluid layout based on percentages (much like the classic CSS three column layout).

Again, this can be easily modified to include more elements, margins etc. Note – if you want to add content to the Movieclips (for example A menu in the left column), simply make the resizable elements a background MovieClip inside each parent MovieClip.

For instance, our left column would then be resized by using:

leftCol.backGround.pos(x, y, w, h);

The content inside the leftCol MovieClip would then maintain its size as the background resizes. Easy.

// Setup the Stage properties
Stage.scaleMode = "noScale";
Stage.align = "TL";

// Variables (in pixels)
var headHeight:Number = 100;
var footHeight:Number = 50;

// Variables (in percent)
var leftColWidth:Number = 25;
var mainColWidth:Number = 60;
var rightColWidth:Number = 15;

// Prototype function to position MovieClips
MovieClip.prototype.pos = function (x, y, w, h)
{
	this._x = x;
	this._y = y;
	this._width = w;
	this._height = h;
};

// Out main function
function setStage ()
{
	var sw:Number = Stage.width;
	var sh:Number = Stage.height;
	// Calculate percentages based on Stage dimensions
	var Lw:Number = sw / 100 * leftColWidth;
	var Mw:Number = sw / 100 * mainColWidth;
	var Rw:Number = sw / 100 * rightColWidth;
	var Hp:Number = sh - (headHeight + footHeight);
	// Position / resize our MovieClips
	header.pos (0,0,sw,headHeight);
	leftCol.pos (0,headHeight,Lw,Hp);
	mainCol.pos (Lw,headHeight,Mw,Hp);
	rightCol.pos (Lw + Mw,headHeight,Rw,Hp);
	footer.pos (0,sh - footHeight,sw,footHeight);
}

// Add a listener
var stageListener:Object = new Object ();
Stage.addListener (stageListener);

// When the Stage dimensions change...
stageListener.onResize = setStage;

// Call our function to set it all up right!
setStage ();

Related posts:

1. Dynamic Positioning
2. Dynamic Stacking
3. Hello Dynamic Sprite

I have always liked the neat and compact menu system Group94 often use in their projects. It is really useful for lists or menus and is also of course very elegant.

I don’t know how Group94 do it, but here is my attempt. I have created two prototypes to make it easy to use multiple times within a project.

Download: Group94 Style Scrolling List

This example just uses a simple list, but the actionscript can easily be modified to make the items clickable to use as a menu system, or you could even use images. Your call!

The first prototype is used to create a vertical list from an array. The second is used to scroll the list depending on clicks or mouse wheel scrolling.

This is bare bones, so it is nice and simple and easy to build upon.

/*
I have used the old Zigo tweening prorotypes here, it will also work with Fuse.
Links are always good if you use it :)
*/
#include "lmc_tween.as"

MovieClip.prototype.createList = function (array, clip, visibleItems, xPos, yPos, spacing, offset)
{
	this.listItems = new Array ();

	this.total = array.length;
	this.vis = visibleItems;
	this.spacing = spacing;
	this.offset = offset;
	this._x = xPos;
	this._y = yPos;
	this.num = 1;

	for (var i = 1; i <= this.total; i++)
	{
		var listItem:MovieClip = this.attachMovie (clip, "listItem" + i, i);
		listItem.yPos = i * this.spacing;
		if (i <= this.vis)
		{
			listItem._y = listItem.yPos;
		}
		else
		{
			listItem._y = this.offset + (i * this.spacing);
			listItem._alpha = 0;
		}
		listItem.id = i;
		listItem.txt.text = i + ". " + array[i - 1];
		listMc.listItems[i - 1] = listItem;
	}
};

MovieClip.prototype.shuffleList = function (n)
{
	this.num += n;
	if (this.num > 0 && this.num <= ((this.total + 1) - this.vis))
	{
		var min:Number = this.num;
		var max:Number = this.num + this.vis;
		for (var i = 1; i <= this.total; i++)
		{
			var mc = this.listItems[i - 1];
			if (i < min)
			{
				var Y:Number = mc.yPos - this.offset - (this.num * this.spacing);
				var alpha:Number = 0;
			}
			else if (i >= max)
			{
				var Y:Number = mc.yPos + this.offset - (this.num * this.spacing);
				var alpha:Number = 0;
			}
			else
			{
				var Y:Number = mc.yPos - (this.num * this.spacing);
				var scale:Number = 100;
				var alpha:Number = 100;
			}
			mc.tween ("_y",Y,.7);
			mc.alphaTo (alpha,.7);
		}
	}
	else
	{
		this.num -= n;
	}
};

var fruits:Array = new Array ("Cornelian cherry ", "Date palm", "Fig", "Grape", "Jujube", "Black mulberry", "Olive", "Pomegranate", "Pomelo", "Grapefruit", "Lemon", "Lime", "Mandarin", "Clementine", "Tangerine", "Orange", "Avocado", "Feijoa", "Guava", "Kumquat", "Longan", "Lúcuma", "Lychee", "Passion fruit", "Pond-apple", "Strawberry guava", "Tamarillo", "Yangmei");

var listMc:MovieClip = this.createEmptyMovieClip ("listMc", 0);
listMc.createList (fruits,"listItem",5,150,40,30,20);
listMc.shuffleList (0);

prevBtn.onPress = function ()
{
	listMc.shuffleList (-1);
};
nextBtn.onPress = function ()
{
	listMc.shuffleList (+1);
};

var mouseListener:Object = new Object ();
mouseListener.onMouseWheel = function (delta)
{
	if (delta < 0)
	{
		listMc.shuffleList (+1);
	}
	else
	{
		listMc.shuffleList (-1);
	}
};
Mouse.addListener (mouseListener);

Related posts:

1. AS3 Group94 Menu
2. G94 Circular Menu
3. Dynamic Stacking

I wrote this simple prototype, which splits a string into sections of a defined size (and optionally adds a postfix, ie. “…” to the end), and returns an array containing the segmented text.

Here is the prototype:

String.prototype.splitUp = function (maxLetters, postFix)
{
	var txt:String = this + 1;
	var split:Array = new Array ();

	var num = 0;
	var counter = 0;
	while (num >= 0)
	{
		var num = txt.indexOf (" ", maxLetters);

		if (postFix != undefined && num >= 0)
		{
			var t = txt.slice (0, num) + postFix;
		}
		else
		{
			var t = txt.slice (0, num);
		}

		split[counter] = t;
		txt = txt.slice (num + 1, txt.length);
		counter++;
	}

	return split;
};

… And an example of it’s usage – in this instance the string is converted to an array which can then be used to populate a text box:

var phrases = blurb.splitUp (190, "...");

It may have some bugs as I have only tested it within the context of the project I wrote it for. With a little added Actionscript though, it should be a useful tool.

Related posts:

1. Dynamic Stacking
2. AS2 Array count values
3. Group94 Style Menu

Since fullscreen flash websites have become so popular; this little trick (a necessity really) has been used to make sure that no matter what screen resolution a user has, they can experience the site in the way in which the designer intended.

I realise that listeners are common knowledge, but I have had a lot of emails asking about dynamic positioning so I have written this brief tutorial on how to get all the elements in your Flash movie to position themselves automatically when the user’s browser window resizes, or if they are using a different screen resolution to you and you hate the idea of letting the movie scale!

The principal is simple, like in CSS with fluid layouts, you effectivelly position everything relitively, and write some simple formulas for maintaining their relitivity no matter what size stage they are on.

You can also apply this to the height and width of, for example, the background of a banner, so that your pixel font still looks crisp and nicely aligned as the bar behind is stretching to fit the window. The permutations are endless, and evidently, this is a really useful and basic tool to have when putting together a Flash site. I have even used it for CD Business Card presentations, to make sure text areas and graphics sit nicely in harmony with each other, even if it found its way into the grubbly hands of an 800 x 600 user.

Anyway, the code – Just paste this into the Actionscript panel, render and enjoy. Drag the movie’s resize handles around for some orgasmic repositioning pleasure:

// Setup the Stage properties
Stage.scaleMode = "noScale";
Stage.align = "TL";

// Create some dummy boxes
// This is only for the demonstration

var margin:Number = 10;
var boxSize:Number = 100;

var boxes = [
		["top", "0x9933cc"],
		["right", "0x00ff00"],
		["bottom", "0xff0000"],
		["left", "0x0099ff"],
		["center", "0xff3399"]];

for (var i = 0; i < boxes.length; i++)
{
	var newBox:MovieClip = createEmptyMovieClip (boxes[i][0], getNextHighestDepth ());

	var nameBadge = newBox.createTextField ("test_txt", 1, 0, (boxSize / 2) - 10, boxSize, 10);
	nameBadge.autoSize = "center";
	nameBadge.text = boxes[i][0];
	nameBadge.textColor = 0xffffff;

	with (newBox)
	{
		beginFill (boxes[i][1],100);
		moveTo (0,0);
		lineTo (boxSize,0);
		lineTo (boxSize,boxSize);
		lineTo (0,boxSize);
		lineTo (0,0);
		endFill ();
	}
}

/*
	The core function...
	I keep this separate from the 'onResize'
	handler so that I can call it at the start
	to position all of my elements if the screen
	size has remained the same
*/

function setStage ()
{
	var sw:Number = Stage.width;
	var sh:Number = Stage.height;
/*
Rule for Top / Center alignment
*/
	top._x = sw / 2 - top._width / 2;
	top._y = margin;
/*
Rule for Right / Middle alignment
*/
	right._x = sw - (right._width + margin);
	right._y = sh / 2 - right._height / 2;
/*
Rule for Bottom / Center alignment
*/
	bottom._x = sw / 2 - bottom._width / 2;
	bottom._y = sh - (bottom._height + margin);
/*
Rule for Left / Middle alignment
*/
	left._x = margin;
	left._y = sh / 2 - left._height / 2;
/*
Rule for Center / Middle alignment
*/
	center._x = sw / 2 - center._width / 2;
	center._y = sh / 2 - center._height / 2;
}

// Add a listener
var stageListener:Object = new Object ();
Stage.addListener (stageListener);

// When the Stage dimensions change...
stageListener.onResize = setStage;

// Call our function to set it all up right!
setStage ();

Have fun!

Related posts:

1. Dynamic Positioning Continued
2. Dynamic Stacking
3. Fit DisplayObject into Rectangle