
Introducing Adobe Pixel Bender (Part 1)
Pixel Bender technology was developed in an Adobe lab to create filters for video and image processing. Pixel Bender (PB) filters can be used in software products: Adobe Flash, Adobe Flex, Adobe Photoshop, Adobe After Effects. At its core, PB provides the ability to programmatically process images that support hardware acceleration. It is good because it allows you to process each pixel in a phased bypass image.
The Pixel Bender Toolkit is absolutely free, you can download it at the following link labs.adobe.com/technologies/pixelbender . PBT (Pixel Bender Toolkit) includes: an integrated development environment with support for a native C-like language and graph language, filter examples, documentation.
Creating filters is divided into 3 stages:
Getting started writing filters. Run the program. Create a new filter (File> New Kernel Filter) The code appears in the code editor:

The
This line indicates that the input image
Because We will output the processed image by the 1st pixel. We should indicate the type and name of the processed pixel. In this case, the pixel
Function
In line
It's no secret that you can brighten the image by increasing the values of the channels. In the function
Press the Run button and see that the image has become brighter. Now let's try to shift our image 10 pixels higher and 15 pixels to the left. To do this,
According to the swirling rule, which is implemented in PB, it turns out like this:
As you may have guessed, the ordinate axis is up, the abscissa axis to the left.
Now we’ll try to fill the pixels in the coordinate
We write in the function

Let’s think of a glow size of 200. Next, divide the glow size by the distance from its center to the current pixel.

Let's say we need to make pixels 5x5 in size. The color of this large pixel will be taken from its upper left corner. As we go around the pixels, we will divide each coordinate by the size of a large pixel, thereby we find out its number in the two-dimensional array (m, n). Next, multiply m and n by the size of a large pixel in order to find out the coordinate of the upper left corner. Now let's try to implement bloom. Create a “container” in which we will add our image with an offset. // Move Left, Up // Move Left, Down // Move Right, Up // Move Left, Down

Here is the result:

crossStitch Filter: You


can find it in the Adobe Pixel Bender Exchange. Let's think a little about implementation. The filter itself turns the picture into a grid, i.e. the output image contains less than half the pixels than the original. Therefore, as we go around each pixel of the incoming image (function

Conclusion: With PB, you can implement any effects. Helps in improving the performance of RIA applications. An indispensable tool for programmers who work with graphics. Learning how to process images in the Pixel Bender will save you a lot of time in the future.
Where to get ready-made filters?
Adobe Pixel Bender Exchange Site www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26
Petri Leskinen pixelero.wordpress.com/category/pixel-bender
Mrdoob www.mrdoob.com/blog/post/586
Kevin GoldSmith blogs.adobe.com/kevin.goldsmith
For cool algorithms climb here iquilezles.org/www/index.htm
Author: Sergey Flastar Gonchar flash developer flastar.ru/blog
The Pixel Bender Toolkit is absolutely free, you can download it at the following link labs.adobe.com/technologies/pixelbender . PBT (Pixel Bender Toolkit) includes: an integrated development environment with support for a native C-like language and graph language, filter examples, documentation.
Creating filters is divided into 3 stages:
- Algorithm development
- Writing an algorithm to PBT
- Export to bytecode
Getting started writing filters. Run the program. Create a new filter (File> New Kernel Filter) The code appears in the code editor:

