While just randomly browsing through wonderfl yesterday, I came across this little actionscripted bayer filter that I really liked (the one you get when you click the button labelled ‘Bayer’, that is).
Now, seeing as how I’ve been trying to learn some Pixel Bender coding lately (thanks to a little inspiration from Ralph Hauwert) I thought I’d see if I could recreate something similar with good ol’ PB. The results really aren’t too shabby and actually pretty damn fast. You can check the filter out below being applied to a Video instance (you’ll need a webcam, though). Adjust the size of the effect with the slider and decide whether or not to show color using the checkbox.
I’m sure several similar things have been done in the past, but sometimes reinventing the wheel can be a decent learning experience. If anyone would like to play around with the filter, the source is just below.
UPDATE
Got a few complaints (one in the comments below) that a null object error was being thrown when viewing the example. Just wanted to repeat that a webcam is necessary for checking it out, but I also added a quick check/error handler so that if you don’t have a webcam installed and you’re using the debug flash player, an annoying error won’t be thrown.
bayer.pbk
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<languageVersion : 1.0;> kernel NewFilter < namespace : "com.onebyonedesign"; vendor : "onebyonedesign.com"; version : 1; description : "Bayer filter effect with or without color"; > { const float4x4 MAT = float4x4(float4(0.0, 8.0, 2.0, 10.0), float4(12.0, 4.0, 14.0, 6.0), float4(3.0, 11.0, 1.0, 9.0), float4(15.0, 7.0, 13.0, 5.0)); parameter int size < minValue : 1; maxValue : 200; defaultValue : 16; description : "Size of the effect"; >; parameter int useColor < minValue : 0; maxValue : 1; defaultValue : 1; description : "use color or black and white"; >; input image4 src; output pixel4 dst; void evaluatePixel() { float2 c = outCoord(); // pain in the ass work around because matrix indices must be constants for flash player int xc = int(mod(c[0], 4.0)); int yc = int(mod(c[1], 4.0)); float threshold; if (xc == 0 && yc == 0) threshold = MAT[0][0]; if (xc == 1 && yc == 0) threshold = MAT[1][0]; if (xc == 2 && yc == 0) threshold = MAT[2][0]; if (xc == 3 && yc == 0) threshold = MAT[3][0]; if (xc == 0 && yc == 1) threshold = MAT[0][1]; if (xc == 1 && yc == 1) threshold = MAT[1][1]; if (xc == 2 && yc == 1) threshold = MAT[2][1]; if (xc == 3 && yc == 1) threshold = MAT[3][1]; if (xc == 0 && yc == 2) threshold = MAT[0][2]; if (xc == 1 && yc == 2) threshold = MAT[1][2]; if (xc == 2 && yc == 2) threshold = MAT[2][2]; if (xc == 3 && yc == 2) threshold = MAT[3][2]; if (xc == 0 && yc == 3) threshold = MAT[0][3]; if (xc == 1 && yc == 3) threshold = MAT[1][3]; if (xc == 2 && yc == 3) threshold = MAT[2][3]; if (xc == 3 && yc == 3) threshold = MAT[2][3]; pixel4 color = sampleNearest(src, outCoord()); float r = (color.r * 255.0) / float(size); float g = (color.g * 255.0) / float(size); float b = (color.b * 255.0) / float(size); float avg = (r + g + b) / 3.0; if (avg < threshold) { if (useColor == 1) { dst.r = color.r; dst.g = color.g; dst.b = color.b; } else { dst.r = dst.g = dst.b = 0.0; } } else { dst.r = dst.g = dst.b = 1.0; } dst.a = 1.0; } } |
I get a dark grey screen and no other flash and this error in flash debug:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Main/initVideo()
at Main/init()
at Main()
Hey Arno,
It sounds like either you don’t have a webcam attached, or the Flash player couldn’t detect it for whatever reason, so the webcam instance is coming up null when it tries to attach to the video (I didn’t go overboard on error handling for such a small thing – obviously)..
That’s awesome, you’ve inspired me now too. Thanks for the source.
Very cool effect – thanks for sharing!
Aplenty of other inspiring and well written articles in your blog – keep up the good work!
Do you have the original code from wonderfl anymore? The website is down :(
Hey Jordan, unfortunately I don’t. I was really crushed when I saw that wonderfl had closed down. I wish they had sent out advanced notice to members – I lost a lot of decent code there.