Configurazioni con 4 segmenti rotanti

// width=670 height=670
let raggio1 = 96;
let raggio2 = 48;
let raggio3 = 24;
let raggio4 = 12;

let passoAngolo1;
let passoAngolo2;
let passoAngolo3;
let passoAngolo4;

//let drawRate = 1;
let drawRate = 1.5;

function setup()
{
  createCanvas(670,670);
  stroke(0,40);
  background(255);
  cursor( HAND );

  passoAngolo1 = PI/937;
  passoAngolo2 = PI/177;
  passoAngolo3 = PI/31;
  passoAngolo4 = PI/9;
}

function draw ()
{
  let c1x = 335;
  let c1y = 335;

  let angolo1 = frameCount*passoAngolo1;
  let c2x = c1x + cos(angolo1)*raggio1;
  let c2y = c1y + sin(angolo1)*raggio1;

  let angolo2 = frameCount*passoAngolo2;
  let c3x = c2x + cos(angolo2)*raggio2;
  let c3y = c2y + sin(angolo2)*raggio2;

  let angolo3 = frameCount*passoAngolo3;
  let c4x = c3x + cos(angolo3)*raggio3;
  let c4y = c3y + sin(angolo3)*raggio3;

  let angolo4 = frameCount*passoAngolo4;
  let c5x = c4x + cos(angolo4)*raggio4;
  let c5y = c4y + sin(angolo4)*raggio4;

  line(c2x,c2y, c3x,c3y);
  line(c3x,c3y, c4x,c4y);
  line(c4x,c4y, c5x,c5y);

  if (drawRate < 120) {
//  if (drawRate < 100) {
//    drawRate *= 1.07;
    drawRate *= 1.14;
    frameRate(round(drawRate));
  }
}

function mouseClicked()
{
  raggio1 = random(310)+10;
  raggio2 = random(320-raggio1)+10;
  raggio3 = random(330-raggio1-raggio2)+10;
  raggio4 = random(340-raggio1-raggio2-raggio3)+10;

  passoAngolo1 = random(0.001,0.2);
  passoAngolo2 = random(0.001,0.2);
  passoAngolo3 = random(0.001,0.2);
  passoAngolo4 = random(0.001,0.2);

  background(255);
  drawRate = 1;
}

Il primo segmento che ruota attorno al centro non viene disegnato per evitare l'annerimento anticipato dell'area centrale. Sul p5.js Web Editor è possibile trovare il codice sorgente.