Water Ripple On Canvas

by Colin Soderstrom

HTML

<html>  
  <head>  
    <title>Simple game with HTML5 Canvas</title>
    </head>  
  <body>  
    <canvas id='c'></canvas>  
  </body>  
</html>

JavaScript

var width = 400,
    height = 300,
    canvas = document.getElementById('c'), 
    ctx = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    //reset the whole fucking array
    var resultPixels = new Array();
    var sourcePixels = new Array();
    resultPixels.length = width * height;
    sourcePixels.length = width * height;
    for(n=0; n<width*height; n++)
    {
        resultPixels[n] = 0;
        sourcePixels[n] = 0;
    }
    
    //setting canvas size 
    canvas.addEventListener("mousemove", onClick)
    
function onClick(e)
{
    var x = e.offsetX; //e.pageX - 8;
    var y = e.offsetY; //e.pageY - 8;

    sourcePixels[y * width + x] = 1000;
}    
    
function update()
{
    var imageData = ctx.getImageData(0, 0, width, height);    
    var pixels = imageData.data;
    
    var totalpixels, totalvalue, newvalue;
    
    for (var x=1; x<width-1; x++)
        for (var y=1; y<height-1; y++)
        {    
            totalvalue = 0;
            totalpixels = 4.0;
            
            totalvalue += sourcePixels[(y-1) * width + (x)];
            totalvalue += sourcePixels[(y+1) * width + (x)];
            totalvalue += sourcePixels[y * width + (x - 1)];
            totalvalue += sourcePixels[y * width + (x + 1)];

            totalvalue += sourcePixels[(y-1) * width + (x-1)];
            totalvalue += sourcePixels[(y-1) * width + (x+1)];
            totalvalue += sourcePixels[(y+1) * width + (x-1)];
            totalvalue += sourcePixels[(y+1) * width + (x+1)];
            
            //totalvalue += sourcemappixels[( (y-1) * width + (x-1)) * 4];
            //totalvalue += (sourcemappixels[( (y-1) * width + (x)) * 4] - 0);
            //totalvalue += sourcemappixels[( (y-1) * width + (x+1)) * 4];
            //totalvalue += (sourcemappixels[( y * width + (x-1)) * 4] - 0);
            //totalvalue += (sourcemappixels[( y * width + (x+1)) * 4] - 0);
            //totalvalue += sourcemappixels[( (y+1) * width + (x-1)) *...