Waves!

Messing around with a wave implementation

by loktar

HTML

<canvas id="canvas"></canvas>

JavaScript

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();


var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = window.innerWidth-8,
    height = window.innerHeight-8;

canvas.width = width;
canvas.height = height;

// spring stuff
var tension = .025,
    dampening = .025,
    spread = .25;

// waves
var wavesNum = 100,
    waves = [],
    lastWave = new Date().getTime(),
    waveDelay = 500;

for(var i = 0; i < wavesNum; i++){
    var x =  Math.ceil(width/wavesNum)*i,
        y = height - (height/3)*2;     
    
    waves.push({
            pos : {x : x, y : y}, 
            targetHeight : height-y,
            height : height-y,
            speed : 0
    });   
}

function update(){
  // randomly make waves
  if(new Date().getTime() > lastWave + waveDelay){
        lastWave = new Date().getTime();
    waveDelay = Math.floor(Math.random()*1000);
    waves[Math.floor(Math.random()*wavesNum)].speed -= 20 + Math.random()*80;
  }
  
  ctx.clearRect(0,0,canvas.width, canvas.height);
  
  for(var i = 0; i < wavesNum; i++){    
    var diff = waves[i].targetHeight - waves[i].height;
    
    waves[i].speed += tension * diff - waves[i].speed * dampening;
    waves[i].height += waves[i].speed;
  }    
  
  var lDeltas = [],
      rDeltas = [];
  
  for (var i = 0; i < wavesNum; i++){
    if (i > 0){
      lDeltas[i] = spread * (waves[i].height - waves[i - 1].height);
      waves[i - 1].speed += lDeltas[i];
    }
    
    if (i < wavesNum - 1){
      rDeltas[i] = spread * (waves[i].height - waves[i + 1].height);
      waves[i + 1].speed += rDeltas[i];
    }
  }
  
  for (var i = 0; i < wavesNum; i++){
    if (i > 0){
      waves[i - 1].height += lDeltas[i];
    }
    if (i < waves.length - 1){
      waves[i + 1].height...