as3
Having fun with Face Tracking and MP3 Pitch control
There is a lot of cool open source stuff coming out this year in the Flash community. Earlier this year we saw the Flash Face Tracking and 2 months ago Andre Michelle showed how easy it was to control the pitch of a sound in Flash 10. I love all that stuff.
So I though, what can I build to have a little fun with all this open source loveliness. A webcam/mic driven pan flute of course! 
Here is the source from this experiment.
Alice in Wonderland Papervision site is live
Great day yesterday. After all the hard work my colleague Graham and I put in, the site for the new Tim Burton movie has finally gone live.
Alice in Wonderland screen shot
For this project we wanted to showcase the characters in a way that made sense for the movie. So we came up with the idea of having them fly past while you (Alice) are falling down the rabbit hole.
The site is my 3rd Papervision site and I’m starting to understand more and more about creating a good working site using this technology. It is really important to re-use your objects and keep an eye on the memory used. If you’re not careful, you can grind a site to a halt quite easily.
The tunnel texture is a looping Movieclip that I put on a cylinder. The camera is inside this cylinder. Then I have a bunch of flat planes with things like a watch, a chair, a crown etc mapped on top of them. They fly past and as soon as they go off screen, they loop back from the bottom again.
The main object of course is the picture frame. I first started off with just a box but that didn’t give the right feel. So I created this more detailed shape that has all the edges and depth of a real picture frame. Graham then created the textures and I put it all together. I love how much more depth it gives the frame.
I use the interactive moviematerial for the front (character) and back (downl0ads) sections. I then added the neat things like the FileReference style download of the icons, so we didn’t need a popup.
Have a look at the site here: http://www2.disney.co.uk/DisneyMovies/alice/
Silly webcam motion tracking thingy
I was cycling home today and had a bit of a random idea on how it would be funny to track motion using the webcam and use that to move a set of eyes around. As if the person on screen could actually see you.
Anywaysss, quick half hour later and you can see the result below. Download the source if you like. Have fun playing!
Move from left to right. Or just sit still and move your left hand or right hand. You’ll figure it out.
Kaleidoscope fun in Flash. Now with superfast image export!
I found this supercool Adobe AS3 library that uses ByteArray to export images superfast. The only thing the PHP does is put a header on it and serve it up. Wicked.
And what better way to test that than building a webcam Kaleidoscope. Hours of fun! Here is the source if you’re interested.
My first papervision webcam experiment
The Papervision Workshop on Flash on the Beach this year really opened my eyes on the Papervision front. I never really made the step to start experimenting with Papervision because it’s not the most accessible thing to start with. At least that’s what I thought…
Ralph Hauwert really showed how easy Papervision can be and that you can have a scene up and running in no time. So hey, in comes a rainy weekend in London and you can see the result below.
I just wanted to do something weird with a webcam and Papervision. I’ve applied a threshold to the images I capture using the webcam. The further along the line the lower the value for the threshold gets. So you get a kind of tunnel that first only shows the very bright bits and then slowly shows everything.
And I’ve added a little rotation etc just because I can 
I’ve put the source code in a zip. You will need the Papervision SWC or AS3 classes to run it. If you don’t have them, please have a look at the Papervision blog on the right side (Getting started 2.0).
Colour tracking with the webcam in Flash
Something I wanted to do for a while. Track a colour using your webcam in Flash. I draw the webcam into Bitmapadata so I can play around with it. If you take the getColorBoundsRect straight from the raw bitmapdata it will be very hard to get something useful as you just have to many single pixels and colours to analise. So I implement a little trick that makes it better to analise. First I blur the video so it smooths the colours. Then I turn it into a 8 channel image.
After that I just layer a fresh video feed that isnt distorted on top and start drawing based on the colour and position.
Enjoy! You can grab the source here if you want.
Flash Facetracking kicks ass
(This is a repost from March 2009, my blog crashed in the meantime )
Last week I noticed a couple Flash guys jumping on the face tracking code. The legendary Mario Klingemann (aka Quasimondo) did a great example and shared his source code.
I really appreciate the fact that people are sharing this source code for others to play with. Good work!
I totaly love the idea of being able to track your face with the webcam. I had a little demo working yesterday (st Patricks day) where I drop a green hat on your head. Hours of fun .
Today on the way into work I remembered the movie The Ring where peoples faces got blurred in pictures when they were about to die. So 20 minutes of playing around with Mario’s source code later and you can see the result below.
I can’t wait to spend a bit more time on this code and hopefully will be doing some client work using this technology soon. Fingers crossed.
25 lines of code contest
Keith Peters organised a Flash coding contest where you could do anything you want as long as it was AS3 and didn’t exceed 25 lines. Very cool.
The contest closed last night so I can now post my entry. It’s not rocket science but I think it looks cool . Have fun playing and enjoy the code if you like.
[SWF(width=800, height=800, backgroundColor=0x000000, frameRate=24)]
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;//25 lines begins here
var bmdDisplay:BitmapData = new BitmapData(800, 800, true, 0×00000000);
var drawSprite:Sprite = new Sprite();
var insideDrawSprite:Sprite = new Sprite();
var aPoints:Array = [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]];
var aPositions:Array = [[0,0,1,1],[800,0,-1,1],[800,800,-1,-1],[0,800,1,-1]];
this.addChild(new Bitmap(bmdDisplay));
drawSprite.addChild(insideDrawSprite);
this.addEventListener(Event.ENTER_FRAME, updateStage);
function updateStage(e:Event):void {
bmdDisplay.applyFilter(bmdDisplay, bmdDisplay.rect, new Point(0, 0), new ColorMatrixFilter([1, 0, 0, 0, 0, 0, 0.85, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0.92, 0]));
insideDrawSprite.graphics.clear();
insideDrawSprite.graphics.beginFill(0xFFFFFF);
for (var i:uint = 0; i<aPoints.length; i++) {
insideDrawSprite.graphics.lineTo(aPoints[i][0], aPoints[i][1]);
}
insideDrawSprite.graphics.endFill();
for(i=0;i<aPositions.length;i++){
insideDrawSprite.x = aPositions[i][0];
insideDrawSprite.y = aPositions[i][1];
insideDrawSprite.scaleX = aPositions[i][2];
insideDrawSprite.scaleY = aPositions[i][3];
bmdDisplay.draw(drawSprite);
}
aPoints = [aPoints[1], aPoints[2], aPoints[3], aPoints[4], aPoints[5], aPoints[6], aPoints[7], aPoints[8], aPoints[9], [this.mouseX, this.mouseY]];
};
CornPops Challenge live on MiniClip
This is a rebuild post from last year. The game went live at the end of August 2008. Still going strong though
Big day yesterday, the game I’ve been working on for pretty much the whole of August has gone live on Miniclip. It’s an advergame we built at Digital-Outlook for the Corn Pops cereal.
This was my most advanced game to date, involving a lot of physics. Building it had extreme ups and extreme downs, it really was the summer of physics for me. A nice little bonus was that I have a cameo in the end screen wearing a mullet wig…
I opted to build the engine myself instead of using one of the readily available Flash physics engines like Box2D. The main reason was that I just really like to know how it works and find great joy in figuring out these difficult math & physics problems.
If you ever want to build an engine like this yourself you might want to check out these useful links:
- Elastic collision on Wikipedia.
- 2D collisions explained by Fu-Kwun Hwang
- Ball vs line collisions in Flash
- Verlet integration on Wikipedia
I think one of the main things that caused a lot of gray hairs was the fact that the engine can work well for 15 seconds and then all of a sudden something happens that makes the ball go through something it shouldn’t go through. You really learn to debug properly.
In a nutshell this is how it works:
- define your objects. Walls are a bunch of vectors that go between 2 points. They don’t move. A ball is basically a point with a radius. It also gets a mass for ball to ball collisions. And a rag doll is a bunch of points that need to stay together using Inverse kinematics.
- Once it is all defined you go through your list of objects checking if a collision is about to happen in this frame, the collision detection. You basically want to find out the time within this frame that the collision happens. Let’s say the first collision happens at ‘t=0.4′ (t=0 is the start of the frame, t=1 is the end of the frame). Then you move everything up to t=0.4 in the frame.
- Now comes big step number two, the collision handling. You need to deal with different style collisions in a different way. The options I had in this game were ball-ball, ball-line or point-line. You pick the right one and then you deal with the collision adjusting the speed from the objects in collision.
- Once that is done I have a look if another collision will happen after t=0.4. If so repeat the 2 points above until you’ve reached t=1 and you move onto the next frame.
Now go and enjoy the game over at Miniclip 
Conway’s Game of Life in Flash
Sorry, not the most original thing to build but it felt like I had to do it
I love that something that is based on only 4 simple rules can create something so cool. Have a read through this article on Wikipedia if you want to know more about it.
These are the rules:
- Any live cell with fewer than two live neighbors dies, as if by loneliness.
- Any live cell with more than three live neighbors dies, as if by overcrowding.
- Any live cell with two or three live neighbors lives, unchanged, to the next generation.
- Any dead cell with exactly three live neighbors comes to life.
Have fun playing! Here is the source if you’re interested.