Today I spent a few hours getting up to speed with Pixel Bender. It definitely has a steep learning curve but it is well worth the effort. Below you can check out my first creation called SquarePattern for lack of a better word. This filter essentially samples the current pixel as well as a different pixel and averages them out. Which pixel is dependent on the amount parameter. The result is a kind of crosshatch effect.
I was actually really excited earlier because I created a cool blur effect but I couldn’t export it to Flash because you can’t use for loops if the filter will be used in the player. Bummer! To do a blur, you essentially average a certain amount of pixels together. The number of pixels you average determines the strength of the blur. Oh well, I hope we add loops to Pixel Bender soon.
Click on the image below to see the filter in action. You must have Flash Player 10 RC installed to view it.
The Pixel Bender code is below. I will be doing a tutorial on this very soon so don’t worry if it looks scary.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <languageversion : 1.0;>
kernel QuadBlur
< namespace : "com.leebrimelow.filters";
vendor : "Lee Brimelow";
version : 1;
description : "Creates a four-direction blur.";
>
{
input image4 src;
output pixel4 dst;
parameter int amount
< minValue:0;
maxValue:100;
defaultValue:0;
>;
void
evaluatePixel()
{
pixel4 orig = sampleNearest(src, outCoord());
float2 pos = outCoord();
orig += sampleNearest(src, outCoord()-float2(cos(float(pos.x))*float(amount),0));
orig += sampleNearest(src, outCoord()-float2(sin(float(pos.y))*float(amount),0));
orig += sampleNearest(src, outCoord()-float2(0,cos(float(pos.x))*float(amount)));
orig += sampleNearest(src, outCoord()-float2(0,sin(float(pos.y))*float(amount)));
dst = orig/4.0;
}
}</languageversion> |
The ActionScript 3 code that I used to import the new shader is shown below. I left out the code for the throw slider as I’ve already shown that before.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| var l:URLLoader = new URLLoader();
l.dataFormat = URLLoaderDataFormat.BINARY;
l.addEventListener(Event.COMPLETE, onComplete);
l.load(new URLRequest("squarepattern.pbj"));
var shader:Shader;
var filter:ShaderFilter
function onComplete(e:Event):void
{
shader = new Shader(l.data);
filter = new ShaderFilter(shader);
image.filters = [filter];
addEventListener(Event.ENTER_FRAME, loop);
}
function onChange(p:Number):void
{
p *= 50;
shader.data.amount.value = [p, p, p];
image.filters = [filter];
} |
You can download the PBJ file if you want this odd effect in your Flash movies.
Lee
I just uploaded the 
I just uploaded the 
