omino pixel blog

Hello seekers!

I’ve been getting a fair amount of traffic lately, mostly from Pixel Bender searches and a few references from forums and other blogs. And the number of subscribers is steadily growing. I guess some of the stuff here is useful to someone. Hooray, I say!

(And of course by “fair amount of traffic” I don’t mean, like, enough hire an editor or start selling ad space. My ISP isn’t complaining yet about the load. I mean, enough traffic that you and I can still enjoy an intimate little shared pixel experience, as told with words and numbers.)

So this post is mostly just a quick blog reintroduction. And below is a cool little video I did last year that I’ve been meaning to document. Ok, let’s go.

Reintroduction

I started this blog a bit over a year ago, focusing mostly on After Effects techniques and scripts. Adobe After Effects is just about my favorite piece of software ever. So clean and elegant, so complete, and rather delightfully ROCK SOLID. I’m a software engineer myself, and can appreciate just how monumental that simple truth is.

Lately I’ve been having GREAT FUN with Adobe Pixel Bender. It’s so satisfying to rapidly implement a complex function and see it in action. Also: math. Yay.

Perhaps prematurely, I’m thinking in this coming year of 2009, I’ll be getting back to After Effects and techniques… and of course announcements of updates to my free plugins, scripts, and Pixel Bender kernels. If this is the sort of thing you like, too, please consider subscribing.

A Retro-tv Treatment

And now, some pixels. Here’s a little video I did last year as part of a “fundraiser” for my friend Briya. She injured her ankle playing roller derby in Santa Cruz, and we helped pay for her ambulance ride.

I grew up staring at our black and white tv set, and tried to capture that feeling here. I think, often, various “retro” image treatments are too aggressive on the degradation. Black and white tv in the 1960’s was actually quite sharp! I tried to keep that feeling here. Here’s the recipe I used.

1. Character generator. Old tv production had only a few effects available. I used a “character generator” here, white text at about 80% opacity. In the olden days, they rarely used shadow or background to enforce contrast; if the text was over something light-colored, it was just harder to read, sorry!
2. Picture in picture. I also drop in a rectangular insert image, flat. Notice both the insert and the text only flash, no fading or morphing. That came later.
3. The telethon look. This was the fun part, of course. I videotaped about 45 seconds each of three different actors sitting at my kitchen table, in front of our red curtain. That’s it! In After Effects, these are shoved next to each other and lined up in rows. It’s amazing how forgiving our eyes are. Yes, you can see that it’s all wrong. But it’s also oh-so-right.
4. Curved glass tube. I added some arbitrary mesh distortion, suggestive of a glass picture tube. But tubes also get magnetized this way and that. (Or at least, in the 1960’s, mine did, because I played with magnets on it.) It adds an interesting travel to the image.
5. Transmission loss. To add “ringing” and “aliasing” to the image, something I keenly remember from seeing television, I used my plugin called omino_diffusion, superimposed slightly over the original and blurred. It somewhat simulates the analog behavior of errors and their correction, since it proceeds left to right just like the scanning of the vacuum tube.
6. Brevity. And of course, the most important trick here is to keep it short, to reduce the time one might have to ponder the image and question it too closely…

I had worked up a “tv-turning-off” dotsweep, also. There’s something wonderfully dramatic about the old CRT dotfall… Modern tv’s just “turn off” and that’s that, but the old disappearing dot was an event providing real closure. But for this piece, I went with looping.

And good night.

Featuring mix(), clamp(), and dot().

Very often I need a simple linear-gradient in After Effects, and end up sing the four-color gradient because that’s all I can find. And so, here, for your perusal, is a Pixel Bender implementation of a Linear Gradient Generator.

After that, we’ll see the code, and after that, a quick review of the math.

Here is the .swf. (With some improvements on the Pixel Bender viewer — you can drag any float2 parameters as points, now.)

Isn’t that fun? Well, I’m easily amused.

The Code

Here’s the Pixel Bender code.

kernel Gradient 
{
    output pixel4 dst;
    parameter float2 p1<minValue:float2(0,0);maxValue:float2(400,400);defaultValue:float2(10,10);>;
    parameter float2 p2<minValue:float2(0,0);maxValue:float2(400,400);defaultValue:float2(130,130);>;

    parameter float3 color1<defaultValue:float3(0,0,0);>;
    parameter float3 color2<defaultValue:float3(1,1,1);>;

    void evaluatePixel() 
    {
        float2 co = outCoord();
        
        // shift everything relative to p1.
        float2 uv = co - p1;
        float2 xy = p2 - p1;

        // the math.
        float g = dot(uv,xy) / dot(xy,xy);
        g = clamp(g,0.0,1.0);

        // the color.
        dst.a = 1.0;
        dst.rgb = mix(color1,color2,g);
    }
}

The Math

I’m ok at math, but not always fluent in it. I can remember what a matrix is, but not necessarily exactly what a cross-product is. Maybe you’re like me. In which case this quick run through the math and logic behind the gradient fill will be quite useful in your own Pixel Bender bending!

And be assured, a few pages of high-school-algebra-style scribblings, and the occasional google (How do I invert a rotation again? What’s the formula for perspective?) really can lead to workable results. Good clean fun!

Let’s go.

