I used the great face recognition code Marilena. This awesome bit of AS3 code is based on some older work done in C: OpenCV. Once I knew where the face was I added a little bit of physics. Using 2d ball on ball collision I can make the ball bounce of your head in the right way. To see how these collisions work check this page.

Have fun playing the game. And for the non-Dutch speaking visitors just click ‘webcam’ to play with your webcam (duh) and ‘muis’ to play with your mouse. Play the theFactor.e Keepy Uppy game here.

In order to get it to work you need a Macbook with multitouch pad. I use the latest pro model, courtesy of theFactor.e .

• You need to download the beta runtime plus sdk which you can get here.
• Install the runtime. This is the easy part.
• Setup the sdk like they explain here. I’ve got it setup so I can export from Flash.
• Create a new Flash AIR project.
• If you would use any of the TransformGestureEvents now it will throw an error. But export the file anyway.
• Open the xml file that Flash just exported next to your swf (Multitouch-app.xml in my case).
• Change the line that define the name space so it uses the 2.0 beta name space:
  <application xmlns=”http://ns.adobe.com/air/application/2.0beta2″>
• Save the xml and try exporting the Flash file again. It should work a charm now.

I’ve uploaded the source for you to play with here. And if you just want to see the AIR app download that here. It only works on a Macbook with multitouch pad or some other fancy multitouch device running Windows 7. Enjoy!

Big thanks to Lee Brimelow and the Internets

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 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/

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.

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).

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.

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.

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]];
};