Smooth Color Change

by Micaiah Wallace

HTML

<div id="test"></div>

CSS

#test {
    width:200px;
    height:100px;
    border:solid 1px #000;
}

JavaScript

var GColor = function(r,g,b) {
    r = (typeof r === 'undefined')?0:r;
    g = (typeof g === 'undefined')?0:g;
    b = (typeof b === 'undefined')?0:b;
    return {r:r, g:g, b:b};
};
var createColorRange = function(c1, c2) {
    var colorList = [], tmpColor;
    for (var i=0; i<255; i++) {
        tmpColor = new GColor();
        tmpColor.r = c1.r + ((i*(c2.r-c1.r))/255);
        tmpColor.g = c1.g + ((i*(c2.g-c1.g))/255);
        tmpColor.b = c1.b + ((i*(c2.b-c1.b))/255);
        colorList.push(tmpColor);
    }
    return colorList;
}

/* ==================
   Testing Code Below
   ================== */

var red = new GColor(255, 0, 0);
var blue = new GColor(0, 0, 255);
var range = createColorRange(red, blue);
var pointer = 0;
function rotateColors() {
    var currentColor = range[pointer];
    document.getElementById("test").style.backgroundColor = "rgb("+currentColor.r+","+currentColor.g+","+currentColor.b+")";
    pointer++;
    if (pointer < range.length) window.setTimeout(rotateColors, 5);
}

rotateColors();