Source image

My kids love to play with Photobooth on the Mac. The fish eye, pinch, punch, squeeze, Andy Warhol, and other looks provide countless sources of fun and amusement.

I’ve been working on a handy utility in Flash that will let you morph images, videos, and webcams like Photobooth. Each effect is specified as a “preset.” A preset is a set of mathematical constraints and parameter values specified in an external character string, often stored in a file.  I think the idea was first used in the Milkdrop music visualizer in the late 90’s.  I’m not sure.

Anyway, I’ve written a preset compiler in Flash that turns these equations into bytecodes for a custom, finely tuned virtual machine.  The virtual machine operates much like an HP calculator, a stack machine with numerous functions.

I then created a 2d mesh and exposed several values at each vertex.  Each of these values can be manipulated by the presets.  They include the texture location (u,v), the screen location (x,y), rotation (rot), scaling (sx,sy), translation (dx,dy), a nonlinear zoom (zoom, zoom_exp), and a sinusoidal warping technique (warp, warp_exp, warp_scale).  You can also specify the “current” values of (u,v) as (u_t,v_t). I also cache the polar coordinates of the vertex as (ang,rad). These names are borrowed from Milkdrop…

Finally, I wrapped it all together by placing the 2d mesh on a sprite, loading a preset, then running it every frame, at every vertex.  For fun I pass along the current time as a “time” value.

Here are some simple presets. The first one is a fisheye effect, repeating the ImageMagick trick in Flash.

rs=pow(rad,2.5)/2;
u=2+time*0.5-rs*cos(ang);
v=2+time*0.5-rs*sin(ang);
u_t=u;
v_t=v;

This next preset will gradually shrink the source image over time. Once it shrinks, Flash wraps around and fills the empty space as one would expect on a graphics card:

sx=1.0-time/4;
sy=1.0-time/4

I was playing with Zoom a bit here. This neat effect appears to stretch the image like taffy from the center, oscillating back and forth in time:

zoom=max(1,1.0+sin(time*0.31415)*rad)

Another trick with the zoom exponent, one that also oscillates:

where=sin(time*3.1415);
zoom=1.0+2*rad;
zoom_exp=1.0+where*0.5;

This is a mashup effect that shifts, rotates, and zooms over time in a variety of ways:

dx=sin(time);
dy=cos(time);
rot=time*1.57;
zoom=1.0-0.8*sin(time*2.675);
zoom_exp=3

In the end, I use the identity function to map the current (u_t,v_t) to the original (u,v)

u_t=u;
v_t=v

Soon I plan to release the code. You’ll use JavaScript to specify the preset and source image, video or webcam. Flash will do all the math. Voila! Photobooth in Flash and JavaScript (well, almost). Suggestions welcome!