shigureni.dev

この先

Wang・WFC の制約タイルは辺の一致を「色」で持たせている。これを確率や重みに広げると、どの模様が出やすいかを偏らせられる。

ボロノイの種点を、各区画の重心へ少しずつ寄せ続けると、点が均質化していく。棄却サンプリングとは別の道で、一様にばらけた配置に近づく。Lloyd 緩和。

Lloyd 緩和は、ボロノイ分割と重心への移動を交互にくり返す手法。各サイトの区画（そのサイトが最近傍になる領域）を求め、サイトをその区画の重心（centroid）へ動かす。重心は領域内の点の平均位置で、サイトを区画の真ん中へ引き寄せる。これを反復すると区画の大きさと形が揃い、サイトが等間隔へ収束する（重心ボロノイ分割、CVT）。乱数撒きの塊と穴がならされて、棄却サンプリングが作るブルーノイズに似た均質な配置になる。Stuart Lloyd が 1957 年にベクトル量子化の文脈で示した。

下は種点を撒いて、毎フレーム緩和を1回かけたもの。盤面を粗いマスに切り、各マスを最近傍の種点に割り当てて区画を起こす。区画ごとにマスの中心を平均して重心を出し、種点を重心へ 8% だけ寄せる。境界線は所有者が隣と食い違う辺を塗っている。

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

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

const owner = new Int16Array(grid * grid)
  const sumX = new Float64Array(count)
  const sumY = new Float64Array(count)
  const hits = new Float64Array(count)

return () => {
    relax()

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

c.fillStyle = colors.tint(118)
    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 + 1, cellH + 1)
        }
      }
    }

c.fillStyle = colors.tint(28)
    for (let i = 0; i < count; i++) {
      c.fillRect(sites[i].x - 2, sites[i].y - 2, 4, 4)
    }
  }
}

始めは大小ばらばらだった区画が、反復のたびに大きさを揃えて六角形に近い形へ落ち着く。種点は塊や穴を解いて、互いに距離を空けた配置へ収まる。寄せる割合 0.08 を上げると速く均質化し、下げるとゆっくり整う。距離と制約、点と領域、散らすと詰める——詰めるという問いの対が、まだいくつも残っている。