Playing with Pixel Bender

Pixel Bender filter examples

I've been sitting on a small collection of Pixel Bender filters for Flash for a while now... way too long really. The filters were made a long time ago and since then I've been playing with and improving the user interface in (rare) spare moments.

The UI will be familiar to you if you've played with my JPEGlitch experiments, if not most things have tool-tips to guide you... and if you see an icon, generally speaking, clicking it will do something :)

At its core is a slightly modified version of the minimalcomps library from bit101, which has then been further extended to enable easy creation of parameter-based user interfaces (where a Parameter is an Observable object that has flexible value/range Mapping - inspired by the popforge library).

A handy new feature is parameter tweening - all the sliders can have animation turned on/off in their context menu (right-click). It's only a simple min-max tween that you can start and stop, but it's a quick way of seeing parameters in motion. Also, when not animating, double clicking on a slider will reset it to the default value.

I'll make the source (all the .as and .pbk) available soon. It needs a good tidy-up first, and a few comments probably wouldn't go amiss either. If there's sufficient interest I'll get around to putting it into a public source control of some sort (the Parameter/Snapshot UI framework would benefit most from this). Google code and github are the main contenders at the moment.

There are 4 effect and 6 colour-space filters available to fiddle with - there's a quick overview of the filters and UI below for those that need to know more. In the meantime, why not give them a go!

(249KB, no loader, Flash Player 10 required. For best performance, use the latest 10.1 release candidate)

Effect Filters

RGBDisplacementMap - Like Flash's own DisplacementMapFilter, but allowing independent control of red/green/blue displacements. It takes the red+green channel values from the displacement input as the left/right pixel offset amount - centered at 0x80. The example uses an image consisting of a series of red/green blobs, which is included in the source files.

HVSinusoidalOffset - As the name suggests this one applies a sinusoidal offset to an image, either horizontally and/or vertically. Combine with other effects for that ubiquitous 'bad tv' look.

Vignette - A circular gradient vignette with variable inner/outer radius and exposure.

Scanlines - Modulo based alternating dark lines with 2 sync controls and variable strength.

Colourspace Filters

CMYK, HSL, YCbCr, YIQ, YUV, and CIELab.

The six colourspace filters share a common UI layout, selectable from the drop-down list in the filters panel. It's worth noting that the CIELab filter is rather computationally intensive and will be slow to respond on older machines. (that being said, when testing in Flash Player 10.1 all the pixelbender stuff seems a lot faster, even in the debug player. Which can only be good)

UI Framework

Visually, each filter has it's own window containing buttons and sliders to modify the parameters.

Most things you see are part of the current minimalcomps library, although I have modified a few bits. The interface windows all inherit from the AbstractParameterUI which in turn extends the minimalcomps Window - making it pretty simple to set up a new interface for a Pixel Bender filter, or any parameter-based interface for that matter.

Update:23/04/10

As requested by @tarasnovak - here are the Pixel Bender kernels, sooner rather than later. So, you might also see the filters on SlenderPixelBender soon :)

The rest of the source - the AS3 stuff - will come later.

Update:26/04/10

It's come to my attention that not everyone knows what Pixel Bender is, or how it can be used. Crazy times(!)

So, in brief; You can create new bitmap filters/effects, new blend modes (which I played with here, but I need to make a better version with a usable interface... ), or just process lots of data on a separate thread, using a ShaderJob

Most importantly: with filters like the ones in this post, the same compiled Pixel Bender kernels can be used to process image data in Flash, After Effects, and Photoshop!

So, what are you waiting for? Get the Pixel Bender Toolkit and fill your image-processing boots!