shigureni.dev

水で削る — 侵食

ノイズや中点変位で起こした地形は、どこも均一にざらついている。実際の地形は水が削った跡で表情が決まる。水滴を高い所に落として、傾きに沿って転がし、勢いがあるうちは土を削って運び、勢いが落ちたら積もらせる。これを何万滴とくり返すと、谷が刻まれて尾根が立つ。

水滴侵食（hydraulic erosion）は、地形を高さ場 h(x, y) として持ち、その勾配を下る水滴を多数走らせる。各水滴は運べる土の量に上限（capacity）を持ち、上限は流速と水量で決まる。運んでいる量が上限より少なければ地形を削って積み（erode）、上限を超えたら吐き出して埋める（deposit）。一滴ごとの局所的な収支だけで、樹状に枝分かれする谷筋が定常状態として立つ。Musgrave らが 1989 年に提案した手法系統の簡易版。

削る相手の地形を先に置く。fbm で sin/cos を周波数を倍に振幅を半分にしながら四枚重ね、0〜1.2 に寄せて高さ場 h に詰める。明るいほど高い。N×N の格子を一次元配列に詰め、表示は横 w 縦 h の全面を矩形セルで埋める。

なだらかな起伏が並ぶ。尾根も谷もなく、どの斜面も同じざらつきで、水が通った跡がない。次に水滴を一粒落として、この上を転がす。各点で高さの勾配を測り、その逆向き（下り坂）へ速度を足す。速度は前のフレームから 0.85 倍に減衰させて引き継ぐので、勢いが慣性として残る。一粒の通り道を線で引くと、地形のいちばん低い方へ吸い込まれていく筋になる。

const N = 96

const fbm = (x, y) => {
  let v = 0
  let amp = 1
  let freq = 0.04
  for (let octave = 0; octave < 4; octave++) {
    v += amp * Math.sin(x * freq) * Math.cos(y * freq + octave)
    amp *= 0.55
    freq *= 2.1
  }
  return v
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cellW = w / N
  const cellH = h / N
  const height = new Float32Array(N * N)

for (let gy = 0; gy < N; gy++) {
    for (let gx = 0; gx < N; gx++) {
      height[gy * N + gx] = Math.min(1.2, Math.max(0, (fbm(gx, gy) + 2) * 0.25))
    }
  }

const grad = (x, y) => {
    const xi = Math.min(N - 2, Math.max(0, Math.floor(x)))
    const yi = Math.min(N - 2, Math.max(0, Math.floor(y)))
    const base = height[yi * N + xi]
    return { gx: height[yi * N + xi + 1] - base, gy: height[(yi + 1) * N + xi] - base }
  }

let px = N * 0.3
  let py = N * 0.2
  let vx = 0
  let vy = 0
  let step = 0

return () => {
    if (step === 0) {
      for (let gy = 0; gy < N; gy++) {
        for (let gx = 0; gx < N; gx++) {
          const e = height[gy * N + gx]
          c.fillStyle = colors.tint(8 + Math.min(1, e * 0.9 + 0.05) * 220)
          c.fillRect(gx * cellW, gy * cellH, cellW + 1, cellH + 1)
        }
      }
      c.strokeStyle = colors.tint(20)
      c.lineWidth = 2
      c.beginPath()
      c.moveTo(px * cellW, py * cellH)
    }

if (step < 60) {
      const g = grad(px, py)
      vx = vx * 0.85 - g.gx
      vy = vy * 0.85 - g.gy
      const len = Math.sqrt(vx * vx + vy * vy) + 0.0001
      px += vx / len
      py += vy / len
      if (px > 0 && px < N - 1 && py > 0 && py < N - 1) {
        c.lineTo(px * cellW, py * cellH)
        c.stroke()
        c.beginPath()
        c.moveTo(px * cellW, py * cellH)
      }
    }

step++
    if (step > 90) {
      step = 0
      px = (0.15 + Math.random() * 0.7) * N
      py = (0.1 + Math.random() * 0.3) * N
      vx = 0
      vy = 0
    }
  }
}

