shigureni.dev

膜が震えると、節ができる

1次元の波を2次元の膜に広げると、特定の周波数で膜全体が決まった模様で震える（固有モード）。震えていない線が節線で、そこに撒いた砂が集まると対称な図形が浮かぶ。Chladni 図形、実在の物理現象。

正方形の膜のモードは二つの整数 a, b で選ぶ。各点 (nx, ny)（0〜1 に正規化した座標）での膜の高さは sin(a·π·nx)·sin(b·π·ny) - sin(b·π·nx)·sin(a·π·ny) で出る。a と b を入れ替えた二項の差なので、対角線に対して対称な模様になる。

固定した縁を持つ正方形の膜の固有振動は sin(a·π·x)·sin(b·π·y)（a, b は整数）で表せる。同じ周波数を持つ (a, b) と (b, a) は重ね合わせが自由で、差を取った sin(a·π·x)·sin(b·π·y) − sin(b·π·x)·sin(a·π·y) も同じ固有値の振動になる。この和が 0 になる点の集合が節線で、Chladni がバイオリンの弓で板を擦って可視化した。周波数（モード番号）が、そのまま2次元の幾何模様を決める。

膜の高さの絶対値を明るさに写すと、震えている所が明るく、節線が暗く出る。a, b を時間でゆっくり動かすと、節線の模様が連続して切り替わる。

明るい領域のあいだを縫う暗い線が節線。a, b が整数に近いところで線がきれいな格子になり、外れると崩れる。砂を撒く代わりに、いまは振幅をそのまま濃淡で見せている。

撒いた点を、その点の足元の振幅に応じて揺らす。振幅が大きい所では大きく弾かれ、節線（振幅 0）の近くではほとんど動かない。揺れの幅 jitter を振幅に比例させて毎フレーム点をランダムに動かすと、点が振幅の小さい所へ少しずつ集まる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const count = Math.round((w * h) / 90)
  let t = 0

const mode = (nx, ny, a, b) =>
    Math.sin(a * Math.PI * nx) * Math.sin(b * Math.PI * ny) -
    Math.sin(b * Math.PI * nx) * Math.sin(a * Math.PI * ny)

const particles = Array.from({ length: count }, () => ({
    x: Math.random() * w,
    y: Math.random() * h,
  }))

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

return () => {
    t += 0.004
    const a = 4 + Math.sin(t) * 2
    const b = 6 + Math.cos(t * 0.8) * 2

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

for (const p of particles) {
      const amp = Math.abs(mode(p.x / w, p.y / h, a, b))
      const jitter = 0.4 + amp * 7
      p.x += (Math.random() - 0.5) * jitter
      p.y += (Math.random() - 0.5) * jitter
      if (p.x < 0) p.x = 0
      else if (p.x >= w) p.x = w - 1
      if (p.y < 0) p.y = 0
      else if (p.y >= h) p.y = h - 1
      c.fillRect(p.x, p.y, 1, 1)
    }
  }
}

ばらまかれた点が節線へ寄って、振幅の濃淡で見えていた模様が砂の線として立つ。a, b が動くとモードが切り替わり、点が散らばってから別の節線へ集まり直す。jitter の係数 7 を下げると点が動きにくく線が太く残り、上げると弾かれる範囲が広がって線が細く締まる。揺れの強さを振幅に結びつけるだけで、定在波の幾何が粒子の分布として現れる。