Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter

Content

Created

11 January 2010

页面工具

在 LinkedIn 上共享

打印

要求

必备知识

Some familiarity with ActionScript 3.

用户级别

初级

必需产品

范例文件

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 float parameter 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.

Figure 1. Testing each slider to see how it applies the filter to the image

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 amount parameter 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 fileExercise7Filter.pbj and save it to the pixel_bender folder on your desktop.

Figure 2. Two images more misaligned after changing the parameters

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.