もう読めなくなった複雑なCSSグラフィックアート コードアーカイブ

Monologueの https://monologue.asappy.xyz/index.html に書いたまるで24時間テレビの惑星のようなものから光が飛び出すあいさつのコードグラフィックアニメーションの中身

function helloChord() {
  const mainWidth = document.querySelector('main').clientWidth;
  const anchor = document.querySelector('#anchor');
  let step = 1;
  const numOfNotes = 30;
  const midiOffset = Math.floor((Math.random() - 0.5) * 12);
  sequencer((value) => {
    playNote(value - 0.5 + midiOffset, 0.03, 8, 'sawtooth', 440 * Math.pow(2, -1 / 12 / 2));
 
    const dir = Math.random() * Math.PI * 2;
    const colorHsl = `hsl(${Math.round(Math.random() * 360)}deg 100% 50%)`;
 
    const note = document.createElement('div');
    note.textContent = midiToNoteName(value);
    note.classList.add('chord-note');
    note.style.color = colorHsl;
    note.style.left = `${Math.cos(dir) * ((mainWidth * 0.5 - 30) * (step / numOfNotes) + 25)}px`;
    note.style.top = `${Math.sin(dir) * ((mainWidth * 0.5 - 30) * (step / numOfNotes) + 25)}px`;
    note.style.fontSize = `${(1.0 + Math.random() * 0.8) * (1 + 1.0 * (step / numOfNotes))}em`;
 
    const ring = document.createElement('div');
    ring.classList.add('note-ring');
    ring.style.borderColor = colorHsl;
    ring.style.width = `${(mainWidth * 1 - 60) * (step / numOfNotes)}px`;
    ring.style.height = `${(mainWidth * 1 - 60) * (step / numOfNotes)}px`;
 
    const line = document.createElement('div');
    line.classList.add('note-line');
    line.style.backgroundColor = colorHsl;
    line.style.width = `${(mainWidth * 1 - 60) * (step / numOfNotes)}px`;
    line.style.height = `${(mainWidth * 1 - 60) * (step / numOfNotes)}px`;
    line.style.clipPath = `polygon(
      50% 50%,
      ${50 + Math.cos(dir) * 50 - Math.sin(dir) * 2}% ${50 + Math.sin(dir) * 50 + Math.cos(dir) * 2}%,
      ${50 + Math.cos(dir) * 50 + Math.sin(dir) * 2}% ${50 + Math.sin(dir) * 50 - Math.cos(dir) * 2}%)`; // 音名へ伸びる三角形を描く
 
    anchor.appendChild(note);
    anchor.appendChild(ring);
    anchor.appendChild(line);
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        note.style.opacity = 0.0;
        ring.style.opacity = 0.0;
        line.style.opacity = 0.0;
      });
    });
    setTimeout(() => {
      anchor.removeChild(note);
      anchor.removeChild(ring);
      anchor.removeChild(line);
    }, 5000);
    step++;
  },
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 92],
    [0, 4, 7, 11, 14, 18, 21, 25, 28, 32, 35, 39, 42, 46, 49, 53, 56, 60, 63, 67, 70, 74, 77, 81, 84, 88, 91, 95, 98],
    240 * 15,
    /*'hello-chord'*/
  );
}

極めて 不誠実に ハードコーディング された値と、
CSSプロパティ を直にいじることによる 複雑さ と、
シンプルに 嫌気が刺す 三角関数の座標計算 。

もう読めなくなりました。
おそらく今まで書いたコードの中で最悪のコードのひとつです。可読性の観点でも。
コメントを書いてれば少しはましかもしれないし、焼け石に水かもしれない。

sequencer(), playNote()は自作音声再生ライブラリの関数。

---

また似たようなこともしてしまいました -> CSSで全てを描写したくても、無理はしてはいけないよ