shigureni.dev

中点変位 — もう一つの地形

ノイズと別ルートで地形を起こす自己相似な手続きがある。正方形の四隅に高さを置いて、その中点を四隅の平均と乱数で埋める。次に菱形の中点を、周りの平均と乱数で埋める。段を下りるたびに足す乱数の振幅を減らすと、大きな起伏の上に小さな凹凸が乗ったフラクタルな地形になる。

中点変位（diamond-square）は Fournier・Fussell・Carpenter が 1982 年に発表した地形生成手続き。2ⁿ + 1 の格子の四隅を初期化し、diamond ステップ（正方形の四隅の平均で中心を埋める）と square ステップ（菱形の四点の平均で辺の中点を埋める）を交互に半分の刻みで繰り返す。各段で足す乱数の振幅を H 乗で減衰させ、この H（Hurst 指数）が地形の粗さを決める。座標を入れたら値が返るノイズと違い、盤面を再帰的に埋めていく。

四隅にランダムな高さを置き、刻み step を半分にしながら中点を埋める。diamond ステップは正方形の四隅、square ステップは菱形の四点を平均し、amp の幅の乱数を足す。amp は一段ごとに 0.55 倍に弱める。粗い N = 9 で、段が下りるほど中点が細かく刻まれていく様子を出す。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const N = 9
  const cellW = w / (N - 1)
  const cellH = h / (N - 1)
  let revealStep = N - 1
  let hold = 0

const at = (height, x, y) => height[y * N + x]

return () => {
    hold += 1
    if (hold > 40) {
      hold = 0
      revealStep = revealStep > 1 ? revealStep >> 1 : N - 1
    }
    const grid = build(revealStep)

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

for (let y = 0; y < N - 1; y++) {
      for (let x = 0; x < N - 1; x++) {
        if (!grid.filled[y * N + x] || !grid.filled[(y + 1) * N + (x + 1)]) continue
        const v = (grid.height[y * N + x] + grid.height[(y + 1) * N + (x + 1)]) * 0.5
        const vv = v < 0 ? 0 : v > 1 ? 1 : v
        c.fillStyle = colors.tint(8 + vv * 220)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }

c.fillStyle = colors.tint(20)
    for (let y = 0; y < N; y++) {
      for (let x = 0; x < N; x++) {
        if (!grid.filled[y * N + x]) continue
        c.fillRect(x * cellW - 2, y * cellH - 2, 4, 4)
      }
    }
  }
}

四隅だけ埋まった状態から、段が一つ下りるたびに中点が割り込んで点が倍に増えていく。step >= upto で途中の段まで止めているので、刻みが粗いと大きな起伏だけ、細かいと凹凸が乗る。点が出揃ったところでまた四隅に戻る。

刻みを最後まで下ろすと全格子が埋まり、なめらかな高さ場になる。乱数の振幅を H 乗で減衰させながら段を重ねた結果で、N = 65（2⁶ + 1）まで細かくして高さをそのまま明るさに写す。地形が一定間隔で生え替わるように、別の盤面を作って交差させている。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const N = 65
  const cellW = w / (N - 1)
  const cellH = h / (N - 1)
  let cur = buildField(N)
  let next = buildField(N)
  let mix = 0
  let hold = 0

return () => {
    if (mix < 1) {
      mix += 0.02
    } else {
      hold += 1
      if (hold > 30) {
        hold = 0
        cur = next
        next = buildField(N)
        mix = 0
      }
    }
    const e = mix * mix * (3 - 2 * mix)

for (let y = 0; y < N - 1; y++) {
      for (let x = 0; x < N - 1; x++) {
        const i = y * N + x
        const v = cur[i] + (next[i] - cur[i]) * e
        c.fillStyle = colors.tint(238 - v * 230)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

なめらかな起伏が、大きなうねりの中に小さな凹凸を入れ子にして広がる。amp *= 0.55 を 0.4 まで下げると段ごとの乱数が早く消えてのっぺりし、0.75 まで上げると各段の凹凸が残ってごつごつ尖る。減衰率が粗さを決める。

高さをそのまま明るさに使うとグラデーションになる。しきい値で帯に切ると地図になる。海・浅瀬・陸・山の四段に量子化し、しきい値 sea を時間で上下させると海岸線が前後する。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const N = 65
  const cellW = w / (N - 1)
  const cellH = h / (N - 1)
  const field = buildField(N)
  let t = 0

const band = (e, sea) => {
    if (e < sea) return colors.tint(70)
    if (e < sea + 0.08) return colors.tint(130)
    if (e < 0.78) return colors.tint(195)
    return colors.tint(238)
  }

return () => {
    t += 0.02
    const sea = 0.4 + Math.sin(t) * 0.12

for (let y = 0; y < N - 1; y++) {
      for (let x = 0; x < N - 1; x++) {
        const e = field[y * N + x]
        c.fillStyle = band(e, sea)
        c.fillRect(x * cellW, y * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

しきい値で切った瞬間、なめらかな高さ場が島の形に化ける。sea が上がると水位が上がって陸が沈み、下がると干上がって大陸が太る。同じ盤面でも band の段としきい値を増やせば、砂浜・草原・森・雪山と細かい地形帯に分けられる。

格子が 2ⁿ + 1 でないと中点が割り切れず、刻みを半分にする途中で辺の中点が格子からずれる。ノイズが座標を入れたら値が返る関数なのに対し、中点変位は盤面を再帰的に埋めていく手続きで、出てくる地形は近いのに作り方の向きが逆になる。