water canvas by Almer Thie http://code.almeros.com

watercanvas.js

/*
 * Water Canvas by Almer Thie (http://code.almeros.com).
 * Description: A realtime water ripple effect on an HTML5 canvas. 
 * Copyright 2010 Almer Thie. All rights reserved.
 *
 * Example: http://code.almeros.com/code-examples/water-effect-canvas/
 * Tutorial: http://code.almeros.com/water-ripple-canvas-and-javascript
 */


////////////////////////////////////////////////////////////////////////////////
//                              WaterCanvas object                            //
////////////////////////////////////////////////////////////////////////////////
/**
 * This view object is responsible for applying the water ripple data state to an image and therefor 
 * is also responsible for the refraction effect of the light through the water.
 * 
 * @param {Number} width The width in pixels this canvas should be.
 * @param {Number} hight The hight in pixels this canvas should be.
 * @param {String} documentElement The div element ID to insert the canvas into.
 * @param {Object} waterModel A reference to a WaterModel object previously created.
 * @param {Object} props A key/value object which may contain the following properties:
 * 				backgroundImageUrl: 
 *						A relative URL to an image on your webserver. This cannot be a URL to an 
 *						image on another domain. The HTML5 Canvas element follows the Same Origin Policy.
 *				lightRefraction: 
 *						Sets how many pixels the refraction of light uses.
 * 				lightReflection: 
 *						Sets the amount of color highlighting.
 * 				maxFps: 
 *						Maximum Frames Per Second; The maximum reachable FPS highly depends on the system and 
 *						browser the water canvas is running on. You can't control that, but you can control the maximum 
 * 						FPS to keep systems from overloading, trying to reach the highest FPS.
 * 				showStats: 
 *						When set to true, it shows "FPS Canvas: " plus the current FPS of this view on the canvas.
 *
 * @constructor
 */
WaterCanvas = function(width, height, documentElement, waterModel, props) {
    // If a certain property is not set, use a default value
    props = props || {};
    this.backgroundImageUrl = props.backgroundImageUrl || null;
    this.lightRefraction = props.lightRefraction || 9.0;
    this.lightReflection = props.lightReflection || 0.1;
    this.showStats = props.showStats || false;

    this.width = width;
    this.height = height;
    this.documentElement = document.getElementById(documentElement);
    this.waterModel = waterModel;



    this.canvas = document.createElement('canvas');
    this.canvasHelp = document.createElement('canvas');

    if (!this.canvas.getContext || !this.canvasHelp.getContext) {
        alert("You need a browser that supports the HTML5 canvas tag.");
        return; // No point to continue
    }

    this.ctx = this.canvas.getContext('2d');
    this.ctxHelp = this.canvasHelp.getContext('2d');

    this.setSize(width, height);
    this.documentElement.appendChild(this.canvas);




    // Find out the FPS at certain intervals
    this.fps = -1;
    if (this.showStats) {
        this.fpsCounter = 0;
        this.prevMs = 0;

        var self = this;
        setInterval(function() {
            self.findFps();
        }, 1000);
    }


    // Start the animation
    this.drawNextFrame();
}

/**
 * Sets the size of the canvas.
 *
 * @param {Number} width The width in pixels this canvas should be.
 * @param {Number} hight The hight in pixels this canvas should be.
 */
WaterCanvas.prototype.setSize = function(width, height) {
    this.width = width;
    this.height = height;

    this.canvas.setAttribute('width', this.width);
    this.canvas.setAttribute('height', this.height);

    this.canvasHelp.setAttribute('width', this.width);
    this.canvasHelp.setAttribute('height', this.height);

    this.setBackground(this.backgroundImageUrl);
}

/**
 * Sets the image to perform the water rippling effect on. 
 *
 * Use an image from the same server as where this script lives. This is needed since browsers use the 
 * Same Origin Policy for savety reasons. If an empty URL is given, a standard canvas will be shown.
 *
 * @param {String} backgroundImageUrl (Relative) URL to an image on the same webserver as this script.						
 */
