ig = document.getElementById("c"); ig.width = 320; ig.height = 240; // dammit opera... if (!("createImageData" in CanvasRenderingContext2D.prototype)){CanvasRenderingContext2D.prototype.createImageData = function(sw,sh) { return this.getImageData(0,0,sw,sh);}} var p1 = 0, p2 = 0, p3 = 0, p4 = 0, t1, t2, t3, t4, aSin = [], ti = 15, cv = ig.getContext('2d'), cd = cv.createImageData(320, 240), rad, i, j, x, idx, as = 2.6, fd = 0.4, as1 = 4.4, fd1 = 2.2, ps = -4.4, ps2 = 3.3; function init() { var i = 512; while (i--) { rad = (i * 0.703125) * 0.0174532; aSin[i] = Math.sin(rad) * 1024; } } function main() { init(); draw(); } function rand(va) { return Math.random(va); } document.onclick = function(){ as = rand(300)*5; fd = rand(300)*10; as1 = rand(200)*50; fd2 = rand(300)*50; ps = (rand(200)*20)-10; ps2 = (rand(200)*40)-20; }; function draw() { cdData = cd.data; t4 = p4; t3 = p3; i = 320; while(i--) { t1 = p1 + 5; t2 = p2 + 3; t3 &= 511; t4 &= 511; j = 240; while(j--) { t1 &= 511; t2 &= 511; x = aSin[t1] + aSin[t2] + aSin[t3] + aSin[t4]; idx = (i + j * ig.width) * 4; cdData[idx] = x/as; cdData[idx + 1] = x/fd; cdData[idx + 2] = x/ps; cdData[idx + 3] = 255; t1 += 5; t2 += 3; } t4 += as1; t3 += fd1; } cd.data = cdData; cv.putImageData(cd, 0, 0); p1 += ps; p3 += ps2; setTimeout ( draw, ti); } main();
<canvas id="c"/>