Andrew Trice

Monday April 02, 2007

(Flex && DisplacementMapFilter && WebCam) == (Tons O' Fun!)

I threw this experiment together out of pure boredom while traveling... and what a great idea that was. :) I have spent way too much time sitting here making funny pictures using my webcam and the DisplacementMapFilter object. You can make people look fat, look thin, look distorted... it is like a fun-house mirror through the web. Here is a preview video to start with, and then we'll get into how it works.


Or, you can interact with it here: (Requires a webcam)

• Launch Application

As usual, I started this experiment by building off of some older experiments. I started with my CameraStream and PaintCanvas components. The PaintCanvas component allows you to draw on a canvas using the mouse. It is really just a simple paint program. The CameraStream component allows you to easily drop a web cam video stream into a Flex application. Where this gets really interesting is how the two components interact with each other.

Basically, There are 2 drawing modes for the application:

• Displacement Mode
• Drawing Mode

Drawing Mode allows you to draw over top of the camera. In this mode, the functionality of the PaintCanvas component is simply layered on top of the Camera Stream. Displacement Mode allows you to distort the Camera Stream image using the mouse as an input device (using a DisplacementMapFilter filter). It uses the bitmap image from the PaintCanvas as the source input for the DisplacementMapFilter on the camera stream. Sounds confusing, but it really isn't. Whenever the PaintCanvas is updated, I update the filter too.

displacementBitmap = getBitmapData( paintCanvas );
var displacementMapFilter : DisplacementMapFilter = 
   new DisplacementMapFilter( 
      displacementBitmap, new Point(0,0), 
      2, 4, displacex.value, displacey.value, 
      DisplacementMapFilterMode.CLAMP );
videoContainer.filters = [ displacementMapFilter ]

I also added some sliders to allow you to adjust the parameters used in the displacement. The blur parameters affect a blur filter that is on the paintCanvas. The displacement parameters allow you to adjust the amount of displacement in the X and Y directions. The color modifies the drawing color (FYI: different colors are affected more by the displacement. Read up on displacementMapFilters for a further understanding.) The thickness parameter adjusts the thickness of the line drawn on the PaintCanvas component.

There is some great information on DisplacementMapFilters here:

• DisplacementMapFilter API Refference
• Grant Skinner's WebCam Goo (with source)
• Psyark’s DisplacementMapFilter Tutorial

Or, you can interact with my application here: (Requires a webcam)

• Launch Application

I'm also working on porting this to Apollo so that you can directly save the images as jpgs on your client machine. Feel free to contact me with any questions/comments at andrew.trice[ at ]cynergysystems.com.
Enjoy!