shigureni.dev

点を領域に変える

点を散らしたら、今度は逆を見る。盤面の各マスが「いちばん近い点」のどれに属するかで塗り分けると、平面が点の数だけの区画に割れる。隣り合う区画の境目は、ちょうど2点の中間を通る線になる。

ボロノイ図は、平面に散らした種点（サイト）のそれぞれに「他のどのサイトより近い領域」を割り当てた分割。隣り合う2サイトの領域の境界は、その2点の垂直二等分線の一部になる。Georgy Voronoy が定式化した。最近傍だけでなく2番目に近い点との距離を読むと、領域の塗りでなく境界の網が出る。Worley ノイズ（cellular noise、Steven Worley が 1996 年に発表）では、F1 が最近傍までの距離、F2−F1 が境界までの近さになる。

種点を撒いて、それぞれに小さな速度を持たせて漂わせる。壁にぶつかると向きを反転して画面の中に留まる。区画はまだ描かず、種点そのものを点で打つ。

種点がゆっくり散らばって動く。この種点から区画を起こす。盤面を粗いマスに切り、各マスの中心から全種点への距離を測って、最短の種点の番号を owner に記録する。所有者が隣のマスと食い違う辺だけを塗ると、区画の境界線が浮かぶ。種点が動くと境界も追従する。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const count = 14
  const grid = 48
  const cellW = w / grid
  const cellH = h / grid

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

const owner = new Int16Array(grid * grid)

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

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

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

各種点を芯にした多角形の区画に割れ、境界線が動く種点に合わせて伸び縮みする。点（離散）を領域（連続）に裏返している。

最近傍だけでなく、2番目に近い種点までの距離も拾うと、別の読み方になる。各マスで最短 d1（F1）と次点 d2（F2）を求め、d2 − d1 を明るさに写す。区画の中央では2点の距離が大きく離れていて差は大きく、境界では2つの種点が等しく近いので差が 0 に落ちる。差が小さい所だけ暗くすると、区画の面が消えて境界だけが細胞壁のように残る。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const count = 14
  const cell = w / 64

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

for (let py = 0; py < h; py += cell) {
      for (let px = 0; px < w; px += cell) {
        let d1 = 1e9
        let d2 = 1e9
        for (const s of sites) {
          const dx = px - s.x
          const dy = py - s.y
          const d = dx * dx + dy * dy
          if (d < d1) {
            d2 = d1
            d1 = d
          } else if (d < d2) {
            d2 = d
          }
        }
        const edge = Math.sqrt(d2) - Math.sqrt(d1)
        const v = Math.min(1, edge / (w / 6))
        c.fillStyle = colors.tint(8 + v * 220)
        c.fillRect(px, py, cell + 1, cell + 1)
      }
    }
  }
}

d2 − d1 を d1 だけ（最近傍の距離そのもの）に取り替えると、境界の網でなく種点を中心にした塊の塗りに戻る。距離を dx * dx + dy * dy から Math.abs(dx) + Math.abs(dy) のマンハッタン距離に替えると、丸い区画が縦横に角ばった結晶になる。最近傍だけ拾うか、次点との差を取るか、どの距離で測るか——同じ種点の集まりが、その読み替えだけで区画にも細胞にもなる。