The
languageVersion
language version must be specified in the tag . The tag kernel
contains a description of the filter: author, version, developer namespace, characteristics. input image4 src;
This line indicates that the input image
src
is of type image4
. A type image4
has 4 properties: a (transparency), b (blue channel), g (green channel), r (red channel). Because We will output the processed image by the 1st pixel. We should indicate the type and name of the processed pixel. In this case, the pixel
dst
will be of type pixel4
. output pixel4 dst;
Function
evaluatePixel()
will be called for each pixel. If the function will not return variables, specify void
. In order to find out which pixel is currently being processed, it is necessary to use outCoord()
this type variable float2
, a vector, which has two properties: X and Y. The function sampleNearest(изображение, координаты);
returns a pixel (pixel4) in the coordinates of the specified image. In line
dst = sampleNearest(src, outCoord());
, we assign pixels located on the image src
in the coordinates outCoord().x
, outCoord().y
. After starting the filter (Run button), we see that the image has not changed, because we just copied the pixels. Now let's try to change this situation. It's no secret that you can brighten the image by increasing the values of the channels. In the function
evaluatePixel
we write:dst += sampleNearest(src,outCoord());
dst += sampleNearest(src,outCoord());
dst += sampleNearest(src,outCoord());
Press the Run button and see that the image has become brighter. Now let's try to shift our image 10 pixels higher and 15 pixels to the left. To do this,
evaluatePixel
we write: dst = sampleNearest(src,outCoord()+float2(15,10));
According to the swirling rule, which is implemented in PB, it turns out like this:
dst = sampleNearest(src,float2(outCoord().x + 15, outCoord().y + 10);
As you may have guessed, the ordinate axis is up, the abscissa axis to the left.
Now we’ll try to fill the pixels in the coordinate
x
less than 50, with pixels in the coordinate. x=50;
We write in the function
evaluatePixel
:
Now we’ll try to create a beam of light in the image.
As mentioned above, to make a pixel brighter, you need to increase the value of its channels.
Take a random coordinate of the light beam, let's say it will be a parameterif(outCoord().x
{
dst = sampleNearest(src,float2(float(50), outCoord().y));
}
else
{
dst = sampleNearest(src, outCoord());
}

float2 center = float2(100,100);
Let’s think of a glow size of 200. Next, divide the glow size by the distance from its center to the current pixel.
dst = 200/distance(outCoord(), center) * sampleNearest(src, outCoord());

Let's say we need to make pixels 5x5 in size. The color of this large pixel will be taken from its upper left corner. As we go around the pixels, we will divide each coordinate by the size of a large pixel, thereby we find out its number in the two-dimensional array (m, n). Next, multiply m and n by the size of a large pixel in order to find out the coordinate of the upper left corner. Now let's try to implement bloom. Create a “container” in which we will add our image with an offset. // Move Left, Up // Move Left, Down // Move Right, Up // Move Left, Down
float2 sc = floor(outCoord() / float2(5, 5));
sc *= 5;
dst = sampleNearest(src, sc);

float4 outpixel;
outpixel += sampleNearest(src,outCoord()+float2(1,1));
outpixel += sampleNearest(src,outCoord()+float2(1,-1));
outpixel += sampleNearest(src,outCoord()+float2(-1,1));
outpixel += sampleNearest(src,outCoord()+float2(-1,-1));
dst = outpixel / float(4.0); //
We display the resulting pixel, not forgetting to reduce the value of the channel by dividing. If we do not reduce, then the image will turn out bright and contrast. Here is the result:

crossStitch Filter: You


can find it in the Adobe Pixel Bender Exchange. Let's think a little about implementation. The filter itself turns the picture into a grid, i.e. the output image contains less than half the pixels than the original. Therefore, as we go around each pixel of the incoming image (function
evaluatePixel
), we will look at the coordinates, if the pixel lies on the diagonal of a square of size size (dynamic parameter), then we display it. We look at the implementation.
Conclusion: With PB, you can implement any effects. Helps in improving the performance of RIA applications. An indispensable tool for programmers who work with graphics. Learning how to process images in the Pixel Bender will save you a lot of time in the future.
Where to get ready-made filters?
Adobe Pixel Bender Exchange Site www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26
Petri Leskinen pixelero.wordpress.com/category/pixel-bender
Mrdoob www.mrdoob.com/blog/post/586
Kevin GoldSmith blogs.adobe.com/kevin.goldsmith
For cool algorithms climb here iquilezles.org/www/index.htm
Author: Sergey Flastar Gonchar flash developer flastar.ru/blog