Effects with the Pixel Bender Toolkit – Part 2: Creating a vintage tone filter

In this article, you will change a Pixel Bender filter to make it modify the colors of the source image to produce a vintage tone effect. After editing and updating the filter, you'll export the new filter for use in Adobe Flash projects. This is the second installment in this series of articles about using the Pixel Bender Toolkit to create visual effects with bitmap images.

In the previous section, you learned how to work within the Pixel Bender IDE to create a new filter, run it, and save it. In this section, you'll learn about creating a more complicated filter by writing code that controls the color values of the loaded image.

If you've been following along with Part 1 of this article series, open the filter that you created in the previous section. Otherwise, download and uncompress the sample files provided, and open the file named Exercise2FilterA.pbk.

The text displayed in the edit window will look similar to the following code example:

Note: If you entered your own values for the strings in the previous section, your code may differ slightly.

The image in the preview window looks like Figure 1.

In this section, you'll edit the code slightly to affect the red color value in the input image. Follow these steps:

1. Locate the line shown below:

2. Immediately after the line shown above, add a new line and type the following code:

3. After making these changes, the evaluatePixel function will look like this:

4. Click the Run button to run the filter.

When you preview the image, the red channel is slightly accentuated (see Figure 2).

Choose File > Save Filter to save the filter. Name it Exercise2.pbk and save it in the pixel_bender folder on your desktop.

If you'd like to create a more dramatic effect, try the following:

1. Change the amount added to the red channel from 0.1 to 0.5.
2. Click the Run button.
3. Save the filter.

After trying this experiment, the image displays the pixels with a strong red cast (see Figure 3).

Note: The default new kernel takes a four-channel image and creates a four-channel image as a result. The channels are red, green, blue, and alpha (the transparency information). Each channel is represented as a floating-point number between 0.0 and 1.0.

Follow these steps to change the blue channel in the input image:

1. Locate the following code; this is the line that modifies the red channel:

2. Immediately after the line above, add the following line of code:

3. Click the Run button to run the filter.
4. Save the filter.

The image in the preview window appears with a noticeable reduction in the blue channel. This effect, combined with the accentuation of the red channel, results in a yellowish cast to the image (see Figure 4).

Follow these steps to update the values of the green channel in the image:

1. Locate the line in the code that modifies the blue channel:

2. Immediately after that line of code, add a new line and type in the following code:

3. Click the Run button to run the filter.
4. Save the filter.

When you preview the image, the green channel in the image should be slightly reduced. This effect, combined with the modifications to the other color channels, creates a vintage-tone effect on the image (see Figure 5).

In this section, you'll learn how to set up the filter to play back in Flash Player 10. It is important to note that earlier versions of Flash Player do not support the display of filters created with the Pixel Builder Toolkit. Be sure you have Flash Player 10 (or later) installed on your machine.

Follow these steps:

1. Choose Build > Turn on Flash Player Warnings and Errors. This option enables filter validation for Flash Player when running filters, to help you perform troubleshooting.
2. Click the Run button to run the filter.
3. Verify that the filter runs successfully without generating any errors.
4. Choose File > Export Kernel Filter for Flash Player.
5. In the Export dialog box that appears, enter the name for the filter: Exercise2Filter.pbj
6. Save the PBJ file in the pixel_bender folder on your desktop.

Note: Flash Player 10 supports a subset of the Pixel Bender language. Be sure to read the Pixel Bender Toolkit documentation for more information.

After familiarizing yourself with the Pixel Bender interface, continue with Part 3 in this series, where you'll learn how to add parameters to filters.

Check out the following resources to learn more about working with the Pixel Bender Toolkit:

• Pixel Bender forum
• Pixel Bender basics for Flash
• Pixel Bender basics for Flex and AIR