Trisectrix of Maclaurin

let colors = [

  [0, 0, 12, 1],

  [0, 0, 95, 1]

];

colors = [

  [111,30,30],

  [111,60,90]

  ];

​

function setup() {

  createCanvas(512, 512);

  colorMode(HSB);

}

​

function drawMaclaurinTrisectrix(a) {

  stroke(colors[1]);

  strokeWeight(1);

  const c = color(colors[1]);

  c.setAlpha(0.15);

  fill(c);

  beginShape();

  for (var t = -50; t < 50; t += 0.02) {

    const x = a * (t ** 2 - 3) / (t ** 2 + 1);

    const y = a * (t * (t ** 2 - 3)) / (t ** 2 + 1);

    vertex(x,y);

  }

  endShape();

}

function zeroToOneWave(x) {

  return 0.5 * (sin(TAU * x - PI / 2) + 1);

}

​

let t0;

function draw() {

  background(colors[0]);

  translate(width / 2, height * 0.75);

  rotate(PI/2)

  if (t0 === undefined) {

    t0 = millis() / 1000;

  }

  const t = millis() / 1000 - t0;

  const a = 20;

  const a2 = map(zeroToOneWave(t / 2), 0, 1, 20, 40);

  const a3 = map(zeroToOneWave(t / 3), 0, 1, 40, 70);

  const a4 = map(zeroToOneWave(t / 5), 0, 1, 70, 120);

  const a5 = 120;

​

  drawMaclaurinTrisectrix(a5);

  drawMaclaurinTrisectrix(a4);

  drawMaclaurinTrisectrix(a3);

  drawMaclaurinTrisectrix(a2);

  drawMaclaurinTrisectrix(a);

}