Water

HTML

<!doctype html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <title>Water - 00</title> 
    </head> 
    <body> 
 
        <div id="info" style="position:absolute">Click and drag to create waves. Press any key for raindrop.</div> 
        <div id="container"></div> 

    </body> 
</html>

CSS

body
{
    background-color: #000000;
    margin: 0px;
    overflow: hidden;
}

#info
{
    position: absolute;
    width: 100%;
    color: #00b0b0;
    padding: 5px;
    font-family:Monospace;
    font-size:13px;
    text-align:center;
}

JavaScript

var quality = 4;

var container, canvas, context, imageData;
var buffer1, buffer2, tempbuffer;
var WIDTH, HEIGHT;

var isMouseDown, mouseX, mouseY;

init();
setInterval(loop, 1000 / 60);

function init()
{
    container = document.getElementById('container');

    WIDTH = Math.floor(window.innerWidth / quality);
    HEIGHT = Math.floor(window.innerHeight / quality);

    buffer1 = new Array();
    buffer2 = new Array();
    
    for (var i = 0; i < WIDTH * HEIGHT; i ++)
    {
        buffer1[i] = 0;
        buffer2[i] = i > WIDTH && i < (WIDTH * HEIGHT) - WIDTH && Math.random() > 0.995 ? 255 : 0;
    }

    canvas = document.createElement("canvas");
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    canvas.style.width = window.innerWidth + "px";
    canvas.style.height = window.innerHeight + "px";
    container.appendChild(canvas);

    context = canvas.getContext("2d");
    context.fillStyle = "rgb(0, 0, 0)";
    context.fillRect (0, 0, WIDTH, HEIGHT);
    imageData = context.getImageData(0, 0, WIDTH, HEIGHT);

    branches = new Array();

    window.addEventListener('mousedown', onMouseDown, false);
    window.addEventListener('mouseup', onMouseUp, false);
    window.addEventListener('mousemove', onMouseMove, false);
    window.addEventListener('keyup', onKeyUp, false);
}

//

function onMouseDown(e)
{

    isMouseDown = true;
}

function onMouseUp(e)
{
    isMouseDown = false;
}

function onMouseMove(e)
{
    if (!e) var e = window.event;
    mouseX = Math.floor(e.clientX / quality);
    mouseY = Math.floor(e.clientY / quality);
}

function onKeyUp(e)
{
    emit( Math.floor( Math.random() * WIDTH), Math.floor( Math.random() * HEIGHT ) );
}

//

function emit( x, y )
{
    buffer1[ x + (y * WIDTH)] = 255;
}

function loop()
{
    if (isMouseDown)
        emit( mouseX, mouseY );


    for (var i = WIDTH; i < (WIDTH * HEIGHT) - WIDTH; i ++)
    {
        buffer2[i] = ((buffer1[i - 1] + buffer1[i + 1] + buffer1[i - WIDTH] + buffer1[i + WIDTH]) >> 1) -...