shigureni.dev

区画に割る — 距離場ボロノイ

面を区画に割る。国、バイオーム、街区。盤面にいくつか種（サイト）を撒いて、各マスを「いちばん近いサイト」の側に渡すと、面がモザイク状の区画に割れる。最近傍で塗り分けるだけで、サイトを核にした胞が並ぶ。

平面にサイトを散らし、各点を「いちばん近いサイトの領域」として分けると、平面が胞（セル）に割れる。ボロノイ図。隣り合う二つのサイトの垂直二等分線が境界になる。各マスの値を最も近いサイトまでの距離にしたものが Worley ノイズ（cellular noise）。Steven Worley が 1996 年に発表した。距離の測り方を変えると胞の形が変わり、ユークリッド距離で角の丸い胞、マンハッタン距離で縦横に角ばった結晶になる。

サイトをいくつか撒いて、それぞれに小さな速度を持たせて漂わせる。壁にぶつかると向きを反転して画面の中に留まる。下はサイトそのものを点で打っている。

サイトがゆっくり散らばって動いている。このサイトから区画を作る。盤面を粗い格子に区切り、各セルの中心から全サイトとの距離を測って、いちばん近いサイトの番号をそのセルの所有者にする。所有者ごとに別の明るさで塗ると、サイトを核にした胞が並ぶ。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const nx = 80
  const ny = Math.round(nx * (h / w))
  const cellW = w / nx
  const cellH = h / ny
  const drift = Math.min(w, h) / 384

const sites = Array.from({ length: 24 }, () => ({
    x: Math.random() * w,
    y: Math.random() * h,
    vx: (Math.random() - 0.5) * 0.8 * drift,
    vy: (Math.random() - 0.5) * 0.8 * drift,
    shade: 30 + Math.random() * 200,
  }))

return () => {
    for (const s of sites) {
      s.x += s.vx
      s.y += s.vy
      if (s.x < 1 || s.x >= w - 1) s.vx = -s.vx
      if (s.y < 1 || s.y >= h - 1) s.vy = -s.vy
      s.x = Math.max(1, Math.min(w - 2, s.x))
      s.y = Math.max(1, Math.min(h - 2, s.y))
    }

for (let gy = 0; gy < ny; gy++) {
      const py = (gy + 0.5) * cellH
      for (let gx = 0; gx < nx; gx++) {
        const px = (gx + 0.5) * cellW
        let best = 0
        let bd = Infinity
        for (let i = 0; i < sites.length; i++) {
          const dx = px - sites[i].x
          const dy = py - sites[i].y
          const d = dx * dx + dy * dy
          if (d < bd) {
            bd = d
            best = i
          }
        }
        c.fillStyle = colors.tint(sites[best].shade)
        c.fillRect(gx * cellW, gy * cellH, cellW + 1, cellH + 1)
      }
    }
  }
}

サイトごとに別の濃さの面が並んで、隣のサイトとの中間で色が切り替わる。サイトが動くと胞の形も伸び縮みする。距離は dx * dx + dy * dy で測っていて、平方根は取っていない。大小を比べるだけなら二乗のまま済む。

所有者の番号だけを配列に持っておくと、区画の境界を線で抜ける。各セルの所有者を右隣・下隣と比べて、違っていればそのセルが区画の縁にある。縁のセルだけ暗く塗ると、面が消えて境界線だけが浮かぶ。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const nx = 96
  const ny = Math.round(nx * (h / w))
  const cellW = w / nx
  const cellH = h / ny
  const drift = Math.min(w, h) / 384

const sites = Array.from({ length: 26 }, () => ({
    x: Math.random() * w,
    y: Math.random() * h,
    vx: (Math.random() - 0.5) * 0.8 * drift,
    vy: (Math.random() - 0.5) * 0.8 * drift,
  }))

const owner = new Int16Array(nx * ny)

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

for (let gy = 0; gy < ny; gy++) {
      for (let gx = 0; gx < nx; gx++) {
        const o = owner[gy * nx + gx]
        const right = gx + 1 < nx ? owner[gy * nx + gx + 1] : o
        const down = gy + 1 < ny ? owner[(gy + 1) * nx + gx] : o
        if (o !== right || o !== down) {
          c.fillRect(gx * cellW, gy * cellH, cellW + 1, cellH + 1)
        }
      }
    }
  }
}

胞の面が消えて、区画の境界線だけが残る。サイトが動くと境界が押し合って伸び縮みする。距離の dx * dx + dy * dy を Math.abs(dx) + Math.abs(dy) のマンハッタン距離に替えると、角の丸い胞が縦横に角ばった結晶になる。同じサイトの集まりが、最近傍で塗るか、所有者の境を抜くか、どの距離で測るかで、モザイクにも細胞壁にも結晶にもなる。