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

Requirements

User level

Beginning

Required products

• Flash Player 10
• Flash Professional CS4 (Download trial)

Additional Requirements

Pixel Bender Toolkit

• Pixel Bender Toolkit 2.0 for Macintosh (DMG, 77 MB)
• Pixel Bender Toolkit 2.0 for Windows (ZIP, 48.8 MB)

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.

Launching the Pixel Bender Toolkit

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

Loading an image

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

Figure 1. Flower image in the Pixel Bender IDE

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.

Creating your first filter

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

Figure 2. Identity filter code displayed with placeholder values

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.

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

Figure 3. Running the filter

1. • 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."

After clicking the Run button, two things happen:

1. 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.
2. In the Save File dialog box that appears, name the file Exercise1.pbk and save it in the pixel_bender folder on your desktop.

Modifying the filter metadata

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:

<languageVersion : 1.0;> kernel Part1Filter < 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()); } }

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.

Where to go from here

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