水滴が斜面を下って谷底へ落ち、新しい一粒がまた別の所から流れ落ちる。vx * 0.85 - g.gx の 0.85 が慣性で、勾配の向きが変わってもすぐには折れず、緩いカーブを描いて下りる。この一粒が通り道で土を削れば、何万滴ぶんの跡が谷を刻む。削る量は capacity との収支で決める。下り坂が急で水量が多いほど capacity が大きく、運んでいる量がそれを下回るぶんだけ地形を削って自分に積む。坂が緩んで capacity が落ちると、抱えた土を吐き出して埋める。フレームごとに 130 滴を流し、削れた地形を傾きで陰影づけして塗る。

const N = 96

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cellW = w / N
  const cellH = h / N
  const height = new Float32Array(N * N)
  const base = new Float32Array(N * N)

for (let gy = 0; gy < N; gy++) {
    for (let gx = 0; gx < N; gx++) {
      const b = Math.min(1.2, Math.max(0, (fbm(gx, gy) + 2) * 0.25))
      base[gy * N + gx] = b
      height[gy * N + gx] = b
    }
  }

const cellAt = (x, y) => {
    const xi = Math.min(N - 1, Math.max(0, Math.floor(x)))
    const yi = Math.min(N - 1, Math.max(0, Math.floor(y)))
    return yi * N + xi
  }

const grad = (x, y) => {
    const xi = Math.min(N - 2, Math.max(0, Math.floor(x)))
    const yi = Math.min(N - 2, Math.max(0, Math.floor(y)))
    const at = height[yi * N + xi]
    return { gx: height[yi * N + xi + 1] - at, gy: height[(yi + 1) * N + xi] - at }
  }

const drop = () => {
    let px = Math.random() * (N - 1)
    let py = Math.random() * (N - 1)
    let vx = 0
    let vy = 0
    let sediment = 0
    let water = 1
    for (let s = 0; s < 48; s++) {
      const g = grad(px, py)
      vx = vx * 0.85 - g.gx
      vy = vy * 0.85 - g.gy
      const len = Math.sqrt(vx * vx + vy * vy) + 0.0001
      const from = cellAt(px, py)
      px += vx / len
      py += vy / len
      if (px < 0 || px >= N - 1 || py < 0 || py >= N - 1) break
      const dh = height[cellAt(px, py)] - height[from]
      const cap = Math.max(0.001, -dh) * water * 4
      let next = height[from]
      if (sediment > cap || dh > 0) {
        const deposit = dh > 0 ? Math.min(dh, sediment) : (sediment - cap) * 0.3
        next += deposit
        sediment -= deposit
      } else {
        const erode = Math.min((cap - sediment) * 0.3, 0.05)
        next -= erode
        sediment += erode
      }
      height[from] = Math.min(1.2, Math.max(0, next))
      water *= 0.98
    }
  }

return () => {
    for (let i = 0; i < 130; i++) drop()

for (let gy = 0; gy < N; gy++) {
      for (let gx = 0; gx < N; gx++) {
        const i = gy * N + gx
        const e = height[i]
        const sx = gx < N - 1 ? height[i + 1] - e : 0
        const sy = gy < N - 1 ? height[i + N] - e : 0
        const slope = Math.min(1, Math.sqrt(sx * sx + sy * sy) * 6)
        const v = Math.min(1, Math.max(0, e * 0.9 + 0.05)) * (1 - slope * 0.7)
        c.fillStyle = colors.tint(8 + v * 220)
        c.fillRect(gx * cellW, gy * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

滴を重ねるほど谷が深く刻まれ、急な斜面が傾きの陰影で暗く落ちて尾根が浮く。cap = -dh * water * 4 が capacity で、dh が負（下り坂）のとき正の値になり、急で水量 water が多いほど大きい。運んでいる sediment が cap を下回れば土を削って sediment に足し、上回るか上り坂（dh > 0）に当たれば吐き出して地形に積む。water *= 0.98 で一滴ごとに水が減るので、終盤は capacity が落ちて土を置きやすくなる。for (let s = 0; s < 48; s++) の寿命を延ばすと一滴が長く走って谷が伸び、drop の本数を増やすと収束が速まる。均一にざらついていた地形が、水を流したぶんだけ「どこかにありそう」な起伏に寄っていく。