(function(e){ var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); var bytes, m, n, i, s, t, x, y; function init() { s = 30; //cell size; everything else scales to fit m = 256; n = m; i = 0; bytes = new Uint8Array(m); //fill the byte array with 0 - 255 while (i < m) { bytes[i] = i; i++; } c.width = 16 * s; c.height = 16 * s; dothedamnthing(); } function render() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, c.width, c.height); i = 0; while (i < m) { t = bytes[i]; ctx.fillStyle = "rgb(" + t + "," + t + "," + t + ")"; ctx.strokeStyle = "white"; ctx.lineWidth = 1; x = (i - ((c.width / s) * Math.floor(i / (c.width / s)))) * s; y = Math.floor(i / (c.width / s)) * s; ctx.strokeRect(x, y, s, s); ctx.fillRect(x, y, s, s); i++; } bytes = shuffle(bytes); } //Slightly modified, but came from http://bost.ocks.org/mike/shuffle/ function shuffle(array) { // Pick a remaining element… i = Math.floor(Math.random() * n--); // And swap it with the current element. t = array[n]; array[n] = array[i]; array[i] = t; return array; } function dothedamnthing(){ if (n) requestAnimationFrame(dothedamnthing); render(); } e.Shuffle = { run: init } })(window); (function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }()); Shuffle.run();