您的位置:首页 > Web前端

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

2011-03-07 13:55 477 查看
Requirements

User level

Beginning

Required products

Flash Player 10 and later

Flash Professional (Download trial)

Pixel Bender Toolkit (Macintosh)

Pixel Bender Toolkit (Windows)

Sample files

.zip]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:

Pixel Bender forum

Pixel Bender basics for Flash

Pixel Bender basics for Flex and AIR
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