Water ripple effect.

* Original code (Java) by Neil Wallis * @link http://www.neilwallis.com/java/water.html * * @author Sergey Chikuyonok ([email protected]) * @link http://chikuyonok.ru

by gnijuohz

JavaScript

/**
 * Water ripple effect.
 * Original code (Java) by Neil Wallis 
 * @link http://www.neilwallis.com/java/water.html
 * 
 * @author Sergey Chikuyonok ([email protected])
 * @link http://chikuyonok.ru
 */
(function(){
    var canvas = document.getElementById('c'),
        /** @type {CanvasRenderingContext2D} */
        ctx = canvas.getContext('2d'),
        width = 400,
        height = 400,
        half_width = width >> 1,
        half_height = height >> 1,
        size = width * (height + 2) * 2,
        delay = 30,
        oldind = width,
        newind = width * (height + 3),
        riprad = 3,
        ripplemap = [],
        last_map = [],
        ripple,
        texture,
        line_width = 20,
        step = line_width * 2, 
        count = height / line_width;
        
    canvas.width = width;
    canvas.height = height;
    
    /*
     * Water ripple demo can work with any bitmap image
     * (see example here: http://media.chikuyonok.ru/ripple/)
     * But I need to draw simple artwork to bypass 1k limitation
     */
    with (ctx) {
        fillStyle = '#a2ddf8';
        fillRect(0, 0, width, height);
        
        fillStyle = '#07b';
        save();
        rotate(-0.785);
        for (var i = 0; i < count; i++) {
            fillRect(-width, i * step, width * 3, line_width);
        }
        
        restore();
    }
    
    texture = ctx.getImageData(0, 0, width, height);
    ripple = ctx.getImageData(0, 0, width, height);
    
    for (var i = 0; i < size; i++) {
        last_map[i] = ripplemap[i] = 0;
    }
    
    /**
     * Main loop
     */
    function run() {
        newframe();
        ctx.putImageData(ripple, 0, 0);
    }
    
    /**
     * Disturb water at specified point
     */
    function disturb(dx, dy) {
        dx <<= 0;
        dy <<= 0;
        
        for (var j = dy - riprad; j < dy + riprad; j++) {
            for (var k = dx - riprad; k < dx + riprad; k++) {
                ripplemap[oldind + (j * width) + k] +=...