WaterCanvas.prototype.setBackground = function(backgroundImageUrl) {
    this.backgroundImageUrl = backgroundImageUrl == "" ? null : backgroundImageUrl;
    this.pixelsIn = null;

    if (this.backgroundImageUrl != null) {

        // Background image loading
        this.backgroundImg = new Image();

        var self = this;
        this.backgroundImg.onload = function() {
            self.ctxHelp.drawImage(self.backgroundImg, 0, 0, self.width, self.height);

            // Get the canvas pixel data
            var imgDataIn = self.ctxHelp.getImageData(0, 0, self.width, self.height);
            self.pixelsIn = imgDataIn.data;

            // Also paint it on the output canvas
            self.ctx.putImageData(imgDataIn, 0, 0);
        }
        this.backgroundImg.src = this.backgroundImageUrl;

    } else {

        var radgrad = pointerCtx.createRadialGradient(this.width / 2, this.height / 2, 0, this.width / 2, this.height / 2, this.height / 2);
        radgrad.addColorStop(0, '#4af');
        radgrad.addColorStop(1, '#000');

        this.ctxHelp.fillStyle = radgrad;
        this.ctxHelp.fillRect(0, 0, this.width, this.height);

        this.ctxHelp.shadowColor = "white";
        this.ctxHelp.shadowOffsetX = 0;
        this.ctxHelp.shadowOffsetY = 0;
        this.ctxHelp.shadowBlur = 10;

        this.ctxHelp.textBaseline = "top";
        this.ctxHelp.font = 'normal 200 45px verdana';
        this.ctxHelp.fillStyle = "white";
        this.ctxHelp.fillText("Water Canvas", 10, (this.height / 2) - 40);
        this.ctxHelp.font = 'normal 200 12px verdana';
        this.ctxHelp.fillText("Move your mouse over this canvas to move the water.", 10, (this.height / 2) + 10);
        this.ctxHelp.fillText("By Almeros 2010, See http://code.almeros.com", 10, (this.height / 2) + 30);

        // Get the canvas pixel data
        var imgDataIn = this.ctxHelp.getImageData(0, 0, this.width, this.height);
        this.pixelsIn = imgDataIn.data;

        // Also paint it on the output canvas
        this.ctx.putImageData(imgDataIn, 0, 0);

    }
}

/**
 * Renders the next frame and draws it on the canvas. 
 * Also handles calling itself again via requestAnim(ation)Frame.
 *
 * @private
 */
WaterCanvas.prototype.drawNextFrame = function() {
    if (this.pixelsIn == null || !this.waterModel.isEvolving()) {
        // Wait some time and try again
        var self = this;
        setTimeout(function() {
            self.drawNextFrame();
        }, 50);

        // Nothing else to do for now
        return;
    }


    // Make the canvas give us a CanvasDataArray. 
    // Creating an array ourselves is slow!!!
    // https://developer.mozilla.org/en/HTML/Canvas/Pixel_manipulation_with_canvas
    var imgDataOut = this.ctx.getImageData(0, 0, this.width, this.height);
    var pixelsOut = imgDataOut.data;
    for (var i = 0; n = pixelsOut.length, i < n; i += 4) {
        var pixel = i / 4;
        var x = pixel % this.width;
        var y = (pixel - x) / this.width;

        var strength = this.waterModel.getWater(x, y);


        // Refraction of light in water
        var refraction = Math.round(strength * this.lightRefraction);

        var xPix = x + refraction;
        var yPix = y + refraction;

        if (xPix < 0) xPix = 0;
        if (yPix < 0) yPix = 0;
        if (xPix > this.width - 1) xPix = this.width - 1;
        if (yPix > this.height - 1) yPix = this.height - 1;



        // Get the pixel from input
        var iPix = ((yPix * this.width) + xPix) * 4;
        var red = this.pixelsIn[iPix];
        var green = this.pixelsIn[iPix + 1];
        var blue = this.pixelsIn[iPix + 2];


        // Set the pixel to output
        strength *= this.lightReflection;
        strength += 1.0;

        pixelsOut[i] = red *= strength;
        pixelsOut[i + 1] = green *= strength;
        pixelsOut[i + 2] = blue *= strength;
        pixelsOut[i + 3] = 255; // alpha 
    }

    this.ctx.putImageData(imgDataOut, 0, 0);



    if (this.showStats) {
        this.fpsCounter++;


        this.ctx.textBaseline = "top";
        this.ctx.font = 'normal 200 10px arial';

        this.ctx.fillStyle = "white";
        this.ctx.fillText("FPS Canvas: " + this.getFps(), 10, 10);
        this.ctx.fillText("FPS Water: " + this.waterModel.getFps(), 10, 20);

        this.ctx.shadowColor = "black";
        this.ctx.shadowOffsetX = 0;
        this.ctx.shadowOffsetY = 0;
        this.ctx.shadowBlur = 2;
    }



    // Make the browser call this function at a new render frame
    var self = this; // For referencing 'this' in internal eventListeners
    requestAnimFrame(function() {
        self.drawNextFrame()
    }, this.canvas);

}

/**
 * Determine the Frames Per Second. 
 * Called at regular intervals by an internal setInterval.
 *
 * @private
 */
WaterCanvas.prototype.findFps = function() {
    if (!this.showStats) return;

    var nowMs = new Date().getTime();
    var diffMs = nowMs - this.prevMs;

    this.fps = Math.round(((this.fpsCounter * 1000) / diffMs) * 10.0) / 10.0;

    this.prevMs = nowMs;
    this.fpsCounter = 0;
}

/**
 * @returns The Frames Per Second that was last rendered.
 */
WaterCanvas.prototype.getFps = function() {
    return this.fps;
}

/**
 * Sets the a amount of refraction of light through the water.
 *
 * @param {Number} lightRefraction The a amount of refraction of light.
 */
WaterCanvas.prototype.setLightRefraction = function(lightRefraction) {
    this.lightRefraction = lightRefraction;
}

/**
 * Sets the a amount of reflection of light on the water.
 *
 * @param {Number} lightRefraction The a amount of reflection of light.
 */
WaterCanvas.prototype.setLightReflection = function(lightReflection) {
    this.lightReflection = lightReflection;
}





////////////////////////////////////////////////////////////////////////////////
//                              WaterModel object                             //
////////////////////////////////////////////////////////////////////////////////
/**
 * Model object that is responsible for holding, manipulating and updating the water ripple data.
 * 
 * @param {Number} width The width in pixels this model should work with.
 * @param {Number} hight The hight in pixels this model should work with.
 * @param {Object} props A key/value object which may contain the following properties:
 * 				resolution:  
 *						Sets the pixelsize to use in the model. The higher hte better the performance, but 
 *						you may want to use interpolation to prefent visible block artifacts.
 *				interpolate: 
 *						When the resolution is set higher then 1.0, you can set this to true to use interpolation.
 *				damping: 
 *						Effectively sets how long water ripples travel.
 *				clipping: 
 *						Multiple waves add up. This may create a wave that's to high or low. The clipping value sets 
 *						the absolute maximum a water pixel value may have in the model.
 *				evolveThreshold: 
 *						To prevent this  script from always taking up CPU cycles, even when no water rippling 
 *						is going on in the model (your website is on a non visible tab) you can set a threshold. When 
 *						no water pixel is above this absolute value, the WaterModel and the WaterCanvas will both stop 
 *						rendering until new waves are created by the user.
 *				maxFps: 
 *						Maximum Frames Per Second; The maximum reachable FPS highly depends on the system and browser 
 *						the water canvas is running on. You can't control that, but you can control the maximum FPS to 
 *						keep systems from overloading, trying to reach the highest FPS.
 *				showStats: 
 *						When set to true, it shows "FPS Water: " plus the current FPS of this model on the canvas.
 *
 * @constructor
 */
WaterModel = function(width, height, props) {
    // If a certain property is not set, use a default value
    props = props || {};
    this.resolution = props.resolution || 2.0;
    this.interpolate = props.interpolate || false;
    this.damping = props.damping || 0.985;
    this.clipping = props.clipping || 5;
    this.maxFps = props.maxFps || 30;
    this.showStats = props.showStats || false;
    this.evolveThreshold = props.evolveThreshold || 0.05;

    this.width = Math.ceil(width / this.resolution);
    this.height = Math.ceil(height / this.resolution);



    // Create water model 2D arrays
    this.resetSizeAndResolution(width, height, this.resolution)
    this.swapMap;

    this.setMaxFps(this.maxFps);

    this.evolving = false; // Holds whether it's needed to render frames


    // Find out the FPS at certain intervals
    this.fps = -1;
    if (this.showStats) {
        this.fpsCounter = 0;
        this.prevMs = 0;

        var self = this;
        setInterval(function() {
            self.findFps();
        }, 1000);
    }
}

/**
 * Gets the (interpolated) water value of an coordinate.
 *
 * @param {Number} x The X position.
 * @param {Number} y The Y position.
 *
 * @returns A float value representing the hight of the water.
 */
WaterModel.prototype.getWater = function(x, y) {
    xTrans = x / this.resolution;
    yTrans = y / this.resolution;

    if (!this.interpolate || this.resolution == 1.0) {
        xF = Math.floor(xTrans);
        yF = Math.floor(yTrans);

        if (xF > this.width - 1 || yF > this.height - 1) return 0.0;

        return this.depthMap1[xF][yF];
    }


    // Else use Bilinear Interpolation
    xF = Math.floor(xTrans);
    yF = Math.floor(yTrans);
    xC = Math.ceil(xTrans);
    yC = Math.ceil(yTrans);

    if (xC > this.width - 1 || yC > this.height - 1) return 0.0;

    // Now get 4 points from the array
    var br = this.depthMap1[xF][yF];
    var bl = this.depthMap1[xC][yF];
    var tr = this.depthMap1[xF][yC];
    var tl = this.depthMap1[xC][yC];

    // http://tech-algorithm.com/articles/bilinear-image-scaling/
    //	D   C
    //	  Y
    //	B	A
    // Y = A(1-w)(1-h) + B(w)(1-h) + C(h)(1-w) + Dwh
    var xChange = xC - xTrans;
    var yChange = yC - yTrans;
    var intpVal =
    tl * (1 - xChange) * (1 - yChange) + tr * (xChange) * (1 - yChange) + bl * (yChange) * (1 - xChange) + br * xChange * yChange;

    return intpVal;
}

/**
 * Sets bilinear interpolation on or off. Interpolation will give a more smooth effect
 * when a higher resolution is used, but needs CPU resources for that.
 *
 * @param {Boolean} interpolate Whether to use interpolation or not
 */
WaterModel.prototype.setInterpolation = function(interpolate) {
    this.interpolate = interpolate;
}

/**
 * Gets the (interpolated) water value of an coordinate.
 *
 * @param {Number} x The X position. The center of where the array2d will be placed.
 * @param {Number} y The Y position. The center of where the array2d will be placed.
 * @param {Number} pressure The factor to multiply the array2d values with while adding the array2d to the model.
 * @param {Array} array2d A 2D array containing float values between -1.0 and 1.0 in a pattern.
 */
WaterModel.prototype.touchWater = function(x, y, pressure, array2d) {
    this.evolving = true;

    x = Math.floor(x / this.resolution);
    y = Math.floor(y / this.resolution);

    // Place the array2d in the center of the mouse position
    if (array2d.length > 4 || array2d[0].length > 4) {
        x -= array2d.length / 2;
        y -= array2d[0].length / 2;
    }

    if (x < 0) x = 0;
    if (y < 0) y = 0;
    if (x > this.width) x = this.width;
    if (y > this.height) y = this.height;

    // Big pixel block
    for (var i = 0; i < array2d.length; i++) {
        for (var j = 0; j < array2d[0].length; j++) {

            if (x + i >= 0 && y + j >= 0 && x + i <= this.width - 1 && y + j <= this.height - 1) {
                this.depthMap1[x + i][y + j] -= array2d[i][j] * pressure;
            }

        }
    }
}

/**
 * Renders the next frame in the model. The water ripples will be evolved one step.
 * Called at regular intervals by an internal setInterval.
 *
 * @private
 */
WaterModel.prototype.renderNextFrame = function() {
    if (!this.evolving) return;

    this.evolving = false;

    for (var x = 0; x < this.width; x++) {
        for (var y = 0; y < this.height; y++) {

            // Handle borders correctly
            var val = (x == 0 ? 0 : this.depthMap1[x - 1][y]) + (x == this.width - 1 ? 0 : this.depthMap1[x + 1][y]) + (y == 0 ? 0 : this.depthMap1[x][y - 1]) + (y == this.height - 1 ? 0 : this.depthMap1[x][y + 1]);

            // Damping
            val = ((val / 2.0) - this.depthMap2[x][y]) * this.damping;

            // Clipping prevention
            if (val > this.clipping) val = this.clipping;
            if (val < -this.clipping) val = -this.clipping;

            // Evolve check
            if (Math.abs(val) > this.evolveThreshold) this.evolving = true;


            this.depthMap2[x][y] = val;
        }
    }

    // Swap buffer references
    this.swapMap = this.depthMap1;
    this.depthMap1 = this.depthMap2;
    this.depthMap2 = this.swapMap;

    this.fpsCounter++;
}

/**
 * Tells if the WaterModel is currently evolving. When all postions in the model are below a threshold 
 * (evolveThreshold), evolving will be set to false. This saves resources, especially when the canvas 
 * is not visible on screen.
 *
 * @returns A boolean that tells if the WaterModel is currently in evolving state.
 */
WaterModel.prototype.isEvolving = function() {
    return this.evolving;
}

/**
 * Determine the Frames Per Second. 
 * Called at regular intervals by an internal setInterval.
 *
 * @private
 */
WaterModel.prototype.findFps = function() {
    if (!this.showStats) return;

    var nowMs = new Date().getTime();
    var diffMs = nowMs - this.prevMs;

    this.fps = Math.round(((this.fpsCounter * 1000) / diffMs) * 10.0) / 10.0;

    this.prevMs = nowMs;
    this.fpsCounter = 0;
}

/**
 * @returns The Frames Per Second that was last rendered.
 */
WaterModel.prototype.getFps = function() {
    return this.fps;
}

/**
 * Sets the maximum frames per second to render. Use this to set a limit and release resources for other processes.
 *
 * @param {Number} maxFps The maximum frames per second to render.
 */
WaterModel.prototype.setMaxFps = function(maxFps) {
    this.maxFps = maxFps;

    clearInterval(this.maxFpsInterval);

    // Updating of the animation
    var self = this; // For referencing 'this' in internal eventListeners	
    if (this.maxFps > 0) {
        this.maxFpsInterval = setInterval(function() {
            self.renderNextFrame();
        }, 1000 / this.maxFps);
    }
}

/**
 * Effectively sets how long water ripples travel.
 *
 * @param {Number} damping The amount of strength to pass on from postion to surrounding positions.
 */
WaterModel.prototype.setDamping = function(damping) {
    this.damping = damping;
}

/**
 * Effectively sets how long water ripples travel.
 * 
 * @param {Number} width The width in pixels this model should work with.
 * @param {Number} hight The hight in pixels this model should work with.
 * @param {Number} resolution The pixel size of a models position. The higher the resolution, the less positions to render, the faster. 
 */
WaterModel.prototype.resetSizeAndResolution = function(width, height, resolution) {
    this.width = Math.ceil(width / resolution);
    this.height = Math.ceil(height / resolution);
    this.resolution = resolution;

    this.depthMap1 = new Array(this.width);
    this.depthMap2 = new Array(this.width);
    for (var x = 0; x < this.width; x++) {
        this.depthMap1[x] = new Array(this.height);
        this.depthMap2[x] = new Array(this.height);

        for (var y = 0; y < this.height; y++) {
            this.depthMap1[x][y] = 0.0;
            this.depthMap2[x][y] = 0.0;
        }
    }
}






////////////////////////////////////////////////////////////////////////////////
//                                 Util functions                             //
////////////////////////////////////////////////////////////////////////////////
/**
 * A class to mimic rain on the given waterModel with raindrop2dArray's as raindrops.
 */
RainMaker = function(width, height, waterModel, raindrop2dArray) {
    this.width = width;
    this.height = height;
    this.waterModel = waterModel;
    this.raindrop2dArray = raindrop2dArray;

    this.rainMinPressure = 1;
    this.rainMaxPressure = 3;
}

RainMaker.prototype.raindrop = function() {
    var x = Math.floor(Math.random() * this.width);
    var y = Math.floor(Math.random() * this.height);
    this.waterModel.touchWater(x, y, this.rainMinPressure + Math.random() * this.rainMaxPressure, this.raindrop2dArray);
}

RainMaker.prototype.setRaindropsPerSecond = function(rps) {
    this.rps = rps;

    clearInterval(this.rainInterval);

    if (this.rps > 0) {
        var self = this;
        this.rainInterval = setInterval(function() {
            self.raindrop();
        }, 1000 / this.rps);
    }
}

RainMaker.prototype.setRainMinPressure = function(rainMinPressure) {
    this.rainMinPressure = rainMinPressure;
}

RainMaker.prototype.setRainMaxPressure = function(rainMaxPressure) {
    this.rainMaxPressure = rainMaxPressure;
}

/**
 * Enables mouse interactivity by adding event listeners to the given documentElement and
 * using the mouse coordinates to 'touch' the water.
 */

function enableMouseInteraction(waterModel, documentElement) {
    var mouseDown = false;

    var canvasHolder = document.getElementById(documentElement);

    canvasHolder.addEventListener("mousedown", function(e) {
        mouseDown = true;
        var x = (e.clientX - canvasHolder.offsetLeft) + document.body.scrollLeft + document.documentElement.scrollLeft;
        var y = (e.clientY - canvasHolder.offsetTop) + document.body.scrollTop + document.documentElement.scrollTop;
        waterModel.touchWater(x, y, 1.5, mouseDown ? finger : pixel);
    }, false);

    canvasHolder.addEventListener("mouseup", function(e) {
        mouseDown = false;
    }, false);

    canvasHolder.addEventListener("mousemove", function(e) {
        var x = (e.clientX - canvasHolder.offsetLeft) + document.body.scrollLeft + document.documentElement.scrollLeft;
        var y = (e.clientY - canvasHolder.offsetTop) + document.body.scrollTop + document.documentElement.scrollTop;
        // mozPressure: https://developer.mozilla.org/en/DOM/Event/UIEvent/MouseEvent
        waterModel.touchWater(x, y, 1.5, mouseDown ? finger : pixel);
    }, false);
}

/**
 * Creates a canvas with a radial gradient from white in the center to black on the outside.
 */

function createRadialCanvas(width, height) {
    // Create a canvas
    var pointerCanvas = document.createElement('canvas');
    pointerCanvas.setAttribute('width', width);
    pointerCanvas.setAttribute('height', height);
    pointerCtx = pointerCanvas.getContext('2d');

    // Create a drawing on the canvas
    var radgrad = pointerCtx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, height / 2);
    radgrad.addColorStop(0, '#fff');
    radgrad.addColorStop(1, '#000');

    pointerCtx.fillStyle = radgrad;
    pointerCtx.fillRect(0, 0, width, height);

    return pointerCanvas;
}

/**	
 * Creates a 2D pointer array from a given canvas with a grayscale image on it. 
 * This canvas image is then converted to a 2D array with values between -1.0 and 0.0.
 * 
 * Example:
 * 	var array2d = [
 * 		[0.5, 1.0, 0.5], 
 * 		[1.0, 1.0, 1.0], 
 * 		[0.5, 1.0, 0.5]
 * 	];
 */

function create2DArray(canvas) {
    var width = canvas.width;
    var height = canvas.height;

    // Create an empty 2D  array
    var pointerArray = new Array(width);
    for (var x = 0; x < width; x++) {
        pointerArray[x] = new Array(height);
        for (var y = 0; y < height; y++) {
            pointerArray[x][y] = 0.0;
        }
    }

    // Convert gray scale canvas to 2D array
    var pointerCtx = canvas.getContext('2d');
    var imgData = pointerCtx.getImageData(0, 0, width, height);
    var pixels = imgData.data;

    for (var i = 0; n = pixels.length, i < n; i += 4) {
        // Get the pixel from input
        var pixVal = pixels[i]; // only use red
        var arrVal = pixVal / 255.0;

        var pixel = i / 4;
        var x = pixel % width;
        var y = (pixel - x) / width;

        pointerArray[x][y] = arrVal;
    }

    return pointerArray;
}

// requestAnimFrame (NB: NOT requestAnimationFrame) will be used, 
// so make sure it's available. Credits @mrdoob
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function( /* function */ callback, /* DOMElement */ element) {
        window.setTimeout(callback, 1000 / 60);
    };
})();