Kanye West disses Taylor Swift
source video

In 2008 Fitim Blaku and I were playing around with ideas for manipulating video. Over a weekend I threw together a little site, tubechopper.com, for extracting animated GIFs, MP3 clips, and video thumbnails from a YouTube video. Its a fun hack with curl, ffmpeg, Image Magick, a JavaScript image cropper, and some jQuery dance steps.

Youtube later changed their techniques for publishing videos, which broke TubeChopper. I took it down.

Recently I saw that GifSoup began to get some traction on exactly the same idea. Argh. Don’t you hate it when that happens? I hand it to those guys, though, for good marketing, getting coverage in CNet, and adding the gallery for sharing videos. Google Adwords cover the site to extract what they can for their work. Nice touch.

For yuks I dusted off the code, fixed the Youtube scrapery, and posted the animated GIF Youtube converter to this blog. The code respects Youtube video providers who’ve asked that their videos be protected.

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!

Add their one line of JavaScript to your global JavaScript file, then use a class selector to specify different CSS options based on the browser. Here’s an example in CSS that will change the color of a rectangle based on the browser you’re using. Brilliant!

.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }