Playing with webcam / face tracking / Box2D in Flash
I’ve spent part of a day playing with webcam + face tracking + box2d in Flash. The source for the face detection and tracking is from Quasimondo. I used QuickBox2D to get a simple Box2D setup. And the rest is just good old actionscript. It’s the beginnings of a game, and I’ll keep updating the post as I go.
First up is the initial experiment. Keep the ball in the air!
Next up I’ve changed the paddle to move in the opposite direction to the webcam image, which ends up being the same direction that you’re actually moving. I’d initially though that the way it was in the first experiment added to the difficulty but it was counter intuitive and everyone I’d watched give it a go mentioned it. I also smoothed out the rotation movement compared to the first example, and the paddle becomes shorter as you progress. So here’s the second version.
So another day spent on this webcam game and I’ve made a bunch of additions / improvements. I’ve added a calibration section which helps with translating the webcam tracking to the paddle control, as I’d found it was quite difficult to get the paddle to far edges of the screen. Seems to be better control of the paddle now. Also added some of the standard game screens (home, instructions, start, game over, etc). Everything’s just simple placeholders as the moment as I’ll be skinning the UI when all the functionality is done. So try phase three of the game in progress. And if you give it a go leave a comment, I’d like as much feedback as possible.
Hey, I tried out your demo and like what ou have done. The tracking was pretty smooth and as far as I could tell it was fairly fast compared to some of the flash tracking I have looked at.
I have some questions about how you accomplished this. And my end result question will be. I have a flash game already built and want to add face tracking to simply move the background/flash around to give a sense of realism to the scene. How difficult would that be with quasimodo since you have done something with it. Maybe a better way to ask is, can face tracking be added to an existing project without completely re-writing it?
Thanks!
Comment by Tommy on March 14, 2011 at 1:54 pm
Hi Tommy.
It should be easy enough to add, probably depending on the game and the way it’s built. For example, if your game is based on mouse movement/position then it’s pretty easy to add the face tracking as an option.
If you’re using the Quasimodo source, you’ll see that the ObjectDetectorEvent.DETECTION_COMPLETE event contains a ‘rects’ property which is an array of Rectangle objects representing the detected object(s). It’s an array as it can detect more than one object at a time, but usually you’ll be dealing with just one. In my case I’m only using the first element event.rects[0]
In terms of using that to replace the mouse as the controller for your game, the easiest would be to work out the center of the Rectangle and use those values. Hope that helps.
I’ve recently finished a project where I used the same source to control the movement of a video instance. Check it out at Run Pixel Run. – Ben
Comment by Ben on March 18, 2011 at 9:51 am
Hi Ben,
Good work man! and very funny! I’ve been looking for any option that permit user to “record” a video of him with a mask (glasses or whatever) using that algorithm, but I haven’t found nothing clear yet. I’ve been thinking in track the position of user’s face with x,y coordenates and try to overlap to resulting video. Do you know any feasible possibility for doing that? Thanks a lot in advance,
Jesús.
Comment by Jesús on August 20, 2011 at 2:25 am