shigureni.dev

乱数を時間に積む — ブラウンノイズ

乱数をそのまま打つのでなく、前の値に足し込む。x += (random - 0.5)。一歩ごとの向きはランダムでも、足し続けるので値はゆっくり漂う。一様乱数を一粒ずつ打つのとは別物で、隣の点が前の点を覚えている。

乱数を逐次に足し込むのは、時間方向の積分にあたる。各サンプルが独立な白色ノイズを積分すると、近い時刻どうしが強く相関した信号になり、スペクトルは低音側に 1/f² の坂で傾く。聞くと滝の遠鳴りのようにこもる音、ブラウンノイズ（茶色のノイズ）。1次元の酔歩（ランダムウォーク）とまったく同じ数学。発見者ロバート・ブラウンが顕微鏡で見た花粉の不規則な運動、ブラウン運動から名がついている。

上の線が一様乱数を一粒ずつ打ったもので、各点が独立なので毎サンプルてっぺんと底を行き来してとげとげに潰れる。下の線がその乱数を前の値に積んだブラウンノイズで、近い時刻どうしが結びついてなめらかに上下にうねる。同じ Math.random() を、独立に置くか、積むかの違いだけ。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cols = Math.round(w / 3)

const whiteBuf = new Float32Array(cols)
  const brownBuf = new Float32Array(cols)
  let brown = 0
  for (let i = 0; i < cols; i++) {
    whiteBuf[i] = Math.random() - 0.5
    brown += (Math.random() - 0.5) * 0.5 // 前の値に積む
    brownBuf[i] = brown
  }

const dx = w / (cols - 1)
  let phase = 0

return () => {
    phase += 0.6
    const shift = Math.floor(phase)
    if (shift >= 1) {
      phase -= shift
      for (let s = 0; s < shift; s++) {
        for (let i = 0; i < cols - 1; i++) {
          whiteBuf[i] = whiteBuf[i + 1]
          brownBuf[i] = brownBuf[i + 1]
        }
        whiteBuf[cols - 1] = Math.random() - 0.5
        brown += (Math.random() - 0.5) * 0.5
        brownBuf[cols - 1] = brown
      }
    }

let lo = 1e9
    let hi = -1e9
    for (let i = 0; i < cols; i++) {
      if (brownBuf[i] < lo) lo = brownBuf[i]
      if (brownBuf[i] > hi) hi = brownBuf[i]
    }
    const span = Math.max(1, hi - lo)

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

c.strokeStyle = colors.tint(18)
    c.lineWidth = 1.2
    c.beginPath()
    for (let i = 0; i < cols; i++) {
      const y = h * 0.26 + whiteBuf[i] * h * 0.42
      if (i === 0) c.moveTo(0, y)
      else c.lineTo(i * dx, y)
    }
    c.stroke()

c.strokeStyle = colors.tint(70)
    c.lineWidth = 1.6
    c.beginPath()
    for (let i = 0; i < cols; i++) {
      const norm = (brownBuf[i] - lo) / span // 0..1 に収める
      const y = h * 0.62 + (norm - 0.5) * h * 0.66
      if (i === 0) c.moveTo(0, y)
      else c.lineTo(i * dx, y)
    }
    c.stroke()
  }
}

積分すると、近い時刻が強く結びついて低い周波数ばかりが残る。放っておくと値がどこまでも漂って画面外へ出てしまう。端へ寄ったぶんだけ中心へ引き戻す力を足すと、漂いを保ったまま枠の中に留まる。酔歩を箱の中で跳ね返すのと同じ手当て。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cols = Math.round(w / 3)

const freeBuf = new Float32Array(cols) // 引き戻しなし
  const heldBuf = new Float32Array(cols) // 中心へ引き戻す
  let free = 0
  let held = 0
  const limit = h * 0.32

const advance = () => {
    free += (Math.random() - 0.5) * 7
    held += (Math.random() - 0.5) * 7
    if (held > limit) held -= (held - limit) * 0.1 // 上の壁から戻す
    if (held < -limit) held -= (held + limit) * 0.1 // 下の壁から戻す
  }

for (let i = 0; i < cols; i++) {
    advance()
    freeBuf[i] = free
    heldBuf[i] = held
  }

const dx = w / (cols - 1)
  const baseFree = h * 0.5
  const baseHeld = h * 0.5
  let phase = 0

return () => {
    phase += 0.6
    const shift = Math.floor(phase)
    if (shift >= 1) {
      phase -= shift
      for (let s = 0; s < shift; s++) {
        for (let i = 0; i < cols - 1; i++) {
          freeBuf[i] = freeBuf[i + 1]
          heldBuf[i] = heldBuf[i + 1]
        }
        advance()
        freeBuf[cols - 1] = free
        heldBuf[cols - 1] = held
      }
    }

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

// 引き戻しの壁を薄い線で
    c.fillStyle = colors.tintAlpha(58, 0.22)
    c.fillRect(0, baseHeld - limit, w, 1)
    c.fillRect(0, baseHeld + limit, w, 1)

// 引き戻しなし: 端へ漂って枠から逃げる
    c.strokeStyle = colors.tint(140)
    c.lineWidth = 1.2
    c.beginPath()
    for (let i = 0; i < cols; i++) {
      const y = baseFree + freeBuf[i]
      if (i === 0) c.moveTo(0, y)
      else c.lineTo(i * dx, y)
    }
    c.stroke()

// 引き戻しあり: 漂いを保ったまま壁の中に留まる
    c.strokeStyle = colors.tint(28)
    c.lineWidth = 1.8
    c.beginPath()
    for (let i = 0; i < cols; i++) {
      const y = baseHeld + heldBuf[i]
      if (i === 0) c.moveTo(0, y)
      else c.lineTo(i * dx, y)
    }
    c.stroke()
  }
}

薄い横線が引き戻しの壁。明るい線は引き戻しなしで、積み続けるうちに壁を越えて画面の上下へ逃げていく。暗い線は壁に近づくたびに (held - limit) * 0.1 だけ中心へ押し戻されるので、うねりの質はそのままに枠の中で漂い続ける。乱数を積むだけで、砂嵐がうねりに変わる。