block by jmuyskens cea0096fb975ea9059ec

waves (p5.js)

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>waves (p5.js)</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.8/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
  createCanvas(960, 480);
  background(255);
  strokeWeight(2);
}

var t = 0;
var i = 0.1;

function sinc(x){
  return 15 * sin(x) + 25;
}

function drawV(x, y, off){
  line(x,y,x+sinc(t+off),y+25);
  line(x+50,y,x+50-sinc(t+off+PI),y+25);
}

function draw() {
  background(255);

  var off = 0.0;
  for(var x = 100; x <= 800; x += 50){
    var offsX = off;
    for(var y = 50; y <= 400; y += 10){
      drawV(x, y, offsX);
      offsX += 0.5;
    }
    off += PI/2;
  }

  t += i;
}

</script>
</body>
</html>