shigureni.dev

ノイズの色

規則のない波がノイズ。といっても全部が同じザラザラではない。隣り合うサンプルの相関の度合いでノイズに「色」がつく。白ノイズは各サンプルが前と無関係に独立に決まる。横軸を時間にして毎フレーム右端に新しい乱数を一個足し、左へ送ると、上下に激しく暴れる線になる。

ノイズの色は周波数スペクトルの傾きで決まる。白ノイズは全周波数を一様に含む（スペクトルが平ら）。各サンプルが独立なので、高い成分も低い成分も同じだけ立つ。光の白が全波長を均等に含むことになぞらえたラベル。

新しいサンプルが前の値を全く参照しないので、線は隣どうしで噛み合わず尖って震える。この白ノイズの乱数を積分する、前の値に毎回足し込むと、別の色になる。walk += r で乱数を溜めていくと、値が急には飛ばず、ゆったりうねる線に変わる。ブラウンノイズで、上の白と並べると振る舞いの違いが出る。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cols = Math.floor(w / 2)
  const white = new Float32Array(cols)
  const brown = new Float32Array(cols)
  const dx = w / (cols - 1)
  let walk = 0

const next = () => {
    const r = Math.random() * 2 - 1
    walk += r * 0.35
    walk *= 0.985
    if (walk > 1) walk = 1
    if (walk < -1) walk = -1
    return r
  }

for (let i = 0; i < cols; i++) {
    white[i] = next()
    brown[i] = walk
  }

return () => {
    for (let i = 0; i < cols - 1; i++) {
      white[i] = white[i + 1]
      brown[i] = brown[i + 1]
    }
    white[cols - 1] = next()
    brown[cols - 1] = walk

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

const topY = h * 0.28
    const botY = h * 0.72
    c.strokeStyle = colors.tintAlpha(0, 0.1)
    c.beginPath()
    c.moveTo(0, topY)
    c.lineTo(w, topY)
    c.moveTo(0, botY)
    c.lineTo(w, botY)
    c.stroke()

c.strokeStyle = colors.tint(120)
    c.lineWidth = 1.2
    c.beginPath()
    for (let i = 0; i < cols; i++) {
      const py = topY - white[i] * h * 0.2
      if (i === 0) c.moveTo(0, py)
      else c.lineTo(i * dx, py)
    }
    c.stroke()

c.strokeStyle = colors.tint(28)
    c.lineWidth = 1.6
    c.beginPath()
    for (let i = 0; i < cols; i++) {
      const py = botY - brown[i] * h * 0.2
      if (i === 0) c.moveTo(0, py)
      else c.lineTo(i * dx, py)
    }
    c.stroke()
  }
}

上の薄い線が同じ乱数列の白ノイズ、下の濃い線がそれを積分したブラウン。白は毎サンプル全力で暴れ、ブラウンは乱数を溜め込むぶん大きな起伏だけが残って低い成分が強くなる。walk *= 0.985 の減衰は値が画面外へ流れ去らないよう引き戻すためで、外すと線が天井と床へ張り付く。

ブラウンノイズは白ノイズを積分した信号で、ブラウン運動（ランダムウォーク）と同じ数学。スペクトルは 1/f² で、周波数が倍になるごとにパワーが 1/4 に落ちる。白とブラウンの中間が 1/f のスペクトルを持つピンクノイズ。周波数が倍になるごとにパワーが半分になり、どのオクターブ帯も同じだけパワーを持つ。滝や風など自然界の音に多く、視覚の fBm と同じ周波数構造になっている。

ピンクノイズはオクターブを重ねて近似できる。周波数を倍にした正弦波を、振幅を半分ずつにしながら何本も足す。amp *= 0.5 で振幅を、speed で周波数を一段ごとに倍にする。各オクターブ帯のパワーが揃って 1/f に近い波になる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cols = Math.floor(w / 2)
  const buf = new Float32Array(cols)
  const dx = w / (cols - 1)
  const octaves = 7
  const phase = Array.from({ length: octaves }, (_unused, i) => i * 7.3)
  const speed = Array.from({ length: octaves }, (_unused, i) => 0.05 * 2 ** i)

const pink = () => {
    let sum = 0
    let amp = 1
    let ampSum = 0
    for (let i = 0; i < octaves; i++) {
      sum += Math.sin(phase[i]) * amp
      ampSum += amp
      amp *= 0.5
      phase[i] += speed[i]
    }
    return sum / ampSum
  }

for (let i = 0; i < cols; i++) buf[i] = pink()

return () => {
    for (let i = 0; i < cols - 1; i++) buf[i] = buf[i + 1]
    buf[cols - 1] = pink()

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)
    c.strokeStyle = colors.tintAlpha(0, 0.1)
    c.beginPath()
    c.moveTo(0, h / 2)
    c.lineTo(w, h / 2)
    c.stroke()

c.strokeStyle = colors.tint(28)
    c.lineWidth = 1.6
    c.beginPath()
    for (let i = 0; i < cols; i++) {
      const py = h / 2 - buf[i] * h * 0.42
      if (i === 0) c.moveTo(0, py)
      else c.lineTo(i * dx, py)
    }
    c.stroke()
  }
}

大きなうねりの上に細かい震えが乗った線になる。低いオクターブが骨格を作り、高いオクターブが上のざらつきを足す。octaves を 1 にすると一番低い正弦波だけが残ってのっぺりしたうねりになり、本数を増やすほど高い成分が細部に乗る。amp *= 0.5 の係数を上げると高い成分が強まって白ノイズへ近づき、下げるとブラウン寄りのうねりになる。振幅を半分ずつにしながら倍率の違う波を足す手順は、空間を塗る fBm と同じ。同じオクターブ加算が、平面の濃淡では雲になり、一次元の信号ではノイズの色になる。