shigureni.dev

反応拡散 — 場が自分で育つ

反応拡散の場は二枚あって、互いの値を見ながら毎フレーム自分を書き換える。座標を入れたら即値が返る一枚関数ではなく、前のフレームの場が次のフレームの場の材料になる。時間は外から足す引数でなく、書き換えの繰り返しそのものから出てくる。

Gray-Scott 反応拡散は、二つの化学物質 A と B の濃度を格子の各セルで追う。A は外から一定率 feed で補充され、B は一定率 kill で抜かれる。反応 A + 2B → 3B で A が B に変わり、両方が拡散する。feed と kill のわずかな違いで、斑点・迷路・縞といった模様が定常状態として立つ。Turing が 1952 年に動物の体表模様の起源として論じた仕組みの一例。拡散・移流・反応というこの枠組みは、流体の Navier–Stokes 方程式と同じ形をしている。

場が二枚ある。a は A の濃度、b は B の濃度で、どちらも GW × GH のセルを一次元配列に詰めたもの。全面を A で満たし（a は 1）、B はいくつかの正方形の種だけ撒く（b を 1 に）。更新ルールはまだ入れず、B の濃度だけを明るさに塗る。

B の種が並んだまま動かない。場が二枚あるだけで更新ルールが入っていないので静止する。拡散だけを入れると、各セルの値が近傍の平均と自分の差ぶんだけ近傍へ寄る。この近傍の平均と自分の差がラプラシアン。DB がその強さで、B が四方へにじむ。

const GW = 96
const GH = 96
const DB = 0.18

const lap = (f, x, y, i, len) => {
  const xm = x > 0 ? i - 1 : i + GW - 1
  const xp = x < GW - 1 ? i + 1 : i - GW + 1
  const ym = y > 0 ? i - GW : i + len - GW
  const yp = y < GH - 1 ? i + GW : i - len + GW
  return (f[xm] + f[xp] + f[ym] + f[yp]) * 0.25 - f[i]
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cellW = w / GW
  const cellH = h / GH
  const len = GW * GH
  const b = new Float32Array(len)
  const b2 = new Float32Array(len)

for (let cy = 16; cy < GH; cy += 24) {
    for (let cx = 16; cx < GW; cx += 24) {
      for (let y = -4; y <= 4; y++) {
        for (let x = -4; x <= 4; x++) {
          b[(cy + y) * GW + (cx + x)] = 1
        }
      }
    }
  }

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

return () => {
    for (let y = 0; y < GH; y++) {
      for (let x = 0; x < GW; x++) {
        const i = y * GW + x
        const nb = b[i] + DB * lap(b, x, y, i, len)
        b2[i] = nb < 0 ? 0 : nb > 1 ? 1 : nb
      }
    }
    b.set(b2)

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)
    for (let y = 0; y < GH; y++) {
      for (let x = 0; x < GW; x++) {
        const v = b[y * GW + x]
        if (v < 0.04) continue
        c.fillStyle = colors.tint(Math.max(8, 238 - v * 700))
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

種の角が取れて丸くにじみ、中心の濃さが薄れて周りへ散る。b2 という二枚目に書いて b.set(b2) で入れ替えているのは、更新中に元の値を読み続けるため。書きながら同じ配列を読むと、計算済みの隣のセルが混ざってしまう。読みと書きを分けるのがダブルバッファ。x > 0 ? i - 1 : i + GW - 1 の三項は、左端のセルが反対の右端を隣として参照する繞り込みで、面が筒状に繋がる。

拡散だけだと B はただ薄まって消える。補充・除去・反応を足すと Gray-Scott になる。A の式に拡散 DA * lap(a)、反応で減る分 - A*B*B、補充 + feed*(1-A) を足す。B の式に拡散 DB * lap(b)、反応で増える分 + A*B*B、除去 - (kill+feed)*B を足す。両方の場を毎フレーム更新する。

const GW = 96
const GH = 96
const DA = 1.0
const DB = 0.5
const feed = 0.037
const kill = 0.06

const lap = (f, x, y, i, len) => {
  const xm = x > 0 ? i - 1 : i + GW - 1
  const xp = x < GW - 1 ? i + 1 : i - GW + 1
  const ym = y > 0 ? i - GW : i + len - GW
  const yp = y < GH - 1 ? i + GW : i - len + GW
  const dl = xm - GW < 0 ? xm + len - GW : xm - GW
  const dr = xp - GW < 0 ? xp + len - GW : xp - GW
  const ul = xm + GW >= len ? xm - len + GW : xm + GW
  const ur = xp + GW >= len ? xp - len + GW : xp + GW
  return (f[xm] + f[xp] + f[ym] + f[yp]) * 0.2 + (f[dl] + f[dr] + f[ul] + f[ur]) * 0.05 - f[i]
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cellW = w / GW
  const cellH = h / GH
  const len = GW * GH
  const a = new Float32Array(len)
  const b = new Float32Array(len)
  const a2 = new Float32Array(len)
  const b2 = new Float32Array(len)

for (let i = 0; i < len; i++) a[i] = 1

for (let cy = 16; cy < GH; cy += 24) {
    for (let cx = 16; cx < GW; cx += 24) {
      for (let y = -3; y <= 3; y++) {
        for (let x = -3; x <= 3; x++) {
          b[(cy + y) * GW + (cx + x)] = 1
        }
      }
    }
  }

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

return () => {
    for (let k = 0; k < 8; k++) step()

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)
    for (let y = 0; y < GH; y++) {
      for (let x = 0; x < GW; x++) {
        const v = b[y * GW + x]
        if (v < 0.08) continue
        c.fillStyle = colors.tint(238 - v * 230)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

種が増殖して分裂し、迷路のように伸びていく。一フレームに step を 8 回回しているのは、一回の更新の変化が小さく、模様が育つまで時間がかかるため。feed を 0.037、kill を 0.06 あたりから少し動かすと模様が変わる。feed を上げて 0.055、kill を 0.062 にすると斑点が分裂を続け、feed を 0.026、kill を 0.051 にすると線が太く繋がって珊瑚状になる。座標と値を結ぶ一枚関数と違って、場が状態を持ち、局所の書き換えだけで全体の模様が立つ。