block by jmuyskens 302156301b319c5cfbe8

302156301b319c5cfbe8

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="//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>