shigureni.dev

ここから先は未踏

DFT の次の一段が、実際に鳴っている音を解析してその場で絵を駆動する audio-reactive。マイクや音源を AudioContext に繋いで、AnalyserNode で毎フレーム getByteFrequencyData を読み、その配列で図形のサイズや明るさを動かす。スペクトルが放射状のメーターになったり、低音でシェイクしたり、という反応。

実際に鳴らす配線は先に置いて、getByteFrequencyData が返すのと同じ「周波数ビンの配列が毎フレーム更新される」形だけを先取りする。横を時間、縦を周波数ビン、明るさを各ビンの強さにして、毎フレーム一列ずつ左へ送ると、音が時間軸に流れるスペクトログラムになる。下はスペクトルを乱数でなく、ゆっくり動く三つの山（低・中・高の帯）で合成して、その配列を一列ずつ書き足している。

AnalyserNode.getByteFrequencyData は FFT の結果を 0..255 の整数配列で返す。各要素が一つの周波数ビンの瞬間的な強さで、fftSize の半分の本数だけ並ぶ。このビン配列を縦に積んで時間ごとに横へ送ると、横軸が時間・縦軸が周波数・濃淡がパワーのスペクトログラムになる。声紋やソナーの表示と同じ図で、定常的な倍音は横に伸びる線、打撃音は縦の筋として現れる。鳴らす配線が付くと、この合成スペクトルが実音のビン配列に差し替わるだけで絵の作りは変わらない。

const band = (bin, bins, center, width, level) => {
  const d = (bin - center * bins) / (width * bins)
  return Math.exp(-d * d) * level
}

const writeColumn = (spectro, col, bins, t) => {
  const lowC = 0.12 + Math.sin(t * 0.7) * 0.05
  const midC = 0.42 + Math.sin(t * 1.1 + 1) * 0.08
  const highC = 0.78 + Math.sin(t * 1.7 + 2) * 0.06
  const lowL = 0.85 + Math.sin(t * 0.9) * 0.15
  const midL = 0.7 + Math.sin(t * 1.4 + 2) * 0.3
  const highL = 0.55 + Math.sin(t * 2.3) * 0.3
  for (let b = 0; b < bins; b++) {
    const v =
      band(b, bins, lowC, 0.08, lowL) +
      band(b, bins, midC, 0.05, Math.max(0, midL)) +
      band(b, bins, highC, 0.04, Math.max(0, highL))
    spectro[col * bins + b] = v > 1 ? 1 : v
  }
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cols = 96
  const bins = 64
  const cellW = w / cols
  const cellH = h / bins
  const spectro = new Float32Array(cols * bins)
  let t = 0

// 全列をいったん埋めて、最初のフレームから幅いっぱいに流れているようにする
  for (let cx = 0; cx < cols; cx++) writeColumn(spectro, cx, bins, cx * 0.04)
  let head = 0

return () => {
    t += 0.04
    writeColumn(spectro, head, bins, t)
    head = (head + 1) % cols

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

for (let cx = 0; cx < cols; cx++) {
      const src = (head + cx) % cols
      const x = cx * cellW
      for (let b = 0; b < bins; b++) {
        const v = spectro[src * bins + b]
        if (v < 0.03) continue
        const y = h - (b + 1) * cellH
        c.fillStyle = colors.tint(238 - v * 230)
        c.fillRect(x, y, cellW + 1, cellH + 1)
      }
    }
  }
}

band がひとつの帯で、中心ビンからの距離をガウスで落として山にしている。三つの帯を足した一列を毎フレーム書いて、head を一つ進めるリングバッファで時間方向に送る。低い帯ほど太く明るく、高い帯ほど細く揺れが速い。山の中心 center を sin でゆっくり動かすと、横に伸びる明るい筋が上下にうねる。getByteFrequencyData の戻り値をそのまま spectro の一列に入れ替えれば、合成スペクトルが実音のスペクトログラムになり、低音でシェイク・スペクトルで放射メーターといった反応へ繋がる。