RGBA Scale

alpha changes over dynamic x, transitional hue and lead hue change depending on phase, transitional hue changes over dynamic y-based phase interval

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 = [{holdColor:"red", transitionColor:"green", direction:1}, 
            {holdColor:"green", transitionColor:"red", direction:-1},
            {holdColor:"green", transitionColor:"blue", direction:1},
            {holdColor:"blue", transitionColor:"green", direction:-1},
            {holdColor:"blue", transitionColor:"red", direction:1},
            {holdColor:"red", transitionColor:"blue", direction:-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].holdColor == "red"){
        if(color == "r") return 255;
        if(phases[phase].direction > 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].holdColor == "green"){
        if(color == "g") return 255;       
        if(phases[phase].direction > 0){
        ...