jmuyskens/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>waves (p5.js)</title>
  <script src="http://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>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>waves (p5.js)</title>
	<script src="http://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>