Effects with the Pixel Bender Toolkit – Part 9: Integrating multiple image sources with a Pixel Bender kernel
Modified
11 January 2010
Requirements
Prerequisite knowledge
Some familiarity with ActionScript 3.
User level
Beginning
Required products
Sample files
- pixel_bender_09.zip (6 KB)
In this article, you'll learn how to create a Pixel Bender kernel that integrates values from multiple image sources. This is the ninth 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 add interactivity by tracking the user's mouse movements. You also updated the code to constrain the filter's parameters based on the minimum and maximum metadata values.
In this section, you'll learn how to create a Pixel Bender kernel that uses two input images to blend them together.
Creating a Pixel Bender kernel with two inputs
To create a Pixel Bender kernel that integrates values from multiple image sources, follow these steps:
- Launch the Pixel Bender Toolkit.
- Choose File > New Kernel to create a new filter.
- Import the YellowFlowers.png image and then update the name of the filter and set the filter metadata as described in Part 1.
- Locate the first input line. Add a second line and type the following code:
input image4 src2;
After making these changes, the filter code should look like this:
<languageVersion : 1.0;>
kernel blendy
< namespace : "com.adobe.devnet.pixelbender";
vendor : "Kevin's Filters";
version : 1;
description : "mashes two inputs together";
>
{
input image4 src;
input image4 src2;
output pixel4 dst;
void evaluatePixel()
{
dst = sampleNearest(src,outCoord());
}
}
- Click the Run button to run the filter. If you do not encounter any syntax errors, the IDE will prompt you to load a second image.
- If the Load Image file dialog box does not default to one of the following locations (depending on the platform), manually browse to the sample images folder at this location:
- Windows: C:\Program Files (x86)\Adobe\Adobe Utilities\Pixel Bender Toolkit\sample images
- Mac OS: Mac HD/Applications/Utilities/Adobe Utilities/Pixel Bender Toolkit/sample images
- Select the ShrineNearDarjeeling.png image located in the sample images folder, and click Open.
Note: Although you've selected the PNG file, you won't see the second image yet. However, you should see the filename in the status bar of the application. The second image will not appear until your kernel uses pixels from the second image in your filter.
- Locate the line in the code that sets the output value:
dst = sampleNearest(src,outCoord());
Change the line to match the example below:
dst = sampleNearest(src2,outCoord());
- Click the Run button to run the filter. The ShrineNearDarjeeling.png image appears instead of the YellowFlowers.png image.
- Choose File > Save Filter. Save the Pixel Bender kernel as Exercise9Filter.pbk in the folder named pixel_bender on your desktop.
- Locate the line of code that sets the output value:
dst = sampleNearest(src2,outCoord());
Change the line to match the example below:
dst = sampleNearest(src2,outCoord()) + sampleNearest(src, outCoord());
- Click the Run button to run the filter. This time, the ShrineNearDarjeeling.png image is added to the YellowFlowers.png image. This effect looks similar to the Photoshop Linear Dodge (Add) blend mode effect (see Figure 1).
- Choose File > Save Filter to save the Pixel Bender kernel and preserve your changes.
Adding a parameter to control the blending
Now that you've loaded two images at once and applied the filter to create an effect, you can edit the code to fine-tune the way the two images are blended together:
- Locate the following line of code:
output pixel4 dst;
- Add a new line immediately following the line above. Add this code on that line:
parameter float amount;
After making these changes, your kernel should look like this:
<languageVersion : 1.0;>
kernel blendy
< namespace : "com.adobe.devnet.pixelbender";
vendor : "Kevin's Filters";
version : 1;
description : "mashes two inputs together";
>
{
input image4 src;
input image4 src2;
output pixel4 dst;
parameter float amount;
void evaluatePixel()
{
dst = sampleNearest(src2,outCoord()) + sampleNearest(src, outCoord());
}
}
- Locate the line that sets the output pixel value in the code:
dst = sampleNearest(src2,outCoord()) + sampleNearest(src, outCoord());
Change the line to match the example shown below:
dst = mix( sampleNearest(src2,outCoord()), sampleNearest(src, outCoord()), amount);
Note: The mix function is pre-built into Pixel Bender. This equation:
a = mix( b, c, d )
is equivalent to:
a = ( (1 – d) * b) + ( d * c )
- Click the Run button to run the filter.
- Interact with the filter by moving the slider back and forth. Notice that the blend effect applied to the images is based on the position of the slider (see Figure 2).
- Choose File > Save Filter to save the Pixel Bender kernel.
- Choose File > Export Filter for Flash Player. In the Export File dialog box that appears, save the PBJ file as Exercise9Filter.pbj to the folder named pixel_bender on your desktop.
Where to go from here
After testing and reviewing the code from the Flash movie, continue with Part 10, the final installment in this series, where you'll learn how to use a multiple-input filter in Flash.
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
- Pixel Bender release notes
- Effects with the Pixel Bender Toolkit – Part 1: Creating a new filter
- Effects with the Pixel Bender Toolkit – Part 2: Creating a vintage tone filter
- Effects with the Pixel Bender Toolkit – Part 3: Adding parameters to filters
- Effects with the Pixel Bender Toolkit – Part 4: Sampling multiple pixels
- Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash
- Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash
- Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter
- Effects with the Pixel Bender Toolkit – Part 8: Controlling the displacement filter with mouse positioning
- Effects with the Pixel Bender Toolkit – Part 10: Using a multiple-input filter as a blend shader
Tutorials & Samples |
Samples
| 04/10/2012 | Fast Fourier Transform (FFT) in Pixel Bender? |
|---|---|
| 04/19/2012 | Shader works in toolkit, not in Flash |
| 04/12/2012 | Pixel Bender removed from AE CS6 !? |
| 03/22/2012 | Load an HDR image into Pixel Bender Toolkit |
