JS

            
              
//code below for the emulation

var _requestAnimationFrame = 
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      function(callback){ window.setTimeout(callback, 1000/60) };

var canvas = document.createElement('canvas'),
    ctx    = canvas.getContext('2d');

var springs = [],
    MAX_SPRINGS = 700;


canvas.width = window.innerWidth;
canvas.className = 'water-canvas'
canvas.height = 700;
document.body.appendChild( canvas );

ctx.fillStyle = '#247b95';

for (var i=0; i 0)
    {
      leftDeltas[i] = spread * (springs[i].p - springs[i-1].p);
      springs[i-1].v += leftDeltas[i];
    }
    if (i < MAX_SPRINGS-1)
    {
      rightDeltas[i] = spread * (springs[i].p - springs[i+1].p);
      springs[i+1].v += rightDeltas[i];
    }
  }
  
  for (i=0; i 0)
      springs[i-1].p += leftDeltas[i];
    if (i < MAX_SPRINGS-1)
      springs[i+1].p += rightDeltas[i];
  }
    
  }
  
}

function Spring()
{
  this.p = 0.05;
  this.v = 0.05;
  this.update = function( damp, tens )
  {
    this.v += (-tens * this.p - damp * this.v);
    this.p += this.v;
  }
}

function renderWaves()
{
  var i;
  ctx.beginPath();
  ctx.moveTo( 0, canvas.height );
  for (i=0; i=0; i--)
    {
      ctx.rotate( -this.sections[i] );
      ctx.lineTo( (this.nSec-i), -step*i );
    }
    ctx.fill();
    ctx.restore();
    
    ctx.restore();    
  };
  
  this.animate = function()
  {
    var i;
    for (i=0; i 0.99)
    springs[Math.floor(Math.random() * MAX_SPRINGS)].p = 150;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  oc.animate();
  oc.render();
  updateSprings( 0.1 );
  renderWaves();
  _requestAnimationFrame(tick);
}

tick();