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

最新推荐文章于 2013-09-11 07:54:00 发布

流泪的鱼

最新推荐文章于 2013-09-11 07:54:00 发布

阅读量713

点赞数

分类专栏： Pixel Bender 文章标签： filter float dst parameters image flash

Pixel Bender 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用PixelBender Toolkit更新位移滤镜，实现多方向移动及增强效果，并通过滑块组件实现交互式动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Requirements

User level

Beginning

Required products

Sample files

pixel_bender_07.zip

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

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

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

Figure 2. Two images more misaligned after changing the parameters

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: