jmuyskens/index.html

## 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>