jmuyskens · October 5, 2015 03:31
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.8/p5.min.js"></script>
 </head>
 <body>
 <input id='slider' type="range" max=3 step=0.1 value=0 >
 <script>
 var t = 0.0;
 var incr = 0.01;
 var HEIGHT = 465;
 var WIDTH = 900;
 var centerY = HEIGHT / 2;
 var centerX = WIDTH / 2;
 var PIDIV = Math.PI / 6;

 var slider = document.getElementById('slider');

 function setup() {
  createCanvas(WIDTH, HEIGHT);
  background(255);
 }

 function sincr(x) {
  return 50 * sin(x + +slider.value);
 }

 function coscr(x) {
  return 50 * cos(x);
 }

 function flipX(x) {
  if (sin(x) > 0) {
    return 1;
  } else {
    return -1;
  }
 }

 function flipY(x) {
  if (cos(x) > 0) {
    return 1;
  } else {
    return -1;
  }
 }

 function getSinAX(angle) {
   return (centerX + 100 * sin(angle)) + flipX(angle) * abs(sincr(t) * sin(angle));
 }

 function getSinAY(angle) {
   return (centerY + 100 * cos(angle)) + flipY(angle) * abs(sincr(t) * cos(angle));
 }

 function getCosAX(angle) {
   return (centerX + 100 * sin(angle)) + flipX(angle) * abs(coscr(t) * sin(angle));
 }

 function getCosAY(angle) {
   return (centerY + 100 * cos(angle)) + flipY(angle) * abs(coscr(t) * cos(angle));
 }

 function getSinBX(angle) {
   return (centerX + 100 * sin(angle)) - flipX(angle) * abs(sincr(t) * sin(angle));
 }

 function getSinBY(angle) {
   return (centerY + 100 * cos(angle)) - flipY(angle) * abs(sincr(t) * cos(angle));
 }

 function getCosBX(angle) {
   return (centerX + 100 * sin(angle)) - flipX(angle) * abs(coscr(t) * sin(angle));
 }

 function getCosBY(angle) {
   return (centerY + 100 * cos(angle)) - flipY(angle) * abs(coscr(t) * cos(angle));
 }

 function drawSinV(x, y, angle) {
  line(getSinAX(angle), getSinAY(angle), getSinBX(angle), getSinBY(angle));
  line(getSinAX(angle), getSinAY(angle), getCosAX(angle + PIDIV), getCosAY(angle + PIDIV));
  line(getSinBX(angle), getSinBY(angle), getCosBX(angle + PIDIV), getCosBY(angle + PIDIV));
  line(getSinAX(angle), getSinAY(angle), getCosBX(angle + PIDIV), getCosBY(angle + PIDIV));
  line(getSinBX(angle), getSinBY(angle), getCosAX(angle + PIDIV), getCosAY(angle + PIDIV));
 }

 function drawCosV(x, y, angle) {
  line(getCosAX(angle), getCosAY(angle), getCosBX(angle), getCosBY(angle));
  line(getCosAX(angle), getCosAY(angle), getSinAX(angle + PIDIV), getSinAY(angle + PIDIV));
  line(getCosBX(angle), getCosBY(angle), getSinBX(angle + PIDIV), getSinBY(angle + PIDIV));
  line(getCosAX(angle), getCosAY(angle), getSinBX(angle + PIDIV), getSinBY(angle + PIDIV));
  line(getCosBX(angle), getCosBY(angle), getSinAX(angle + PIDIV), getSinAY(angle + PIDIV));
 }

 function draw() {
  background(255);
  var odd = false;
  for (var i = 0; i < 2*PI; i+=PIDIV) {
    var angle = i;
    if(odd) {
      drawCosV(centerX + 100 * sin(i), centerY + 100 * cos(i), angle);
      odd = false;
    } else {
      drawSinV(centerX + 100 * sin(i), centerY + 100 * cos(i), angle);
      odd = true;
    }
  }
  t += incr;
 }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.8/p5.min.js"></script>
	</head>
	<body>
	<input id='slider' type="range" max=3 step=0.1 value=0 >
	<script>
	var t = 0.0;
	var incr = 0.01;
	var HEIGHT = 465;
	var WIDTH = 900;
	var centerY = HEIGHT / 2;
	var centerX = WIDTH / 2;
	var PIDIV = Math.PI / 6;

	var slider = document.getElementById('slider');

	function setup() {
	createCanvas(WIDTH, HEIGHT);
	background(255);
	}

	function sincr(x) {
	return 50 * sin(x + +slider.value);
	}

	function coscr(x) {
	return 50 * cos(x);
	}

	function flipX(x) {
	if (sin(x) > 0) {
	return 1;
	} else {
	return -1;
	}
	}

	function flipY(x) {
	if (cos(x) > 0) {
	return 1;
	} else {
	return -1;
	}
	}

	function getSinAX(angle) {
	return (centerX + 100 * sin(angle)) + flipX(angle) * abs(sincr(t) * sin(angle));
	}

	function getSinAY(angle) {
	return (centerY + 100 * cos(angle)) + flipY(angle) * abs(sincr(t) * cos(angle));
	}

	function getCosAX(angle) {
	return (centerX + 100 * sin(angle)) + flipX(angle) * abs(coscr(t) * sin(angle));
	}

	function getCosAY(angle) {
	return (centerY + 100 * cos(angle)) + flipY(angle) * abs(coscr(t) * cos(angle));
	}

	function getSinBX(angle) {
	return (centerX + 100 * sin(angle)) - flipX(angle) * abs(sincr(t) * sin(angle));
	}

	function getSinBY(angle) {
	return (centerY + 100 * cos(angle)) - flipY(angle) * abs(sincr(t) * cos(angle));
	}

	function getCosBX(angle) {
	return (centerX + 100 * sin(angle)) - flipX(angle) * abs(coscr(t) * sin(angle));
	}

	function getCosBY(angle) {
	return (centerY + 100 * cos(angle)) - flipY(angle) * abs(coscr(t) * cos(angle));
	}

	function drawSinV(x, y, angle) {
	line(getSinAX(angle), getSinAY(angle), getSinBX(angle), getSinBY(angle));
	line(getSinAX(angle), getSinAY(angle), getCosAX(angle + PIDIV), getCosAY(angle + PIDIV));
	line(getSinBX(angle), getSinBY(angle), getCosBX(angle + PIDIV), getCosBY(angle + PIDIV));
	line(getSinAX(angle), getSinAY(angle), getCosBX(angle + PIDIV), getCosBY(angle + PIDIV));
	line(getSinBX(angle), getSinBY(angle), getCosAX(angle + PIDIV), getCosAY(angle + PIDIV));
	}

	function drawCosV(x, y, angle) {
	line(getCosAX(angle), getCosAY(angle), getCosBX(angle), getCosBY(angle));
	line(getCosAX(angle), getCosAY(angle), getSinAX(angle + PIDIV), getSinAY(angle + PIDIV));
	line(getCosBX(angle), getCosBY(angle), getSinBX(angle + PIDIV), getSinBY(angle + PIDIV));
	line(getCosAX(angle), getCosAY(angle), getSinBX(angle + PIDIV), getSinBY(angle + PIDIV));
	line(getCosBX(angle), getCosBY(angle), getSinAX(angle + PIDIV), getSinAY(angle + PIDIV));
	}

	function draw() {
	background(255);
	var odd = false;
	for (var i = 0; i < 2*PI; i+=PIDIV) {
	var angle = i;
	if(odd) {
	drawCosV(centerX + 100 * sin(i), centerY + 100 * cos(i), angle);
	odd = false;
	} else {
	drawSinV(centerX + 100 * sin(i), centerY + 100 * cos(i), angle);
	odd = true;
	}
	}
	t += incr;
	}

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