Beginning To Pixel Bender - 2
November 7, 2008 – 4:24 pmThis is a second part of “Beginning To Pixel Bender” article. If you didn’t read first one you can reach form the link at below.
http://enginyoyen.com/blog/eng/index.php/beginning-to-pixel-bender-1/
Colour Channels
32-Bit of image is have 4 color channels (A:alpha, R:red, G:Greeen, B:blue). Getting color channels in Pixel Bender is really easy. For reaching the channel color of pixel first you have to reach to pixel. For getting the pixel we can use sampleNearest() function. All we have to do is create a new variable and set data type as a pixel4. For assigning value to variable we will use the sampleNearest() function.
-
pixel4 channels= sampleNearest(src,outCoord());
As we all ready get the pixel value now we can get the any color channel we want by just typing first letter of the color channel;
-
channels.a
-
channels.r
-
channels.g
-
channels.b
For example; for making the grayscale image what we have to do is getting green color channel and assign as a blue and red color channel. Simply we can say we will rewrite blue and red channel;
-
channels.r = channels.g;
-
channels.b = channels.g;
That’s it. But what we shouldn’t for get is we have to return some data back. As a result evaluatePixel() function will look like this;
-
evaluatePixel(){
-
pixel4 channels= sampleNearest(src,outCoord());
-
channels.r = channels.g;
-
channels.b = channels.g;
-
dst = channels;
-
}

Coordinates
The code that you are writing in evaluatePixel() function is being apply to any pixel on image. This mean only value is changing in Kernel is the image coordinate. For reaching the coordinate we can use the ourCoord() function. This function returns a data type which call float2. The data that return is a coordinate which is processing on image in evaluatePixel() function.
The coordinate system over here works same is video coordinate system which is; x increase while is going to right and y increase while is going down. Starting point is top left and x and y is getting value 0 which is same in Flash coordinate system.
For getting the coordinates you can use this code;
-
float2 coord = outCoord();
This code will return x and y coordinate. But if you want t reach x and y separately by using float type instead of float2. All you have to do is be careful about data type that you are using;
-
float x = outCoord().x;
-
float y = outCoord().y;
Now we can make an example. First we will get the x and y coordinate of the current pixel;
-
float x = outCoord().x;
-
float y = outCoord().y;
Afterwards I will create a variable call Mix and as a data type I will assign float. The value I will give to this variable is sinus of the multiply of x and y. As you see on the code after I get the result of sinus I multiply again with 10. This number is just a random number that I give for getting the more sharpen result.
-
float Mix = (sin(x*y)*10.0);
And now all we have to do is return this valur back;
-
dst = sampleNearest(src, outCoord()+Mix);
Result will be like this;
![]()
PC: Well there were no targets by using sinus. I was just testing and it looks fine and simple for giving example so that is the reason why I use sinus. If you just being to coding and have no experience besting you can do is make some experiments, so it will help you to get in all situation much faster.
Parameters
The filter above is returning same result every time we run because we give static value. In this case we can use parameters. Parameters are usually helping us to decide how strong you we want to apply effect. You can think of this like deciding how much of shadow you want to use in DropShadow filter. In our case we will use one parameter for deciding diffuse of filter.
Creating new parameter is simple. First you have to use parameter statement, than for data tye you can type as float, and last one is the name of parameter. You can see example at below;
-
parameter float amount
-
<
-
minValue:0.0;
-
maxValue:500.0;
-
defaultValue:10.0;
-
>;
In this code block minValue is the minimum value that our parameter will take. maxValue is the maximun value of parameter, and defaultValue is the default value of filter which is run automatically.
After you add this code in Pixel Bender and pres Run buton you will see on the 3. part of program there is a parameter slider;
![]()
The code should look like this;
-
<languageVersion : 1.0;>
-
kernel MyTestFilter
-
< namespace : "enginyoyen.com";
-
vendor : "No Vendor";
-
version : 1;
-
description : "This is a test Filter";
-
>;
-
{
-
input image4 src;
-
output pixel4 dst;
-
-
parameter float amount
-
<
-
minValue:0.0;
-
maxValue:500.0;
-
defaultValue:10.0;
-
>;
-
-
void
-
evaluatePixel()
-
{
-
float x = outCoord().x;
-
float y = outCoord().y;
-
float Mix = (sin(x*y)*amount);
-
dst = sampleNearest(src, outCoord()+Mix);
-
}
-
}
Now we can use parameter and see the result on image at same time. The image at below take 50 as value of amount parameter.
![]()
Upshot
In next article I will cover how to use filters which been created from Pixel Bender in Actionscript. Pixel Bender might look hard at beginning but when you learn the basic I think you create pretty good stuff. (All you need is creativity…)
Take Care
Engin!
