Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter
2011-03-07 13:55
477 查看
Requirements
Flash Professional (Download trial)
Pixel Bender Toolkit (Macintosh)
Pixel Bender Toolkit (Windows)
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.
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.
Evaluate the code after opening the file. The kernel should look something like this:
Locate the following section of code:
Change the
Locate the next line of code to be updated:
Change the line shown above to look like this:
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.
Edit the code of the
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.
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
User level
BeginningRequired products
Flash Player 10 and laterFlash Professional (Download trial)
Pixel Bender Toolkit (Macintosh)
Pixel Bender Toolkit (Windows)
Sample files
.zip]pixel_bender_07.zipIn 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).
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
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).
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
相关文章推荐
- 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 8: Controlling the displacement filter with mouse positioning
- Effects with the Pixel Bender Toolkit – Part 1: Creating a new filter
- Effects with the Pixel Bender Toolkit – Part 5: Applying a filter to an image in Flash
- Effects with the Pixel Bender Toolkit – Part 2: Creating a vintage tone filter
- 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 6: Modifying Pixel Bender parameters in Flash
- 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 9: Integrating multiple image sources with a Pixel Bender kernel
- Effects with the Pixel Bender Toolkit
- Exploit writing tutorial part 10 : Chaining DEP with ROP – the Rubik’s[TM] Cube
- Call SOAP Web services with Ajax, Part 2: Extend the Web services client
- set up the filewall with netfilter/iptables under linux platform
- Advanced Visual Effects with OpenGL - Inside the GDC 2006(From GameDev.net)
- SWT: The Standard Widget Toolkit -- PART 1: Implementation Strategy for Java™ Natives
- Power up C++ with the Standard Template Library: Part 1
- Using a Single Business Pattern with the RUP -part3