LogoLogo
  • Home
  • Projects
  • About
  • Contact

Bayer Mosaic Filter in Pixel Bender

Devon O. · July 16, 2010 · Flash · 7 comments
7

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.

Get Adobe Flash player

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

C
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;
    }
}
  Facebook   Pinterest   Twitter   Google+
pixel bender
  • Animated Particles, Books, and Code – It’s a New Year
    January 01, 2014 · 3 comments
    5362
    22
    Read more
  • Starling, Nape Physics, and PhysicsEditor
    November 25, 2012 · 11 comments
    8073
    15
    Read more
  • Unity Machine Learning and a Good Riddance to 2020
    December 30, 2020 · 0 comments
    So it's been just over a year since my last post here. As you may imagine, I've
    174
    4
    Read more
7 Comments:
  1. 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()

    Arno · July 16, 2010
  2. 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)..

    Devon O. · July 16, 2010
  3. That’s awesome, you’ve inspired me now too. Thanks for the source.

    mousedown · July 21, 2010
  4. Very cool effect – thanks for sharing!
    Aplenty of other inspiring and well written articles in your blog – keep up the good work!

    Andreas Weber · January 24, 2011
  5. Do you have the original code from wonderfl anymore? The website is down :(

    Jordan · June 01, 2017
  6. 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.

    Devon O. · June 01, 2017

Leave a Comment! Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang