var canvas = document.getElementById( "canvas" );

var size = {

    width: window.innerWidth,

    height: window.innerHeight

};

​

window.requestAnimtionFrame =

    window.requestAnimationFrame ||

    window.webkitRequestAnimationFrame ||

    window.mozRequestAnimationFrame ||

    window.oRequestAnimationFrame ||

    window.msRequestAnimationFrame ||

    function( callback ) {

        window.setTimeout( callback, 1000 / 60 );

    };

​

var options = {

    color: "#777",

    waveAmplitude: 30,

    waveRadius: 100,

    waveElasticity: 0.95,

    waveStrength: 0.011,

    waveMouse: 10,

    waveMax: 100,

    waveComeUp: function() {},

    waveRiseSpeed: 15,

};

​

var Mouse = ( function() {

​

    var exports = {

        x: 0,

        y: 0,

        bind: function( canvas ) {

            canvas.addEventListener( "mousemove", onMouseMove );

        },

        unbind: function( canvas ) {

            canvas.removeEventListener( "mousemove", onMouseMove );

        }

    };

​

    function onMouseMove( event ) {

        exports.x = event.pageX;

        exports.y = event.pageY;

    }

​

    return exports;

​

} )();

​

var Stage = {

    width: 1,

    height: 1,

    set: function( values ) {

        Stage.width = values.width;

        Stage.height = values.height;

    }

};

​

var times = function( amount, closure ) {

    for ( var i = 0; i < amount; i++ ) {

        closure( i );

    }

};

​

var func = function ( name ) {

    return function( obj ) {

        return obj[ name ]();

    };

};

​

​

var rand = function( min, max ) {

    return min + ( max - min ) * Math.random();

};

​

var bezier = function( points, context ) {

​

    var a, b, x, y;

​

    for ( var i = 1, length = points.length - 2; i < length; i++ ) {

​

        a = points[ i ];

        b = points[ i + 1 ];

​

        x = ( a.x + b.x ) * .5

        y = ( a.y + b.y ) * .5

​

        context.quadraticCurveTo( a.x, a.y, x, y );

    }

​

    a = points[ i ];

    b = points[ i + 1 ];

​

    context.quadraticCurveTo( a.x, a.y, b.x, b.y );

}

​

var distance = function( a, b ) {

    var x = b.x - a.x;

    var y = b.y - a.y;

​

    return Math.sqrt( x * x + y * y );

};

​

var clamp = function( val, min, max ) {

    return val < min ? min : ( val > max ? max : val );

}

​

var Water = function( context ) {

​

    var waves;

​

    function init() {

        options.waveComeUp = this.start.bind( this );

    }

​

    this.render = function() {

        context.strokeStyle = options.color;

        context.lineWidth = 1;

        context.beginPath();

​

        waves.forEach( func( "render" ) );

​

        context.stroke();

    };

​

    this.setSize = function( width, height ) {

​

        createWaves( height );

​

        waves.forEach( function( wave ) {

            wave.setSize( width, height );

        } );

​

    };

​

    this.start = function() {

        waves.forEach( func( "start" ) );

    };

​

    function createWaves( height ) {

​

        waves = [];

        var distance = 50;

​

        times( height / distance, function( index ) {

            waves.push( new Wave( 0, index * distance + 10, context, rand( 0.18, 0.22 ) * index ) );

        } );

​

    }

​

    init.call( this );

​

};

​

var Wave = function( originalX, originalY, context, offset ) {

​

    var anchors;

    var width;

    var height;

    var mouseDirection;

    var oldMouse;

    var x;

    var y;

​

    function init() {

        x = targetX = originalX;

        y = targetY = originalY;

​

        anchors = [];

        mouseDirection = { x: 0, y: 0 };

​

        var anchor;

        var current = 0;

        var start = - options.waveAmplitude;

        var target = options.waveAmplitude;

        var delta = offset;

        var step = 0.4;

​

        times( 20, function() {

            anchor = new Anchor( current, 0, start, target, delta );

            anchor.setOrigin( current + x, y );

​

            anchors.push( anchor );

​

            current += 90;

            delta += step;

​

            if ( delta > 1 ) {

                times( Math.floor( delta ), function() {

                    delta--;

                    start *= -1;

                    target *= -1;

                } );

            }

​

        } );

    }

​

    this.render = function() {

​

        update();

​

        context.save();

        context.translate( x, y );

​

        context.moveTo( anchors[ 0 ].x, anchors[ 0 ].y );

        bezier( anchors, context );

​

        context.restore();

    };

​

    this.setSize = function( _width, _height ) {

        width = _width;

        height = _height;

​

        var step = _width / ( anchors.length - 1 );

​

        anchors.forEach( function( anchor, i ) {

            anchor.x = step * i;

            anchor.setOrigin( anchor.x, y );

        } );

    };

​

    this.onAmpChange = function() {

        anchors.forEach( func( "onAmpChange" ) );

    };

​

    this.start = function() {

        y = height + 300 + originalY * 0.4;

    };

​

    function update() {

        targetY = Math.min( y, Mouse.y + originalY );

        y += ( targetY - y ) / options.waveRiseSpeed;

​

        updateMouse();

​

        anchors.forEach( function( anchor ) {

            anchor.update( mouseDirection, y );

        } );

    }

​

    function updateMouse() {

        if ( ! oldMouse ) {

            oldMouse = { x: Mouse.x, y: Mouse.y };

            return;

        }

​

        mouseDirection.x = Mouse.x - oldMouse.x;

        mouseDirection.y = Mouse.y - oldMouse.y;

​

        oldMouse = { x: Mouse.x, y: Mouse.y };

    }

​

    init.call( this );

​

};

