Checkerboard Animation

Canvas ImageData Checkerboard

by Niklas Knaack

JavaScript

var w = 512;
var h = 512;

var pixelSize = 4;
var colors = [ { r: 0x00, g: 0x00, b: 0x00 }, { r: 0xFF, g: 0xFF, b: 0xFF } ];

var min = 1;
var max = Math.floor( w / 2 );

//---

var canvas = document.createElement( 'canvas' );
	canvas.width = w;
	canvas.height = h;
	
document.body.appendChild( canvas );

var context = canvas.getContext( '2d' );
	//context.fillStyle = '#FF0000';
	//context.fillRect( 0, 0, w, h );

var imageData = context.getImageData( 0, 0, w, h );
var data = imageData.data;

//---
//thx to tsseh @ http://forum.jswelt.de/

function checkerboard( pixelSize, colors ) {

    for ( var i = 0, length = w * h; i < length; i++ ) {

        var l = Math.floor( i / w );
        var c = i - ( l * w );
        var ul = Math.floor( l / pixelSize );
        var uc = Math.floor( c / pixelSize );
        var ls = ul % colors.length;
        var cc = uc % colors.length;
        var color = ( ls + cc ) % colors.length;

        var offset = i * 4;

        data[ offset ]     = colors[ color ].r;
        data[ offset + 1 ] = colors[ color ].g;
        data[ offset + 2 ] = colors[ color ].b;
        data[ offset + 3 ] = 255;
    
    } 
    
    context.putImageData( imageData, 0, 0 );
    
};

checkerboard( pixelSize, colors );

//---
//Controls

document.body.appendChild( document.createElement( 'br' ) );

//---

var slider = document.createElement( 'input' );
	slider.setAttribute( 'type', 'range' ); 
    slider.setAttribute( 'min', min ); 
    slider.setAttribute( 'max', max ); 
    slider.setAttribute( 'value', pixelSize ); 
    slider.addEventListener( 'change', rangeHandler, false );
    
document.body.appendChild( slider );

function rangeHandler( e ) {

	checkerboard( slider.value, colors );

}

//---

var play = false;

var button = document.createElement( 'input' );
	button.setAttribute( 'type', 'button' ); 
    button.setAttribute( 'value', 'Animate' ); 
    button.addEventListener( 'click', buttonHandler, false );
    
document.body.appendChild( button...