[p5.js習作＃3] 透き通ったクリスタルの中を通っているようなアニメーション

ブラウザを再読み込みすると毎回ベースの色が変わります。
気に入った色を探してみてください！
（画像をクリックするとアニメーション画面に遷移します。）

Roll Call Vote（堂々巡り）の実際の画面（動きます）

制作：P5.js　
制作時間：約1時間

https://indepa.net/works/RollCallVote/index.html

let t = 0;
let hueBase;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB);
  noStroke();
  background(0, 0.02);

  // Set up event listener for window resizing
  window.addEventListener("resize", windowResized);

  // Set a random hue value for each load
  hueBase = random(360);
}

function draw() {
  if (!t) {
    background(0, 0.02);
  }

  t += 0.02;

  for (let d = 540; d > 0; d--) {
    const arcStart = d / 9;
    const hue = (hueBase + random(30)) % 360;
    const saturation = sin(d - t) * 30 + 70;
    const brightness = 70 - sin(d - t) * 30;
    const alpha = 0.5;
    const noiseValue = noise(arcStart - t);
    const arcRadius = noiseValue * d / 9;
    const arcHeight = height * 0.99 + 50;

    const x = width / 2 + cos(arcStart) * d;
    const y = height / 2 + sin(arcStart) * d;
    const rotation = d / 2 - t;

    fill(hue, saturation, brightness, alpha);
    push();
    resetMatrix(); // reset transformations before translating
    translate(x, y);
    rotate(rotation);
    arc(0, 0, arcHeight, arcRadius, arcStart, arcStart + PI, CHORD);
    pop();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0, 0.02);
  t = 0;
}