​

var Anchor = function( x, y, start, target, delta ) {

​

    var spring;

    var motion;

    var origin;

​

    function init() {

        spring = new Spring();

        motion = new Motion( start, target, delta );

        origin = {};

        this.x = x;

        this.y = y;

    }

​

    this.update = function( mouseDirection, currentY ) {

        origin.y = currentY;

​

        var factor = getMultiplier();

        var vector = {

            x: mouseDirection.x * factor * options.waveMouse,

            y: mouseDirection.y * factor * options.waveMouse

        }

​

        if ( factor > 0 ) {

            spring.shoot( vector );

        }

​

        spring.update();

        motion.update();

​

        this.y = motion.get() + spring.y;

    };

​

    this.onAmpChange = function() {

        motion.onAmpChange();

    };

​

    this.setOrigin = function( x, y ) {

        origin.x = x;

        origin.y = y;

    };

​

​

    function getMultiplier() {

        var lang = distance( Mouse, origin );

        var radius = options.waveRadius;

​

        return  lang < radius ? 1 - lang / radius : 0;

    }

​

    init.call( this );

​

};

​

var Motion = function( start, target, delta ) {

​

    var SPEED = 0.02;

    var half;

    var upper;

    var lower;

    var min;

    var max;

​

    function init() {

        this.onAmpChange();

    }

​

​

    this.setRange = function( a, b ) {

        min = a;

        max = b;

    };

​

    this.update = function() {

        delta += SPEED;

​

        if ( delta > 1 ) {

            delta = 0;

            start = target;

            target = target < half ? rand( upper, max ) : rand( min, lower );

        }

    };

​

    this.get = function() {

        var factor = ( Math.cos( ( 1 + delta ) * Math.PI ) + 1 ) / 2;

        return start + factor * ( target - start );

    };

​

    this.onAmpChange = function() {

        min = - options.waveAmplitude;

        max = options.waveAmplitude;

        half = min + ( max - min ) / 2;

        upper = min + ( max - min ) * .75;

        lower = min + ( max - min ) * .25;

    };

​

​

    init.call( this );

​

};

​

var Spring = function() {

​

    var px = 0;

    var py = 0;

    var vx = 0;

    var vy = 0;

    var targetX = 0;

    var targetY = 0;

    var timeout;

​

    function init() {

        this.x = 0;

        this.y = 0;

    }

​

    this.update = function() {

        vx = targetX - this.x;

        vy = targetY - this.y;

        px = px * options.waveElasticity + vx * options.waveStrength;

        py = py * options.waveElasticity + vy * options.waveStrength;

        this.x += px;

        this.y += py;

    };

​

    this.shoot = function( vector ) {

        targetX = clamp( vector.x, -options.waveMax, options.waveMax );

        targetY = clamp( vector.y, -options.waveMax, options.waveMax );

​

        clearTimeout( timeout );

        timeout = setTimeout( cancelOffset, 100 );

    };

​

    function cancelOffset() {

        targetX = 0;

        targetY = 0;

    }

​

    init.call( this );

};

​

var Canvas = function( canvas, size ) {

​

    var context;

    var width, height;

    var animations;

    var alive = true;

​

    function init() {

​

        context = canvas.getContext( "2d" );

​

        setTimeout( function() {

            Mouse.bind( canvas );

        }, 1000 );

​

        Stage.set( size );

​

        animation = new Water( context );

​

        this.setSize( size.width, size.height );

​

        animation.start();

​

        requestAnimtionFrame( render );

    }

​

    function render() {

        context.setTransform( 1, 0, 0, 1, 0, 0 );

        context.clearRect( 0, 0, width, height );

​

        context.save();

        animation.render();

        context.restore();

​

        requestAnimtionFrame( render );

    }

​

    this.setSize = function( _width, _height ) {

​

        canvas.width = Stage.width = width = _width;

        canvas.height = Stage.height = height = _height;

​

        animation.setSize( _width, _height );

    }

​

    init.call( this );

};

​

var app = new Canvas( canvas, size );

​

window.addEventListener( "resize", function() {

    app.setSize( window.innerWidth, window.innerHeight );

}, false );