Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Canvas Test</title>
        <style>
            html, body {
                margin: 0 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            canvas {
                display: block;
            }
            #fps {
                position: absolute; top: 0; right: 0;
                padding: 10px;
                color: white;
                text-shadow: 0 0 4px black;
                font: 14pt "Arial Black";
            }
        </style>
    </head>
    <body>
        <canvas id="plasma" width="256" height="256"></canvas>
            <div id="fps"></div>
        <script type="text/javascript">
            var
                TAU = Math.PI*2,
                element = document.getElementById('plasma'),
                canvas = element.getContext('2d'),
                width = parseInt(element.getAttribute("width")),
                height = parseInt(element.getAttribute("height"));
                image = canvas.createImageData(width, height);
                ua = navigator.userAgent,
                kit = /webkit/i.test(ua)?'-webkit-':'-moz-',
                theta=0,
                fps = document.getElementById('fps');
            function resize() {
                var dwidth = document.body.clientWidth,
                    dheight = document.body.clientHeight;
                element.style[kit+'transform-origin'] = '0 0';
                element.style[kit+'transform'] = 'scale('+[
                    dwidth/width,
                    dheight/height
                ].join(',')+')';
            }
            resize();
            window.addEventListener('resize', resize, false);
            function setPixel(img, x, y, r, g, b, a) {
                index = 4*(x+y*img.width);
                img.data[index]=r;
                img.data[index+1]=g;
                img.data[index+2]=b;
                img.data[index+3]=a;
            }
            var
                start = (new Date()).getTime(),
                d1 = Math.random()*TAU,
                d2 = Math.random()*TAU,
                d3 = Math.random()*TAU,
                d4 = Math.random()*TAU,
                d5 = 1+Math.random(),
                d6 = 1+Math.random();
            var palette = [];

            for (i=0; i<256; i++) {
                if (i<64) {
                    palette.push([ i*4, 0, 0]);
                } else if (i<128) {
                    palette.push([ 255, (i-64)*4, 0]);
                } else if (i<192) {
                    palette.push([ 255,255,(i-128)*4]);
                } else if (i<224) {
                    palette.push([ 255, (224-i)*4+128, (224-i)*8]);
                } else {
                  palette.push([ (255-i)*8, (255-i)*4, 0]);
                }
            }
            for (var y=0; y<height*width*4; y+=4) image.data[y+3]=0xff;
            var f =0;
            function iterate() {
                palette.push(palette.shift());
                var rgb, i,x,y,r,g,b,a,t=(((new Date()).getTime()-start)/1000),
                    dx1 = Math.sin(d1+t/TAU) * d5 * TAU * Math.cos(d4+t/TAU)/ width,
                    dx2 = Math.cos(d2+t/TAU) * d6 * TAU * Math.sin(d3+t/TAU) / height,
                    pind = 0;
                for (y=0; y<height; y++) for (x=0; x<width; x++) {
                    rgb = palette[Math.floor(((Math.sin(dx1*x)+1) + (Math.cos(dx2*y)+1))*64)];
                    for (c=0; c<rgb.length; c++) image.data[pind+c]=rgb[c];
                    pind+=4;
                }
                canvas.putImageData(image, 0, 0);
                f++;
                var rate = new String(Math.floor(f*100/t)/100);
                while (rate.replace(/^\d+\./, '').length < 2) rate+='0';
                fps.innerText = rate;
                setTimeout(arguments.callee, 0);
            }
            iterate();
        </script>
    </body>
</html>