Nomadic Functions
Where selfishness is good™

With this library you can apply ColorMatrix’s on colors in pure Javascript.

This library supports large portion of the most common color functions available, including:

Hue, Saturation, Brightness, Contrast, Exposure, Temperature, Tint, Channels, Blindness, Colorize, Threshold, and Invert

We’d love it if anyone wants to contribute another ColorMatrix to the archive!

External: <CANVAS> ColorMatrix

JAVASCRIPT

/* Color Matrix Library : v1.0 : 2007/04/19 */
/* http://www.nofunc.com/Color_Matrix_Library/ */

new function(_) {

color={};

color.matrix_r={

    /* Color */
    
    'Hue':function(v) { v*=Math.PI/180; // 0 : 360
    
        var r=.R, g=.G, b=.B, c=Math.cos(v), s=Math.sin(v);

        return([(r+(c*(1-r)))+(s*(-r)), (g+(c*(-g)))+(s*(-g)), (b+(c*(-b)))+(s*(1-b)), 0, 0,
                (r+(c*(-r)))+(s*0.143), (g+(c*(1-g)))+(s*0.14), (b+(c*(-b)))+(s*-0.283), 0, 0,
                (r+(c*(-r)))+(s*(-(1-r))), (g+(c*(-g)))+(s*g), (b+(c*(1-b)))+(s*b), 0, 0,
                0,0,0,1,0,  0,0,0,0,1]);

    },
    'Saturation':function(v) { var n=1-v; // -3 : 3

        var r=(n*.299), g=(n*.587), b=(n*.114);

        return([r+v,g,b,0,0,  r,g+v,b,0,0,  r,g,b+v,0,0,  0,0,0,1,0,  0,0,0,0,1]);
    
    },
    'Brightness':function(v) { // -255 : 255

        return([1,0,0,0,v,  0,1,0,0,v,  0,0,1,0,v,  0,0,0,1,0,  0,0,0,0,1]);
    
    },
    'Contrast':function(v) { // -2 : 5

        return([v,0,0,0,128*(1-v),  0,v,0,0,128*(1-v),  0,0,v,0,128*(1-v),  0,0,0,1,0,  0,0,0,0,1]);
    
    },
    'Exposure':function(v) { // -3 : 3
    
        return([v,0,0,0,0,  0,v,0,0,0,  0,0,v,0,0,  0,0,0,1,0,  0,0,0,0,1]);

    },
    'Temperature':function(v) { var r=v, g=v, b=-v; // -128 : 128

        return([1+(r/256),0,0,0,0,  0,1,0,0,0,  0,0,1+(b/256),0,0,  0,0,0,1,0,  0,0,0,0,1]);

    },
    'Tint':function(v) { var r=v, g=-v, b=v; // -128 : 128

        return([1+(r/256),0,0,0,0,  0,1,0,0,0,  0,0,1+(b/256),0,0,  0,0,0,1,0,  0,0,0,0,1]);

    },
    'Channels':function(r,g,b,a) {
    
        function fu(n) { var z=((r&1)==1?1:0)+((r&2)==2?1:0)+((r&4)==4?1:0)+((r&8)==8?1:0); return(z>0?1/z:z); }
    
        var R=fu(r), G=fu(g), B=fu(b), A=fu(a);
        
        return([(r&1)==1?R:0,(r&2)==2?R:0,(r&4)==4?R:0,(r&8)==8?R:0,0,
                (g&1)==1?G:0,(g&2)==2?G:0,(g&4)==4?G:0,(g&8)==8?G:0,0,
                (b&1)==1?B:0,(b&2)==2?B:0,(b&4)==4?B:0,(b&8)==8?B:0,0,
                (a&1)==1?A:0,(a&2)==2?A:0,(a&4)==4?A:0,(a&8)==8?A:0,0]);

    },
    'Blind':function(v) {

        return({'Normal':[1,0,0,0,0, 0,1,0,0,0, 0,0,1,0,0, 0,0,0,1,0, 0,0,0,0,1],
                'Protanopia':[0.567,0.433,0,0,0, 0.558,0.442,0,0,0, 0,0.242,0.758,0,0, 0,0,0,1,0, 0,0,0,0,1],
                'Protanomaly':[0.817,0.183,0,0,0, 0.333,0.667,0,0,0, 0,0.125,0.875,0,0, 0,0,0,1,0, 0,0,0,0,1],
                'Deuteranopia':[0.625,0.375,0,0,0, 0.7,0.3,0,0,0, 0,0.3,0.7,0,0, 0,0,0,1,0, 0,0,0,0,1],
                'Deuteranomaly':[0.8,0.2,0,0,0, 0.258,0.742,0,0,0, 0,0.142,0.858,0,0, 0,0,0,1,0, 0,0,0,0,1],
                'Tritanopia':[0.95,0.05,0,0,0, 0,0.433,0.567,0,0, 0,0.475,0.525,0,0, 0,0,0,1,0, 0,0,0,0,1],
                'Tritanomaly':[0.967,0.033,0,0,0, 0,0.733,0.267,0,0, 0,0.183,0.817,0,0, 0,0,0,1,0, 0,0,0,0,1],
                'Achromatopsia':[0.299,0.587,0.114,0,0, 0.299,0.587,0.114,0,0, 0.299,0.587,0.114,0,0, 0,0,0,1,0, 0,0,0,0,1],
                'Achromatomaly':[0.618,0.320,0.062,0,0, 0.163,0.775,0.062,0,0, 0.163,0.320,0.516,0,0,0,0,0,1,0,0,0,0,0]}[v]);

    },    
    'Colorize':function(v,n) { // 0xFFFFFF, 0 : 1

        var r=((v>>16)&0xFF)/255, g=((v>>8)&0xFF)/255, b=(v&0xFF)/255, o=;
    
        return([(1-n)+n*r*o.R,n*r*o.G,n*r*o.B,0,0,  n*g*o.R,(1-n)+n*g*o.G,n*g*o.B,0,0,  n*b*o.R,n*b*o.G,(1-n)+n*b*o.B,0,0,  0,0,0,1,0,  0,0,0,0,1]);

    },
    'Threshold':function(v) { var o=; // 0 : 255

        return([o.R*256,o.G*256,o.B*256,0,-256*v,  o.R*256,o.G*256,o.B*256,0,-256*v,  o.R*256,o.G*256,o.B*256,0,-256*v,  0,0,0,1,0,  0,0,0,0,1]);
    
    },
    'Invert':function(v) { // 0 : 1

        return([-1,0,0,0,255, 0,-1,0,0,255, 0,0,-1,0,255, 0,0,0,1,0, 0,0,0,0,1]);
    
    }
};

color.matrix=function(o,m) {

    var r=((o.R*m[0])+(o.G*m[1])+(o.B*m[2])+(o.A*m[3])+m[4]);
    var g=((o.R*m[5])+(o.G*m[6])+(o.B*m[7])+(o.A*m[8])+m[9]);
    var b=((o.R*m[10])+(o.G*m[11])+(o.B*m[12])+(o.A*m[13])+m[14]);
    var a=((o.R*m[15])+(o.G*m[16])+(o.B*m[17])+(o.A*m[18])+m[19]);
    
    return({'R':r<0?0:(r<255?r:255), 'G':g<0?0:(g<255?g:255), 'B':b<0?0:(b<255?b:255), 'A':a<0?0:(a<255?a:255)});
    
};

};

Have ideas for code changes?

CC · GPL · NoFunc.com