My first Pixel Bender filter (SquarePattern)
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
Very cool Lee,
Looks like a lot of fun can be had with Pixel Bender. Looking forward to the video tutorial on this.
Lee, the .pbk needs the following changes to work in Pixel Bender Toolkit:
– (line 1) rename languageversion to languageVersion
– (line 31) remove
(looks like end tags weren’t escaped properly during comment submission) That line 31 edit should’ve said to remove the ending languageversion tag, and only have the closing brace.
You’ve gone slider C-C-CRAAAAAZY!!!
@Jeff Thanks. This code highlighter thing kept inserting a closing tag for me. I had to change it in the DB.
I like the slider. Would you like to publish/send the sources?
The filter is great as well
It’s look like very cool filter…maybe we can use it in a photo gallery thumbnails, when you put this filter in your pictures and when you put mouse over, the filter disappear…is nice…
Can Pixel Bender Filters be used on video?
nice… it looks like Frosted Glass. there’s a name for ya.
Are there anymore tutorials on pixelBender? I would really like to get into it but the documentation so far is very rough and I didn’t get my head around it yet. So some beginner Tutorials would be very nice.
@Ola afaik they can be used on flvs.
Awesome as usual Lee…Thanks a ton