Colortable

Simple Colortable example

by jbrosi

HTML

<div class="colortable">
    
    
</div>

CSS

.colortable table {
    border-spacing: 0px;
}
.colortable table tr td{
    border: 1px solid black;
    width: 10px;
    height: 10px;
}

JavaScript

var celNumber = 40;
var colorStep = 255 / celNumber;

var colorTable = $('.colortable');
var table = $('<table></table');
    
var cells = [];       
        
//create tables:  
for (var y = 0; y < celNumber; y++) {
    var row = $('<tr></tr>');
    for (var x = 0; x < celNumber; x++) {
        var cell = $('<td></td>');
        cells.push(cell);        
        cell.css('background-color', 'rgb(' + Math.floor(x * colorStep) + ', 0, ' + Math.floor(y * colorStep) + ')');
        row.append(cell);
    }
    table.append(row);
}
colorTable.append(table);


//**********************************************************//
// below some anim stuff... not needed for the task anyway  //
//**********************************************************//

var offsetX = 0;
var offsetY = 0;
var drawFrame = 0;

//animation:
function animation() {
    
    drawFrame++;
    
    //only draw every 10th frame
    if (drawFrame < 5) {
        requestAnimFrame(animation);
        return;
    }
    drawFrame = 0;
    
    //increment offsets and cut by 512
    offsetX = (offsetX + 1) % 512;
    offsetY = (offsetY + 1) % 512;
    for (var x = 0; x < celNumber; x++) {
        for (var y = 0; y < celNumber; y++) {
            var cel = cells[y * celNumber + x];
            
            //setting colors:
            var red = (((x + offsetX) * 10) % 512) - 256;
            var blue = (((y + offsetY) * 10) % 512) - 256;
            if (red < 0) {red *= -1;}
            if (blue < 0) {blue *= -1;}            
            var green = 0;
            //set background-color
            cel.css('background-color', 'rgb(' + red +", " + green + " , " + blue + ")");
        }
    }
    requestAnimFrame(animation);
}



//request anim frame <-> for better animationz,
//see here: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
         ...