RGB Scale

clone

by kpowz

HTML

<canvas id="flag" width="120" height="120">
</canvas>

CSS

canvas{
    background: url(http://www.modernmast.com/images/19e980.logo.png) no-repeat 50% 0;
}

JavaScript

var canvas = document.getElementById("flag");
if (!canvas.getContext) return;

var ctx = canvas.getContext('2d');

canvas.className = "supported center";
ctx.fillStyle = "rgba(0,0,0,1)";

var rgbMax = 255;
var alphaInterval = 1 / canvas.width;
var phaseInterval = canvas.height / 6;
var transColorInterval = Math.ceil(rgbMax/phaseInterval);

//6 transition phases
var phases = [["red", "green", 1], 
            ["green", "red", -1],
            ["green", "blue", 1],
            ["blue", "green", -1],
            ["blue", "red", 1],
            ["red", "blue", -1]]


var transitionStrength = 0;
var alpha = 0;
var phase = 0;

for (var y = 1; y < canvas.height; y++){
    alpha = 0;
    for (var x = 1; x < canvas.width; x++){  
        console.log(y +" rgba("+calCol("r")+","+calCol("g")+","+calCol("b")+", "+alpha+")");
        ctx.fillStyle ="rgba("+calCol("r")+","+calCol("g")+","+calCol("b")+", "+alpha+")";
        ctx.fillRect(x,y,1,1);
        alpha += alphaInterval
    }
    transitionStrength += transColorInterval;
    if(transitionStrength > rgbMax) transitionStrength = 0;

    //we need to transition to next phase whenever we evenly divide y by phaseInterval
    if(y > 0 && y % phaseInterval === 0 && phase < phases.length) phase++;
}
 

function calCol(color){    
    if(phases[phase][0] == "red"){
        if(color == "r") return 255;
        if(phases[phase][2] > 0){
            if(color == "g") return transitionStrength;
            if(color == "b") return 0;
        }else{
            if(color == "g") return 0;
            if(color == "b") return rgbMax - transitionStrength;
        }
    }
    if(phases[phase][0] == "green"){
        if(color == "g") return 255;       
        if(phases[phase][2] > 0){
            if(color == "r") return 0;
            if(color == "b") return transitionStrength;
        }else{
            if(color == "r") return rgbMax - transitionStrength;
            if(color == "b") return 0;
        }
    }
    if(phases[phase][0] ==...