The Artima Developer Community
Articles | Discuss | Email | Previous | Next

Bend your Pixels with Flex 4
by Chet Haase
April 12, 2010
With a demo app from his book, Flex 4 Fun, Chet Haase explains pixel shaders in Flex 4, which allow you to provide arbitrary calculations on images at the pixel level.

Flex filters make many complex image-processing operations easy. By simply attaching a filter to an object, you can get many different visual effects: glows, shadows, blurs, sharpening, and more. Until Flex 4, though, there was a slight problem with these filters: they were all you got. If you liked the approach of filters, but wanted to apply some custom image-processing algorithm not achievable with the various filter classes that Flex provided, you were out of luck.

In Flex 4, however, you can use a pixel shader with a ShaderFilter to filter your Flex object. A pixel shader is a small program, written using Adobe's Pixel Bender Toolkit. A shader is run for every pixel of an image, computing its resulting value from various input images and parameters.

Here's the Grayer demo application from my book Flex 4 Fun, which demonstrates Pixel Bender in action:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

The Grayer application lets the user drag the slider back and forth, changing the image from completely grayscale (when the thumb is on the left) to its original color version (when the thumb is on the right). The grayscaler shader used by this Flex application takes an input image and a colorization parameter and produces an image which is a blend of the original image and the grayscale version of that image. The blend is determined by the colorization parameter, where a value of 1 results in the original color image and a value of 0 results in a completely grayscaled image.

The grayscale calculation is based on a standard formula which combines the red, green, and blue channels of the original image to produce a gray pixel of a similar intensity with the calculation graypixel = red*.11 + green*.33 + blue*.55. The shader works by operating on each pixel of the original image, multiplying it times the grayscale formula to derive the gray version of that pixel, then blending that gray version with the original color pixel in the proportion determined by the colorization parameter.

There are three parameters to this shader: the input image, the colorization parameter, and the output image. These are declared in the shader as follows:

   parameter float colorization;
   input image4 image;
   output pixel4 dst;

The only other code in the shader is the function evaluatePixel(). This is a standard function that all shaders must implement. The Pixel Bender library calls this function for every pixel of the image and takes the value of the output parameter, assigned in that function, as the result for that pixel. The function in grayscaler looks like this:

   void evaluatePixel()
        float4 pixel = sampleNearest(image, outCoord());
        float4 grayPixel;
        grayPixel.r = pixel.r * .11 + 
            pixel.g * .33 + pixel.b * .55;
        grayPixel.g = grayPixel.r;
        grayPixel.b = grayPixel.r;
        grayPixel.a = 1.0;

        dst = mix(pixel, grayPixel, (1.0 - colorization));

The code in the function works like this: First, the current pixel value in the original image, which is the image input, is assigned to pixel. Then the grayPixel value is calculated according to the grayscale formula, accessing the red, green, and blue channels of the original image pixel with .r, .g, and .b notation. All of the red, green, and blue values in the grayPixel are then set to that same value, and its alpha value is set to 1 to make it opaque. Finally, the calculated grayscale value is blended with the original color value using the colorization parameter and the built-in mix() function. The result is stored in the dst output parameter, which Pixel Bender uses as the final pixel value result.

The Grayer application is a very simple example of using Pixel Bender to create and use a custom filter in Flex 4. The most powerful thing about this approach to filtering is that you can really do anything with this technique: given the object being filtered, an arbitrary number of image inputs, other parameters you can pass in, and arbitrary calculations performed in the evaluatePixel() function, you can get very custom, very cool, and very flexible effects. With Pixel Bender and ShaderFilter, you get the easy approach to image processing that Flex filters provides with the power and flexibility that Pixel Bender's programming model enables.

Share your opinion

Will pixel shaders add color to your programming scene? Discuss this article in the Articles Forum topic, Bend your Pixels with Flex 4.


Chet Haase is author of Flex 4 Fun, which is available as a PrePrintâ„¢ (early access release) at:

Adobe's Flash Builder 4

Flex 4 SDK

Download the Pixel Bender Toolkit here:

You can see many examples of shaders at the Pixel Bender Exchange

About the Author

Chet Haase is a senior computer scientist on the Flex SDK team at Adobe Systems, Inc. In the Flex 4 release, he was responsible for Flex effects, and writing the next effects infrastructure and classes for Flex 4. Prior to his work at Adobe, he worked at Sun Microsystems for several years, and co-authored the book Filthy Rich Clients about creating rich user experiences with the Java client platform. His entire career has been in graphics software, from the application level to APIs and libraries to drivers for graphics chips. As long as it puts pixels on the screen, he's interested. He earned a B.A. in Mathematics from Carleton College and an M.S. in Computer and Information Sciences from the University of Oregon.

Chet is also interested in writing and performing comedy; you can see some his work in this completely unrelated field at, and in his book When I am King..., which is available at Chet lives in Pleasanton, California, with his wife and three kids, whom he needs to spend more time with now that this book is finished.

Articles | Discuss | Email | Previous | Next

Copyright © 1996-2019 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use