shigureni.dev

ノイズはひとつ — 音と絵をまたぐ

1次元の音のノイズと2次元の視覚ノイズは、別物に見えて同じ作りをしている。乱数をオクターブで重ねて低周波を強くする手も、近い場所どうしを相関させて滑らかにする手も、波形の1次元でも場の2次元でも同じ式が動く。

ノイズの正体はパワースペクトルの形。横軸を1次元の時間で取ろうと2次元の空間で取ろうと、「どの周波数がどれだけ強いか」という分布がノイズの色を決める。2次元のなめらかな乱数場（value/Perlin ノイズや fBm）を1本の直線で切ると、切り口は1次元の信号になり、低周波が強い 1/f 系のゆらぎが出る。音のピンクノイズと同じスペクトルの傾き。次元は走査の仕方が違うだけで、根の分布は地続き。

2次元の場を fbm(x, y) で全面に塗り、その中の一行を選んで gx だけ動かしながら fbm(x, 固定の y) を読むと、面の一本の切り口が1次元の波形になる。下は走査線を場の上で上下に動かし、その行の値を上の帯に折れ線で抜き出している。

const hash = (x, y) => {
  const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453
  return s - Math.floor(s)
}

const smooth = (t) => t * t * (3 - 2 * t)

const valueNoise = (x, y) => {
  const x0 = Math.floor(x)
  const y0 = Math.floor(y)
  const fx = smooth(x - x0)
  const fy = smooth(y - y0)
  const a = hash(x0, y0)
  const b = hash(x0 + 1, y0)
  const cc = hash(x0, y0 + 1)
  const d = hash(x0 + 1, y0 + 1)
  const top = a + (b - a) * fx
  const bot = cc + (d - cc) * fx
  return top + (bot - top) * fy
}

const fbm = (x, y) => {
  let sum = 0
  let amp = 0.5
  let freq = 1
  for (let i = 0; i < 5; i++) {
    sum += valueNoise(x * freq, y * freq) * amp
    freq *= 2
    amp *= 0.5
  }
  return sum
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const nx = 110
  const ny = 88
  const cellW = w / nx
  const cellH = h / ny
  const scaleX = 6
  const scaleY = 6
  let scan = 0

return () => {
    scan += 0.004
    const rowY = Math.round((Math.sin(scan) * 0.5 + 0.5) * (ny - 1))

for (let gy = 0; gy < ny; gy++) {
      for (let gx = 0; gx < nx; gx++) {
        const v = fbm((gx / nx) * scaleX, (gy / ny) * scaleY)
        const vv = v < 0 ? 0 : v > 1 ? 1 : v
        const tone = gy === rowY ? 238 - vv * 100 : 28 + vv * 200
        c.fillStyle = colors.tint(tone)
        c.fillRect(gx * cellW, gy * cellH, cellW + 1, cellH + 1)
      }
    }

const stripH = h * 0.26
    c.fillStyle = colors.tintAlpha(238, 0.82)
    c.fillRect(0, 0, w, stripH)

c.strokeStyle = colors.tint(20)
    c.lineWidth = 2
    c.beginPath()
    for (let gx = 0; gx < nx; gx++) {
      const v = fbm((gx / nx) * scaleX, (rowY / ny) * scaleY)
      const vv = v < 0 ? 0 : v > 1 ? 1 : v
      const x = (gx / (nx - 1)) * w
      const y = stripH * 0.5 + (vv - 0.5) * stripH * 0.8
      if (gx === 0) c.moveTo(x, y)
      else c.lineTo(x, y)
    }
    c.stroke()
  }
}

走査線が場の尾根を横切ると帯の波形が高く盛り上がり、谷を横切ると沈む。同じ fbm を2次元の塗りと1次元の折れ線が共有していて、面の濃淡と波のうねりは一つの関数の別々の読み方になる。場のスケール scaleX を上げると切り口が細かく震え、下げると大きくうねる。波形のスペクトルが低周波に傾くのは、fbm のオクターブ加算で振幅を半分ずつ減衰させているため。

距離で胞を作る Worley も、点をランダムに撒く点過程という同じ乱数の景色の一部で、最も近い種点までの距離を場の値にすると細胞状の模様が立つ。

seed を固定すれば、メロディも模様も同じ一枚を呼び戻せる。Math.random を mulberry32(seed)() に差し替えるだけで、ここまでの波形・分布・リズムがすべて再現可能になる。ここまでは音を鳴らさず絵で見てきたが、実際に音を出してスペクトルを FFT で覗くと、波形の色やゆらぎの傾きを耳で確かめられる。