Effects with the Pixel Bender Toolkit – Part 1: Creating a new filter

Note: For the purposes of this article series, create a folder named pixel_bender and save it on your desktop. As you follow along with the instructions in this series, you'll save your completed project files in the pixel_bender folder.

The Adobe Pixel Bender Toolkit allows you to process the pixel data in image content to create a wide range of special effects. You can implement image-processing algorithms (filters) and run them in Adobe Flash Player 10 or later. Since Flash Player renders the output, you can develop your projects in a platform and hardware-independent ecosystem. Write the code using the XML-based Pixel Bender graph language to build the filters that create visual effects. By combining individual pixel-processing operations (kernels) you can create complex Pixel Bender filters.

In this series of articles, you'll learn how to get started with the Pixel Bender Toolkit and begin making filters to create unique effects. When you download the Pixel Bender Toolkit, you'll get the Pixel Bender kernel language and graph language, the Pixel Bender Toolkit IDE (an integrated development environment for Pixel Bender), sample filters, and the Pixel Bender documentation.

This article shows you how to create your first Pixel Bender filter. You'll also learn how to run the filter on an image and save it to your hard drive.

If you haven't already, be sure to download the Pixel Bender Toolkit. Once the installer mounts, or you've extracted the installer, double-click the Setup icon, accept the Adobe End User License Agreement, and step through the wizard to install it.

Locate the Pixel Bender Toolkit in one of the following locations (depending on your operating system) and double-click the icon to launch the Pixel Bender Toolkit:

• Windows: Start menu > Adobe program group > Adobe Utilities > Pixel Bender Toolkit
• Mac OS: Applications > Utilities > Adobe Utilities > Pixel Bender Toolkit

Once the toolkit is running, your first task is to load an image. Follow these steps:

1. Choose File > Load Image 1.
2. Use the Open Image File dialog box to navigate to the sample images folder at the following location, depending on your platform:
   • Windows: C:\Program Files (x86)\Adobe\Adobe Utilities\Pixel Bender Toolkit\sample images\
   • Mac OS: MacHD/Applications/Utilities/Adobe Utilities/Pixel Bender Toolkit/sample images
3. Choose the YellowFlowers.png file in the sample images folder and click Open. After making this selection, the image loads in the application (see Figure 1).

Note: The Pixel Bender Toolkit supports loading two different images. This feature makes it possible to test filters that combine multiple images (which we'll explore in an upcoming section of this series). The Pixel Bender language supports filters using up to four images as inputs.

Although this first filter effect is not very exciting, you'll learn the create–run–save workflow to follow when creating more complex filters later on.

Follow these steps:

1. Choose File > New Kernel. In the editing window, the identity filter text appears (see Figure 2).

Note: The default Pixel Bender filter created by the Pixel Bender Toolkit is called the identity filter. This filter processes the loaded image but passes it through unchanged because you haven't added any effects yet.

2. Click the Run button at the bottom of the edit window (see Figure 3).

After clicking the Run button, two things happen:

• The instructions pane on the right side is replaced with an empty pane
• The text next to the Run button states: "The filter is running and the status indicates that the kernel compile succeeded."

3. After creating and running a filter, the last step in the workflow is to save the filter, so that you can reuse it later as desired. Choose File > Save Filter.
4. In the Save File dialog box that appears, name the file Exercise1.pbk and save it in the pixel_bender folder on your desktop.

You are now ready to edit a few lines of code to change the name of the filter. Rather than using the default name (NewFilter), rename it MAXFilter. Also change the strings for the namespace, vendor, and description. In the vendor string, you can enter your own name if desired.

Update the filter to match the following highlighted code:

After updating this code, you are ready to run the filter again. Click the Run button to display the output.

Note: If there is an error, a message will appear in the panel on the right side of the Pixel Bender Toolkit. Otherwise the status will indicate that the kernel compiled successfully.

After familiarizing yourself with the Pixel Bender interface, continue with Part 2 in this series, where you'll create a new filter that affects the color values to create a vintage tone effect.

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