const CONVOLUTIONS = 4;

const FRAMES_PER_CONVOLUTION = 90;

let vertices = [];

​

let myFont;

function preload() {

  myFont = loadFont("assets/NotoSansMono-VariableFont_wdth,wght.ttf");

}

​

function setup() {

  if (EXPORT) {

    createCanvas(900, 900, SVG);

  } else {

    createCanvas(900, 900);

  }

  textFont(myFont);

  noFill();

  stroke(0);

  strokeWeight(1);

  angleMode(DEGREES);

}

​

function draw() {

  background(255);

  drawSpiral();

  //drawOrnaments();

  if (frameCount === CONVOLUTIONS * FRAMES_PER_CONVOLUTION) {

    findCenter();

    capSpiral(CONVOLUTIONS - 1);

​

    noLoop();

  }

  beginShape();

  noFill();

  stroke(0);

  for (let v of vertices) {

    vertex(v.x, v.y);

  }

​

  endShape();

  if (frameCount === CONVOLUTIONS * FRAMES_PER_CONVOLUTION && EXPORT) {

    save();

  }

}

​

//This function draws a spiral using polar coordinates that are converted to cartesian coordinates.

function drawSpiral() {

  let x = width >> 1;

  let y = height >> 1;

  let angle = map(frameCount, 0, FRAMES_PER_CONVOLUTION, 0, 360);

  let r = frameCount;

  let dx = r * cos(angle); //CAH

  let dy = r * sin(angle); //SOH

  vertices.push(createVector(x + dx, y + dy));

}

//Draw ornaments

function drawOrnaments() {

  let x = width >> 1;

  let y = height >> 1;

  //stroke(255,0,0);

  fill(255, 0, 0);

  noStroke();

  textSize(24);

  textAlign(CENTER);

​

  text(

    "π/2",

    x + 1.5 * (FRAMES_PER_CONVOLUTION * cos(-90)),

    y + 1.5 * (FRAMES_PER_CONVOLUTION * sin(-90))

  );

  text(

    "π/2",

    x + 2.5 * (FRAMES_PER_CONVOLUTION * cos(-90)),

    y + 2.5 * (FRAMES_PER_CONVOLUTION * sin(-90))

  );

  text(

    "π/2",

    x + 3.5 * (FRAMES_PER_CONVOLUTION * cos(-90)),

    y + 3.5 * (FRAMES_PER_CONVOLUTION * sin(-90))

  );

​

  push();

  rotate(10);

  translate(x, y);

  text(

    "3π/2",

    1.5 * (FRAMES_PER_CONVOLUTION * cos(0)),

    1.5 * (FRAMES_PER_CONVOLUTION * sin(0))

  );

  text(

    "3π/2",

    2.5 * (FRAMES_PER_CONVOLUTION * cos(0)),

    2.5 * (FRAMES_PER_CONVOLUTION * sin(0))

  );

  text(

    "3π/2",

    3.5 * (FRAMES_PER_CONVOLUTION * cos(0)),

    3.5 * (FRAMES_PER_CONVOLUTION * sin(0))

  );

  pop();

  text(

    "π",

    x + 1.5 * (FRAMES_PER_CONVOLUTION * cos(180)),

    y + 1.5 * (FRAMES_PER_CONVOLUTION * sin(180))

  );

  text(

    "π",

    x + 2.5 * (FRAMES_PER_CONVOLUTION * cos(180)),

    y + 2.5 * (FRAMES_PER_CONVOLUTION * sin(180))

  );

  text(

    "π",

    x + 3.5 * (FRAMES_PER_CONVOLUTION * cos(180)),

    y + 3.5 * (FRAMES_PER_CONVOLUTION * sin(180))

  );

​

  // text(

  //   "3π/2",

  //   x + 1.5 * (FRAMES_PER_CONVOLUTION * cos(-270)),

  //   y + 1.5 * (FRAMES_PER_CONVOLUTION * sin(-270))

  // );

  // text(

  //   "3π/2",

  //   x + 2.5 * (FRAMES_PER_CONVOLUTION * cos(-270)),

  //   y + 2.5 * (FRAMES_PER_CONVOLUTION * sin(-270))

  // );

  // text(

  //   "3π/2",

  //   x + 3.5 * (FRAMES_PER_CONVOLUTION * cos(-270)),

  //   y + 3.5 * (FRAMES_PER_CONVOLUTION * sin(-270))

  // );

}

//This functions creates a line between the last and second-to-last convolutions.

function capSpiral(c) {

  let x = width >> 1;

  let y = height >> 1;

  let dx = c * FRAMES_PER_CONVOLUTION * cos(0); //CAH

  let dy = c * FRAMES_PER_CONVOLUTION * sin(0); //SOH

  vertices.push(createVector(x + dx, y + dy));

}

//This places the hole that the string goes through in the approximate center of the spiral

function findCenter() {

  let xAverage = 0;

  let yAverage = 0;

  let index = 0;

  for (let v of vertices) {

    xAverage += v.x;

    yAverage += v.y;

  }

  stroke(0);

  noFill();

  ellipse(xAverage / vertices.length, yAverage / vertices.length, 6, 6);

}

​