HTML5 playground

by Neviton

HTML

<!DOCTYPE HTML>
<html>
<body>
    <canvas id="myCanvas">your browser does not support the canvas tag </canvas>
    <div id="debug"></div>
</body>
</html>

CSS

#myCanvas {
    border: 1px solid silver;
    width: 200px;
    height: 200px;
}

JavaScript

var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');

// Create an ImageData object.
var imgd = context.createImageData(200,200);
var pix = imgd.data;
var pixIdx = 0;
var ft = 1;
//setInterval(animate, 1000);
for (var y = 0; y < imgd.height; y++) {
    for (var x = 0; x < imgd.width; x++) {
        setPixel(0, 0, 0x000000,255, imgd);
    }
}

// Draw the ImageData object at the given (x,y) coordinates.
context.putImageData(imgd, 0,0);

function animate() {
    document.getElementById("debug").innerHTML = "ft: " + ft;
    ft++;
    // Loop over each pixel and set a transparent red.
    for (var i = 0; n = pix.length, i < n; i += 4) {
      var x = pixIdx % imgd.width;
      var y = pixIdx / imgd.height;
      pix[i] = 255; // red channel
      //pix[i+3] = (x*x + y*y)/100; // alpha channel
      pix[i+3] = Math.cos((x-100)/ft)*255 + Math.sin((y-100)/ft)*255; // alpha channel
      pixIdx++;
    }    
}

function setPixel(x, y, color,alpha, imageData) {
    var pixelIndex = (y * imageData.width + x) * 4; //RGBA
    document.getElementById("debug").innerHTML += "pixelIndex: " + pixelIndex;
    var r = (color >> 4) & 0x0000FF;
    var g = (color >> 2) & 0x0000FF;
    var b = color & 0x0000FF;
    document.getElementById("debug").innerHTML += "<br>r: " + r;
    document.getElementById("debug").innerHTML += "<br>g: " + g;
    document.getElementById("debug").innerHTML += "<br>b: " + b;
    imageData.data[pixelIndex  ] = r;
    imageData.data[pixelIndex+1] = g;
    imageData.data[pixelIndex+2] = b;
    imageData.data[pixelIndex+3] = alpha;
}