Effects with the Pixel Bender Toolkit – Part 1: Creating a new filter
Created
11 January 2010
Requirements
Prerequisite knowledge
Some familiarity with ActionScript 3.
User level
Beginning
Required products
Sample files
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:
- Choose File > Load Image 1.
- 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
- 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:
- 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.
- Click the Run button at the bottom of the edit window (see Figure 3).
- 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:
- 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.
- 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:
<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.
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:
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Effects with the Pixel Bender Toolkit – Part 10: Using a multiple-input filter as a blend shader
- Effects with the Pixel Bender Toolkit – Part 8: Controlling the displacement filter with mouse positioning
- Effects with the Pixel Bender Toolkit – Part 4: Sampling multiple pixels
- Effects with the Pixel Bender Toolkit – Part 2: Creating a vintage tone filter
- Pixel Bender release notes
- Effects with the Pixel Bender Toolkit – Part 3: Adding parameters to filters
- Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash
- Animating a particle system using Pixel Bender
- Effects with the Pixel Bender Toolkit – Part 9: Integrating multiple image sources with a Pixel Bender kernel
- Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash
| 05/09/2013 | Pixel Bender Installation |
|---|---|
| 02/10/2012 | I Cannot get pixel bender to show in PS |
| 05/31/2009 | White Hat PBJ Decompiling |
| 01/19/2013 | Multiple Image inputs in Blendmode Shader |
