mike chambers | about

Pixel Bender TV Scanline Filter

After seeing all of the cool stuff people have been doing with Pixel Bender, I finally decided to spend a little time and start learning how to build them myself.

The learning curve isn’t too difficult, although you do have to learn some new concepts, and deal with some limitations (at least when creating filters for Flash). The most difficult part for me thus far, is just understanding color and pixel math and manipulation (something I need to read up on more).

Anyways, below if one of my first filters. I wanted to post it as it is a pretty simple example, while still potentially being useful. Basically, it creates a TV scanline effect by making every other row of pixels black.

Here is a before an after example (you need to click to view the full size in order to see the effect well).

Here is the code for the filter:

<languageVersion : 1.0;>

kernel ScanLines
<   namespace : "mesh";
    vendor : "Mike Chambers";
    version : 1;
    description : "Generates a TV Scanline effect";
>
{
    input image4 src;
    output pixel4 dst;

    void
    evaluatePixel()
    {
        //get the current pixel
        dst = sampleNearest(src, outCoord());

        //find out the vertical pixel size. In Flash this will always be 1
        float pixelVSize = pixelSize(src).y;

        //pixelVSize / 2.0 - outCoord() gives center of pixel, so we have to adjust to find
        //center of our pixel
        if( int(mod(((pixelVSize * outCoord().y) - pixelVSize / 2.0), 2.0 )) == )
        {
            //if on an even row, set the pixel to blackt
            dst.r = 0.0;
            dst.b = 0.0;
            dst.g = 0.0;

            //can also do
            ////dst = float4(0.0,0.0,0.0, 1.0);
        }
    }
}

Thanks to Kevin Goldsmith from the Pixel Bender team for helping me out.

The comments in the code explain what is going on.

You can load this into Pixel Bender to play around with it, and compile it for use in Flash Player 10.

I wanted to add a parameter to allow the line size to be set. It doesn’t look like I can store variables in between calls to evaluatePixel(). Im trying to figure out an algorithm to figure it out in one pass, but im not sure that my math skills are up to the task at the moment.

You can find all of my other posts on Pixel Bender here.

Tags:
twitter github flickr behance