shigureni.dev

ノイズを濾す — Karplus-Strong

倍音を組み上げる代わりに、ノイズ（でたらめな値）を種にして、それを少しずつ均していくと弦の音になる。短い配列に -1〜1 の乱数を詰めて、それを一周ぶんの波形として読む。下は長さ 96 の配列を乱数で埋めて折れ線にしただけ。中央線（無音）の上下に、隣り合う値が無関係にばらつく。

この配列を、隣どうしを平均しながら一周ずつ回す。位置 i の値を (buf[i] + buf[i+1]) / 2 で書き戻すと、その点が両隣となだらかに繋がる。decay を少し掛けて全体を弱めながら、毎フレーム数サンプルぶん進める。下は同じ乱数から始めて、回すたびに角が取れていく。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const N = 96
  const mid = h / 2
  const amp = h * 0.42
  const dx = w / N
  const blend = 0.5
  const decay = 0.996
  const buf = new Float32Array(N)
  let phase = 0
  let frame = 0

const pluck = () => {
    for (let i = 0; i < N; i++) buf[i] = Math.random() * 2 - 1
    phase = 0
  }
  pluck()

return () => {
    frame++
    if (frame % 200 === 0) pluck()

for (let s = 0; s < 4; s++) {
      const i = phase % N
      const j = (phase + 1) % N
      buf[i] = (buf[i] + buf[j]) * blend * decay
      phase = (phase + 1) % N
    }

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

c.strokeStyle = colors.tintAlpha(120, 0.3)
    c.lineWidth = 1
    c.beginPath()
    c.moveTo(0, mid)
    c.lineTo(w, mid)
    c.stroke()

c.strokeStyle = colors.ink
    c.lineWidth = 1.4
    c.beginPath()
    for (let k = 0; k <= N; k++) {
      const v = buf[k % N]
      const x = k * dx
      const y = mid - v * amp
      if (k === 0) c.moveTo(x, y)
      else c.lineTo(x, y)
    }
    c.stroke()

c.fillStyle = colors.tintAlpha(28, 0.5)
    for (let k = 0; k < N; k++) {
      const v = buf[k]
      const x = k * dx
      const y = mid - v * amp
      c.fillRect(x - 1, y - 1, 2, 2)
    }
  }
}

ザラついた乱数が、回すうちに山の数が減って、ひとつの滑らかな波に落ち着く。blend * decay を掛けるたびに振幅が縮むので、波は痩せながら定常状態へ向かう。frame % 200 で乱数を詰め直すと、また角の立った波形からやり直す。平均が隣どうしを引き寄せ、高い成分（細かい上下動）を毎周削っていく。

Karplus-Strong は遅延線（リングバッファ）にノイズを詰め、一周ごとに隣り合う 2 サンプルの平均で書き戻す。平均は最も素朴なローパス（高周波を削るフィルタ）で、バッファ一周ぶんの遅延がそのまま基本周波数を決める。サンプリング周波数 fs と長さ N のバッファで、ピッチは fs / N。Kevin Karplus と Alexander Strong が 1983 年に発表した撥弦・打楽器の物理モデリングの最小形で、励起（ノイズ）と共鳴（遅延＋減衰フィードバック）の二段でできている。

バッファの長さがピッチを決める。短い配列は速く一周するので高い音、長い配列はゆっくり回って低い音になる。下は長さ 40・80・140 の三本を同じ乱数から同時に走らせた。上ほど短くて、波の山が密に詰まる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const rows = 3
  const lengths = [40, 80, 140]
  const blend = 0.5
  const decay = 0.996

const states = lengths.map((N) => {
    const buf = new Float32Array(N)
    for (let i = 0; i < N; i++) buf[i] = Math.random() * 2 - 1
    return { N: N, buf: buf, phase: 0 }
  })

let frame = 0

return () => {
    frame++
    if (frame % 220 === 0) {
      for (const st of states) {
        for (let i = 0; i < st.N; i++) st.buf[i] = Math.random() * 2 - 1
        st.phase = 0
      }
    }

for (const st of states) {
      for (let s = 0; s < 4; s++) {
        const i = st.phase % st.N
        const j = (st.phase + 1) % st.N
        st.buf[i] = (st.buf[i] + st.buf[j]) * blend * decay
        st.phase = (st.phase + 1) % st.N
      }
    }

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

const rowH = h / rows
    for (let r = 0; r < rows; r++) {
      const st = states[r]
      const mid = rowH * (r + 0.5)
      const amp = rowH * 0.4
      const dx = w / st.N

c.strokeStyle = colors.tintAlpha(120, 0.3)
      c.lineWidth = 1
      c.beginPath()
      c.moveTo(0, mid)
      c.lineTo(w, mid)
      c.stroke()

const luma = Math.round(28 + (r / (rows - 1)) * 90)
      c.strokeStyle = colors.tint(luma)
      c.lineWidth = 1.4
      c.beginPath()
      for (let k = 0; k <= st.N; k++) {
        const v = st.buf[k % st.N]
        const x = k * dx
        const y = mid - v * amp
        if (k === 0) c.moveTo(x, y)
        else c.lineTo(x, y)
      }
      c.stroke()
    }
  }
}

三本とも乱数から同じ平均で均されるのに、短いバッファほど早く滑らかな波に落ち着き、波の周期も短い。バッファの長さを変えるだけでピッチが動く。ノイズが種で、バッファの長さが音の高さを、平均の繰り返しが音色を決めている。この「平均で角を取る」操作は、画像をローパスでぼかすのと同じ計算になる。