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

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

function anim(){
  window.requestAnimationFrame(anim);
  
  radiant+=increment;
  
  ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
  ctx.fillRect(0, 0, w, h);
  
  ctx.fillStyle = 'yellow';
  
  for(var i = 0; i < points.length; ++i){
    var point = points[i];
    
    var yVariation = Math.sin(radiant + point.dist) * waveHeight;
    
    ctx.beginPath();
    ctx.arc(point.x * span, point.y * span + yVariation, 3, 0, Math.PI*2);
    ctx.fill();
    ctx.closePath();
  }
}

anim();