Effects with the Pixel Bender Toolkit – Part 9: Integrating multiple image sources with a Pixel Bender kernel

Content

• Creating a Pixel Bender kernel with two inputs
• Adding a parameter to control the blending
• Where to go from here

 

Modified

11 January 2010

 

页面工具

 

在 LinkedIn 上共享

 

 

打印

Tags

 

 

 要求

必备知识

Some familiarity with ActionScript 3.

用户级别

初级

必需产品

• Flash Player 10 and later
• Flash Professional (Download trial)
• Pixel Bender Toolkit (Macintosh)
• Pixel Bender Toolkit (Windows)

范例文件

• pixel_bender_09.zip (6 KB)

In this article, you'll learn how to create a Pixel Bender kernel that integrates values from multiple image sources. This is the ninth 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 add interactivity by tracking the user's mouse movements. You also updated the code to constrain the filter's parameters based on the minimum and maximum metadata values.

In this section, you'll learn how to create a Pixel Bender kernel that uses two input images to blend them together.

Creating a Pixel Bender kernel with two inputs

To create a Pixel Bender kernel that integrates values from multiple image sources, follow these steps:

1. Launch the Pixel Bender Toolkit.
2. Choose File > New Kernel to create a new filter.
3. Import the YellowFlowers.png image and then update the name of the filter and set the filter metadata as described in Part 1.
4. Locate the first input line. Add a second line and type the following code:

input image4 src2;

After making these changes, the filter code should look like this:

<languageVersion : 1.0;> kernel blendy < namespace : "com.adobe.devnet.pixelbender"; vendor : "Kevin's Filters"; version : 1; description : "mashes two inputs together"; > { input image4 src; input image4 src2; output pixel4 dst; void evaluatePixel() { dst = sampleNearest(src,outCoord()); } }

5. Click the Run button to run the filter. If you do not encounter any syntax errors, the IDE will prompt you to load a second image.
6. If the Load Image file dialog box does not default to one of the following locations (depending on the platform), manually browse to the sample images folder at this location:
   • Windows: C:\Program Files (x86)\Adobe\Adobe Utilities\Pixel Bender Toolkit\sample images
   • Mac OS: Mac HD/Applications/Utilities/Adobe Utilities/Pixel Bender Toolkit/sample images
7. Select the ShrineNearDarjeeling.png image located in the sample images folder, and click Open.

   Note: Although you've selected the PNG file, you won't see the second image yet. However, you should see the filename in the status bar of the application. The second image will not appear until your kernel uses pixels from the second image in your filter.

8. Locate the line in the code that sets the output value:

dst = sampleNearest(src,outCoord());

Change the line to match the example below:

dst = sampleNearest(src2,outCoord());

9. Click the Run button to run the filter. The ShrineNearDarjeeling.png image appears instead of the YellowFlowers.png image.
10. Choose File > Save Filter. Save the Pixel Bender kernel as Exercise9Filter.pbk in the folder named pixel_bender on your desktop.
11. Locate the line of code that sets the output value:

dst = sampleNearest(src2,outCoord());

Change the line to match the example below:

dst = sampleNearest(src2,outCoord()) + sampleNearest(src, outCoord());

12. Click the Run button to run the filter. This time, the ShrineNearDarjeeling.png image is added to the YellowFlowers.png image. This effect looks similar to the Photoshop Linear Dodge (Add) blend mode effect (see Figure 1).
13. Choose File > Save Filter to save the Pixel Bender kernel and preserve your changes.

Figure 1. Two image sources composited on top of each other

Adding a parameter to control the blending

Now that you've loaded two images at once and applied the filter to create an effect, you can edit the code to fine-tune the way the two images are blended together:

1. Locate the following line of code:

output pixel4 dst;

2. Add a new line immediately following the line above. Add this code on that line:

parameter float amount;

After making these changes, your kernel should look like this:

<languageVersion : 1.0;> kernel blendy < namespace : "com.adobe.devnet.pixelbender"; vendor : "Kevin's Filters"; version : 1; description : "mashes two inputs together"; > { input image4 src; input image4 src2; output pixel4 dst; parameter float amount; void evaluatePixel() { dst = sampleNearest(src2,outCoord()) + sampleNearest(src, outCoord()); } }

3. Locate the line that sets the output pixel value in the code:

dst = sampleNearest(src2,outCoord()) + sampleNearest(src, outCoord());

Change the line to match the example shown below:

dst = mix( sampleNearest(src2,outCoord()), sampleNearest(src, outCoord()), amount);

Note: The mix function is pre-built into Pixel Bender. This equation:

a = mix( b, c, d )

is equivalent to:

a = ( (1 – d) * b) + ( d * c )

4. Click the Run button to run the filter.
5. Interact with the filter by moving the slider back and forth. Notice that the blend effect applied to the images is based on the position of the slider (see Figure 2).
6. Choose File > Save Filter to save the Pixel Bender kernel.
7. Choose File > Export Filter for Flash Player. In the Export File dialog box that appears, save the PBJ file as Exercise9Filter.pbj to the folder named pixel_bender on your desktop.

Figure 2. Moving the slider to see the blend effect change