Consider a trivial gradient, where our two control points are at (0,0) and (1,0). That would be easy! Just take the x-value of any pixel, and that’s your color. (That is, the position on the ramp between your two gradient colors.)

By the way, this picture is from Ron Avitzur’s “Graphing Calculator”. The story of its development is legendary; less well known is that it’s actually a very powerful and useful tool.

I found the easiest way to think about a general two-point gradient was to ask, “How do we rotate and scale our control points back to this trivial gradient?” And let’s assume that the first control point is always at (0,0).

Here is matrix for a basic rotation, which moves any input point by a rotation around (0,0):

[1]

A rotate-and-scale matrix looks like that, times a constant on each element.

We want to think of our general gradient as a transformation on the trivial gradient. Let’s say our second control point is (X,Y), and our first control point is (0,0) as mentioned above. The rotate-and-scale matrix being applied, conceptually, is:

[2]

To figure out the 0-to-1 trivial position of any of our input points, we need to invert it. A matrix inversion looks like:

[3]

So, we invert the second equation [2] by plugging it in to [3] and get:

[4]

Now, let’s call each pixel position of our output (U,V). For our gradient, we actually don’t care about the resulting Y position; just X gives us our gradient value. So we get:

[5]

Now, the definition of the dot product of (A1,A2,A3,…) and (B1,B2,B3,…) is (A1B1 + A2B2 + A3B3 + …). So, from the above, UV+XY is, conveniently, (U,V) dot (X,Y). Similarly, X² + Y² is (X,Y) dot (X,Y).

And now, when you read this part of the code a second time, it should be much clearer what’s going on:

    void evaluatePixel() {
        float2 co = outCoord();
        
        // shift everything relative to p1.
        float2 uv = co - p1;
        float2 xy = p2 - p1;

        // the math.
        float g = dot(uv,xy) / dot(xy,xy);
        g = clamp(g,0.0,1.0);

        // the color.
        dst.a = 1.0;
        dst.rgb = mix(color1,color2,g);
    }

Simple and useful!

Next up, soon, more cubes.

Tasks Beget Subtasks

That’s always how it is, I’m trying to do something, but then a new jig or tool is needed along the way.

Just lately I’m finally “remastering” some ancient (80’s) video of my own. Captured it off VHS video in 2004, been sitting on my hard disk since then. Tragically, the capture introduced some awful drift between audio and video. I probably used iMovie for a 30 minute capture, just like they say not to.

Why am I using AE for this? Because I haven’t upgraded the stupid final cut pro to the stupid expensive intel version, because I stupidly missed the $50 upgrade special window.

And as long as I’m complaining: How come AE doesn’t have some fine-numeric control for time-bumping the layers?? Ok. So it goes.

But meanwhile, I need some fine-control to shift the layers left and right.

I’m thinking, should I write a script for this? But something tickles my memory. A yes, this is just the sort of thing that can be found on Jeff Almasol’s most excellent redefinery blog and scripts collection. Many useful scripts there; solid work-a-day workflow helpers. Also, exquisitely coded. Excellent style, thrilling examples, and so forth.

Happily, redefinery’s rd:scooter was just the tool to nudge things back into place!

After nudging around my 30 minute audio and video layers, I wanted to snip out just the 2 minutes for the particular song-section. But the in- and out-points were far off to the left and right of my dinky 3 minute comp. So I wrote a script panel for this last bit:

I tried to keep it nice and narrow, to fit in easily with the other built-in palettes. It’s ugly, but then it worked so I stopped coding & used it. Click here or on the picture to get it from my scripts collection.

After Effects Scripting Bug

Ah yes, there’s a bug in After Effects CS3’s scripting that I came across. If you set layer.inPoint = t; it also sets the outpoint! My workaround was like so:

	// bug? setting in seems to corrupt out. save and fix.
	var outPoint = layer.outPoint;
	layer.inPoint = myComp.time;
	layer.outPoint = outPoint;

This workaround should be safe even after they fix the scripting bug. (Not sure where to report Adobe bugs…)

So… Then What?

And lastly, some excerpts from the product of this endeavor: Vintage 1986-era animation loops done with Macromind’s Videoworks ! Orchestrated with my own long-forgotten music software, “Synthestra” (MIDI) and P-Drum (sample player), both for the Apple II, distributed by Dan Retzinger’s company, Decillionix.

Check it out. 30 seconds of techno-stalgia.

This blog usually isn’t for industry commentary and such, but you know, when Adobe starts moving the pixels around in new ways I do get excited.

Adobe’s “Pixel Bender” framework — which facilitates fast, cross-platform, single-frame image-processing filters — will be available in Flash and After Effects, and presumably other imaging apps as well. (It should be useful in Photoshop and Illustrator and Premiere.)

Adobe developer Tinic Uro reveals some important differences between Flash 10’s support, and After Effects’.

In particular, on Flash, a Pixel Bender filter runs on the host CPU, not the graphics card! But not to worry, they’re still mighty fast; they’re compiled to native Intel code on the fly. Ah, right, yes, they’ll be slooow on PPC Macintoshes. So it goes.

On After Effects, however, they’ll run on the GPU.

Couple of relevant links:

Adobe Flash 10 beta download
Adobe Pixel Bender Toolkit download
Mr Doob, some guy with a lot of cool Pixel Bender examples (found via AEPortal, thanks!)
Pixelero’s cool examples, too (also via aeportal)