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

Requirements

User level

Beginning

Required products

• Flash Player 10 and later
• Flash Professional (Download trial)
• Pixel Bender Toolkit (Macintosh)
• Pixel Bender Toolkit (Windows)

Sample files

• pixel_bender_02.zip

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.

Setting up the files

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:

<languageVersion : 1.0;> kernel Part2Filter < namespace : "com.adobe.devnet.pixelbender"; vendor : "Kevin's Filter Factory"; version : 1; description : "Playing around with pixels"; > { input image4 src; output pixel4 dst; void evaluatePixel() { dst = sampleNearest(src,outCoord()); } }

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.

Figure 1. Input image displayed in the preview window

Modifying the red channel of the image

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:

dst = sampleNearest(src,outCoord());

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

dst.r += 0.1;

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

void evaluatePixel() { dst = sampleNearest(src,outCoord()); dst.r += 0.1; }

1. Click the Run button to run the filter.

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

Figure 2. Red areas in the image accentuated after running the red filter

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).

Figure 3. After updating the red channel's color value: lots of red

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.

Modifying the blue channel of the image

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:

dst.r += 0.5;

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

dst.b -= 0.4;

1. Click the Run button to run the filter.
2. 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).

Figure 4. After affecting both the red and blue filters: lots of yellow

Modifying the green channel of the image

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:

dst.b -= 0.4;

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

dst.g -= 0.1;

1. Click the Run button to run the filter.
2. 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).

Figure 5. After affecting the red, blue, and green filters: a vintage tone

Preparing a filter for Flash Player

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.

Where to go from here

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