Collatz Creature

let n = 2000;
let t = 0;
let cnv;
function setup() {
  cnv = createCanvas(windowWidth, windowHeight);
  n = round(random(1000, 5000));
  d = min(width, height) * 0.5;
  noFill();
  strokeWeight(0.5);
  r1 = random(1, 10);
  r2 = random(1, 3);
  background(0);
  describe(
    "a circle of light lines with circles at the end at various lengths and angles that give an almost anenome feel to it. the lines move gently and at times you can feel as if there is a pattern in their lengths - similar to the plot of the numbers with the collatz conjecture."
  );
}

function draw() {
  t += 0.005;
  translate(width / 2, height / 2);
  background(0, 0, 0, 20);
  rotate(t / 50);
  oldx = (d / 2) * Math.cos(((2 * PI) / n) * 0);
  oldy = (d / 2) * Math.sin(((2 * PI) / n) * 0);
  for (let i = 0; i < n; i++) {
    let c = getNsteps(i) / 1.5;
    x1 = (d / 2) * Math.cos(((2 * PI) / n) * i);
    y1 = (d / 2) * Math.sin(((2 * PI) / n) * i);
    x2 =
      (d / 2 -
        c -
        (oldx / 2 - oldy / 3) *
          Math.cos(t / r2 - c - r1) *
          Math.sin(t / r1 - c - r2)) *
      Math.cos(((2 * PI) / n) * i);
    y2 =
      (d / 2 -
        c -
        (oldy / 2 - oldx / 4) *
          Math.sin(t / r2 - c - r1) *
          Math.cos(t / r1 - r2)) *
      Math.sin(((2 * PI) / n) * i);
    push();

    fill(240 - c, 250 - c, 255 - c);

    noStroke();

    circle(x2, y2, 4);
    pop();
    strokeWeight(0.01);
    stroke(240 - c, 250 - c, 255 - c);
    line(x1, y1, x2, y2);


    oldx = x2;
    oldy = y2;
  }
}

function getNsteps(num) {
  let cnt = 0;

  while (num > 1) {
    if (num % 2 === 0) {
      num = num / 2;
    } else {
      num = num * 3 + 1;
    }
    cnt++;
  }
  return cnt;
}

function keyPressed() {
  if (keyCode === 32) {
    setup();
    draw();
  }
  if (keyCode === 83) {
    save(cnv, "collatz", "png");
  }
}