var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    cen = {x:w/2, y:h/2},
    ctx = c.getContext('2d'),
    span = 50, //hi
    points = [],
    matrix = [],
    totX = (w/span +1)|0,
    totY = (h/span +2)|0,
    totCen = {x:totX/2, y:totY/2},
    radiant = 0,
    increment = 0.02,
    waveHeight = 40;

for(var i = 0; i < totX; ++i){
  matrix.push([]);
  
  for(var j = 0; j < totY; ++j){
    var point = {
      x:i,
      y:j-1,
      dist: Math.sqrt(
        (i - totCen.x)*(i - totCen.x) +
        (j - totCen.y)*(j - totCen.y)
      ),
      yVariation:0
    };
    
    points.push(point);
    matrix[i].push(point);
  }
}

function anim(){
  window.requestAnimationFrame(anim);
  
  radiant+=increment;
  
  ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
  ctx.fillRect(0, 0, w, h);
  
  for(var i = 0; i < points.length; ++i){
    var point = points[i];
    
    point.yVariation = Math.abs(Math.sin(radiant + point.dist)) * waveHeight;
    
    ctx.fillStyle = 'rgb(c, 10, 100)'.replace('c', ((point.yVariation/waveHeight)*255)|0);
    ctx.strokeStyle = ctx.fillStyle;
    
    ctx.beginPath();
    ctx.arc(point.x * span, point.y * span + point.yVariation, 3, 0, Math.PI*2);
    ctx.fill();
    ctx.closePath();
    
    var neighbourUp = matrix[point.x][point.y],
        neighbourLeft = matrix[point.x - 1]? matrix[point.x - 1][point.y + 1] : false;
    
    if(neighbourUp){
      ctx.beginPath();
      ctx.moveTo(point.x * span, point.y * span + point.yVariation);
      ctx.lineTo(neighbourUp.x * span, neighbourUp.y * span + neighbourUp.yVariation);
      ctx.stroke();
      ctx.closePath();
    }
    if(neighbourLeft){
      ctx.beginPath();
      ctx.moveTo(point.x * span, point.y * span + point.yVariation);
      ctx.lineTo(neighbourLeft.x * span, neighbourLeft.y * span + neighbourLeft.yVariation);
      ctx.stroke();
      ctx.closePath();
    }
  }
}

anim();

//this is awesome.