Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter
Created
11 January 2010
Requirements
Prerequisite knowledge
Some familiarity with ActionScript 3.
User level
Beginning
Required products
Sample files
- pixel_bender_07.zip (4 KB)
In this article, you'll update a Pixel Bender displacement filter to make it move in multiple directions. You also see how to make the displacement filter effect more dramatic. This is the seventh 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 connect the parameters of a filter to a Slider component to create an interactive filter animation. You used the parameter metadata to specify the minimum and maximum values for the slider. And you added a displacement filter to composite two iterations of the same image in Flash Player.
In this section, you'll improve upon the existing displacement filter. You'll also work with the Pixel Bender float2 type.
Setting up the files
If you are jumping into this project now and haven't completed the earlier parts of this series, download the sample files provided. Uncompress the ZIP file and save the contents into a folder named pixel_bender on your desktop.
If you have been following along with the instructions provided in the earlier sections, then you know that the current version of the displacement filter isn't very pronounced. Also, the composited image currently only moves from the upper left to the lower right. In this part, you'll change the code to enable the displacement to move in any direction.
Editing the displacement filter
In this section, you'll open the Pixel Bender Toolkit to edit one of the filters you created in Part 4. If you've been following along from the beginning, open the PBK file you saved in Part 4, named Exercise4.pbk in the Pixel Bender Toolkit. Otherwise, just use the provided file in the sample files folder.
Evaluate the code after opening the file. The kernel should look something like this:
<languageVersion : 1.0;>
kernel Part4Filter
< namespace : "com.adobe.devnet.pixelbender";
vendor : "Kevin's Filter Factory";
version : 5;
description : "Playing around with pixels";
>
{
input image4 src;
output pixel4 dst;
parameter float amount
<
minValue: -5.0;
maxValue: 5.0;
defaultValue: 0.0;
>;
void
evaluatePixel()
{
dst = sampleNearest(src,outCoord());
pixel4 dst2 = sampleNearest(src,outCoord()+float2(amount,amount));
dst += dst2;
dst /= 2.0;
}
}
Enabling displacement in any direction
In this section, you'll add the code that will enable the displacement filter to move in any direction. Follow these steps:
- Locate the following section of code:
parameter float amount
<
minValue: -5.0;
maxValue: 5.0;
defaultValue: 0.0;
>;
- Change the
floatparameter declaration to match the code shown below:
parameter float2 amount
<
minValue: float2( -5.0, -5.0 );
maxValue: float2( 5.0, 5.0 );
defaultValue: float2( 0.0, 0.0 );
>;
- Locate the next line of code to be updated:
pixel4 dst2 = sampleNearest(src,outCoord()+float2(amount,amount));
- Change the line shown above to look like this:
pixel4 dst2 = sampleNearest(src,outCoord()+ amount);
- Click the Run button to run the filter.
- Notice that there are now two sliders displayed instead of one. Try moving each slider independently to see its effect on the image (see Figure 1).
- After running the filter, save the updated version of the filter as Exercise7Filter.pbk. Save it in the pixel_bender folder on your desktop.
Making the displacement effect more pronounced
By increasing the range of the displacement, it is possible to get more of a pronounced effect. In this section, you'll edit the code to see how the effect looks when the two composited images are offset more dramatically. Follow these steps:
- Edit the code of the
amountparameter to allow it to vary from –20.0,–20.0 and 20.0,20.0. - Click the Run button to run the filter.
- Test the sliders and notice that now the sliders have a much larger range of displacement (see Figure 2).
- Choose File > Save Filter to save the filter.
- Choose File > Export Filter for Flash Player. In the dialog box that appears, name the file Exercise7Filter.pbj and save it to the pixel_bender folder on your desktop.
Where to go from here
After testing and reviewing the code from the Flash file, continue with Part 8 in this series where you'll learn how to add interactivity with the mouse position to control the displacement filter, rather than using a slider control.
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 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 1: Creating a new filter
- Effects with the Pixel Bender Toolkit – Part 6: Modifying Pixel Bender parameters in Flash
- Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash
- Effects with the Pixel Bender Toolkit – Part 4: Sampling multiple pixels
- Pixel Bender release notes
- Effects with the Pixel Bender Toolkit – Part 8: Controlling the displacement filter with mouse positioning
- Effects with the Pixel Bender Toolkit – Part 9: Integrating multiple image sources with a Pixel Bender kernel
- Animating a particle system using Pixel Bender
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 |
