canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); bmd = canvas.bitmapData; function dist(a, b, c, d) { return Math.sqrt(((a - c) * (a - c) + (b - d) * (b - d))); } setInterval(function(){ time = new Date().getTime()/50; for(y=0; y<bmd.height; y++) { for(x=0; x<bmd.width; x++) { rgb = Math.sin(dist(x+time, y, 128.0, 128.0) / 8.0) + Math.sin(dist(x, y, 64.0, 64.0) / 8.0) + Math.sin(dist(x, y+time/7, 192.0, 64) / 7.0) + Math.sin(dist(x, y, 192.0, 100.0) / 8.0); c = parseInt(4+rgb)*32; bmd.setPixel(x, y, c<<16 | (c*2)<<8 | 255-c); } } context.putImageData(bmd.data, 0, 0); }, 10);