Below is an emulation of water using the principles of Hookes law, implemented in javascript.
//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();