pvdn

Despite Pixel Bender being around for quite a while now, I hadn’t used it at all. Time to catch up! Pixel Bender is Adobe’s software to create pixel shaders, small programs which can be compiled into ultrafast image processing units. They can be used in several Adobe products: Photoshop, After Effects and … Flash!

The nice thing about pixel shaders is that they usually run on your GPU, which excels in mathematical operations on images, but unfortunately Pixel Bender’s exported shaderfiles don’t make use of that when they’re being run in the Flash Player. Boohoo. Still, they are way faster than doing the same stuff in Actionscript, and two advantages you do get when using them in Flash: they run as a separate thread (meaning you can for example have a responsive UI while doing extensive calculations on a lot of data at the same time) ánd they will use multiple cores if you happen to have those in your machine.

So, more than enough reason to dive into the subject, and what better way to start than by creating good old Conway’s Game of Life. For the uninformed: Game of Life is a set of 4 rules that define whether a position on a board should become either “alive” (in this case: white) or “dead” (black) by looking at its 8 neighbours (head over to Wikipedia for the the exact rules). Apart from the interesting results that can evolve, that’s all there’s to it: pixels either become black or white, and the way that’s decided makes it perfect to put in a pixel shader.

And so I did. The result can be seen below, play around with it and/or read the notes underneath if you want some more details. Note: you can draw in the image when the shaderjobs are running, but it’s something I implemented very quickly – and poorly. One advice when drawing: set the FPS as high as possible, and don’t move your mouse too fast. (You will need FlashPlayer 10 to run the application).

• I used the compiled shader in a ShaderJob, which lets you run it as a separate task while you wait for it to complete. I supply it with BitmapData objects at both the input and the output. When the job is done, I use BitmapData’s clone-fucntion to copy the result into the data that’s being used as the input and move on to the next job.
• Initially, I started a new job immediately after the previous one was done, but since I wanted to control the framerate by the SWF’s framerate-property, new jobs are now started on EnterFrame events. In case the current job isn’t done yet when entering a new frame, the program does nothing and will check again on the next frame. If this happens, you will see the words “frame skipped” blink (you should lower the FPS when you see that, because the shader can’t keep up).
• The FPS you can set is not the actual frames per second but a request – the player will try to match that number. The left number is the actual FPS, the right one is the number you can adjust. So “60/90″ means you are currently getting 60 frames per second, while you requested 90.
• The image used is 640 by 600 pixels, so in every job 384.000 pixels are being processed with each of them sampling 9 pixels from the input.

And last but not least: the Pixel Bender code:

<languageVersion : 1.0;>

kernel NewFilter
<   namespace : "pvdn";
    vendor : "Peter van der Noord";
    version : 1;
    description : "Conway's Game of Life";
>
{
    input image4 src;
    output pixel4 dest;

    void evaluatePixel()
    {
        pixel4 color = sampleNearest(src,outCoord());

        /*

        1. Any live cell with fewer than two live neighbours dies, as if caused by under-population.
        2. Any live cell with more than three live neighbours dies, as if by overcrowding.
        3. Any live cell with two or three live neighbours lives on to the next generation.
        4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

        */

        pixel4 tl = sampleNearest(src, outCoord() + float2(-1.0,-1.0));
        pixel4 t = sampleNearest(src, outCoord() + float2(0.0,-1.0));
        pixel4 tr = sampleNearest(src, outCoord() + float2(1.0,-1.0));
        pixel4 r = sampleNearest(src, outCoord() + float2(1.0,0.0));
        pixel4 br = sampleNearest(src, outCoord() + float2(1.0,1.0));
        pixel4 b = sampleNearest(src, outCoord() + float2(0.0,1.0));
        pixel4 bl = sampleNearest(src, outCoord() + float2(-1.0,1.0));
        pixel4 l = sampleNearest(src, outCoord() + float2(-1.0,0.0));
        pixel4 me = sampleNearest(src, outCoord());

        pixel4 total = tl + t + tr + r + br + b + bl + l;

        if(me.r == 1.0)
        {
            // alive
            if(total.r == 2.0 || total.r == 3.0)
            {
                dest = pixel4(1.0, 1.0, 1.0, 1.0);

            }
            else
            {
                dest = pixel4(0.0, 0.0, 0.0, 1.0);
            }
        }
        else
        {
            // dead
            if(total.r == 3.0)
            {
                dest = pixel4(1.0, 1.0, 1.0, 1.0);
            }
            else
            {
                dest = pixel4(0.0, 0.0, 0.0, 1.0);
            }
        }
    }
}