shigureni.dev

跡が形になる — 凝集と成長

軌跡そのものを固めて形にする決め方が二つある。縁から酔歩で歩いてきた点を塊に触れた瞬間で固着させる凝集と、閉じた線が押し合いながら点を増やして溢れる差分成長。

中央に一粒だけ種を置いて、まわりに撒いた点を酔歩させる。向きを毎フレーム乱数で選んで一歩進めるだけで、塊にはまだ触らない。種の円周のすぐ外に湧かせ、遠くへ逸れた点は湧き直す。

const dirs = [
  [-1, -1],
  [0, -1],
  [1, -1],
  [-1, 0],
  [1, 0],
  [-1, 1],
  [0, 1],
  [1, 1],
]

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const grid = Math.floor(Math.min(w, h) / 6)
  const cell = Math.min(w, h) / grid
  const center = grid >> 1
  const limit = center - 2
  const count = 40

const spawn = (walker) => {
    const angle = Math.random() * Math.PI * 2
    walker.x = Math.round(center + Math.cos(angle) * 10)
    walker.y = Math.round(center + Math.sin(angle) * 10)
  }

const walkers = Array.from({ length: count }, () => {
    const walker = { x: 0, y: 0 }
    spawn(walker)
    return walker
  })

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

c.fillStyle = colors.tint(20)
    c.fillRect(center * cell, center * cell, cell + 0.6, cell + 0.6)

c.fillStyle = colors.tint(90)
    for (const walker of walkers) {
      const d = dirs[Math.floor(Math.random() * dirs.length)]
      walker.x += d[0]
      walker.y += d[1]
      const dx = walker.x - center
      const dy = walker.y - center
      if (dx * dx + dy * dy > limit * limit) spawn(walker)
      c.fillRect(walker.x * cell, walker.y * cell, cell + 0.6, cell + 0.6)
    }
  }
}

点が種のまわりで行きつ戻りつして、固まらずに散らばり続ける。動きはサイコロのまま、塊は種の一粒だけのまま動かない。

固着の一行を足す。歩いた先の八近傍に固まったマスがあれば、その場で点を止めて塊に加える。固まったマスを occ で覚えておき、止まった点は湧き直す。

拡散律速凝集（DLA, Diffusion-Limited Aggregation）。酔歩する粒子が既存の塊に触れた瞬間その場で固着する成長則。Witten と Sander が 1981 年に金属の電析を説明するために提示した。塊の先端は奥より飛んでくる粒子を捕まえやすく、捕まえた先端がさらに突き出て奥を遮蔽する。この捕獲確率の偏りが枝分かれを生み、結晶・放電・血管に似たフラクタル状の樹になる。

const dirs = [
  [-1, -1],
  [0, -1],
  [1, -1],
  [-1, 0],
  [1, 0],
  [-1, 1],
  [0, 1],
  [1, 1],
]

const occ = new Uint8Array(grid * grid)
  const idx = (x, y) => y * grid + x
  occ[idx(center, center)] = 1
  let radius = 1

const spawn = (walker) => {
    const birth = Math.min(radius + 4, limit)
    const angle = Math.random() * Math.PI * 2
    walker.x = Math.round(center + Math.cos(angle) * birth)
    walker.y = Math.round(center + Math.sin(angle) * birth)
  }

const walkers = Array.from({ length: count }, () => {
    const walker = { x: 0, y: 0 }
    spawn(walker)
    return walker
  })

const hasNeighbor = (x, y) => {
    for (const d of dirs) {
      const nx = x + d[0]
      const ny = y + d[1]
      if (nx < 0 || nx >= grid || ny < 0 || ny >= grid) continue
      if (occ[idx(nx, ny)]) return true
    }
    return false
  }

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)
  c.fillStyle = colors.tint(20)
  c.fillRect(center * cell, center * cell, cell + 0.6, cell + 0.6)

return () => {
    const birth = Math.min(radius + 4, limit)
    const kill = birth * 2.2
    const steps = Math.max(12, Math.min(240, Math.round(birth * 4)))

for (const walker of walkers) {
      for (let step = 0; step < steps; step++) {
        const d = dirs[Math.floor(Math.random() * dirs.length)]
        walker.x += d[0]
        walker.y += d[1]

if (
          walker.x < 0 ||
          walker.x >= grid ||
          walker.y < 0 ||
          walker.y >= grid ||
          occ[idx(walker.x, walker.y)]
        ) {
          spawn(walker)
          continue
        }

const dx = walker.x - center
        const dy = walker.y - center
        if (dx * dx + dy * dy > kill * kill) {
          spawn(walker)
          continue
        }

if (hasNeighbor(walker.x, walker.y)) {
          occ[idx(walker.x, walker.y)] = 1
          const reach = Math.ceil(Math.sqrt(dx * dx + dy * dy))
          if (reach > radius) radius = reach
          c.fillStyle = colors.tint(28 + ((walker.x + walker.y) % 3) * 30)
          c.fillRect(walker.x * cell, walker.y * cell, cell + 0.6, cell + 0.6)
          spawn(walker)
          break
        }
      }
    }
  }
}

種の一粒から枝が四方へ伸びて、先端ほど早く太り、内側に空洞を残したまま樹になる。湧かせる半径 birth を塊の半径 radius に追従させ、一フレームの歩数も半径に比例させているので、塊が育っても点が縁まで届く。birth の + 4 を広げると枝が疎になり、八近傍の dirs を上下左右の四近傍に絞ると枝が縦横に角張る。

閉じた線そのものを育てる成長は、線の上に点を等間隔に並べるところから始まる。各点を、前後の隣との中点へ少し引き寄せて線を滑らかに保ちつつ、近すぎる点どうしを押し返す。点の数は固定で、まだ増やさない。

差分成長（differential growth）。曲線上の点に二つの局所則だけを課す。隣との平均位置へ寄る平滑化が線を縮めようとし、一定半径より近い点との反発が線を膨らませようとする。この縮もうとする力と膨らもうとする力が拮抗したまま、点を増やして総延長を伸ばすと、平面に収まりきらない余りが折りたたまれて、脳の皺やサンゴの縁のような波打つ縁になる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const span = Math.min(w, h)
  const cx = w / 2
  const cy = h / 2
  const radius = span * 0.22
  const repel = span * 0.05
  const repel2 = repel * repel
  const margin = span * 0.02
  const start = 60

const nodes = Array.from({ length: start }, (_v, i) => {
    const a = (i / start) * Math.PI * 2
    return { x: cx + Math.cos(a) * radius, y: cy + Math.sin(a) * radius }
  })

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

const n = nodes.length
    const fx = new Array(n).fill(0)
    const fy = new Array(n).fill(0)

for (let i = 0; i < n; i++) {
      const node = nodes[i]
      const prev = nodes[(i - 1 + n) % n]
      const next = nodes[(i + 1) % n]
      fx[i] += ((prev.x + next.x) * 0.5 - node.x) * 0.22
      fy[i] += ((prev.y + next.y) * 0.5 - node.y) * 0.22
    }

for (let i = 0; i < n; i++) {
      const a = nodes[i]
      for (let j = i + 1; j < n; j++) {
        const b = nodes[j]
        const dx = a.x - b.x
        const dy = a.y - b.y
        const d2 = dx * dx + dy * dy
        if (d2 > 0 && d2 < repel2) {
          const d = Math.sqrt(d2)
          const force = ((repel - d) / d) * 0.5
          fx[i] += dx * force
          fy[i] += dy * force
          fx[j] -= dx * force
          fy[j] -= dy * force
        }
      }
    }

for (let i = 0; i < n; i++) {
      const node = nodes[i]
      node.x = Math.max(margin, Math.min(w - margin, node.x + fx[i]))
      node.y = Math.max(margin, Math.min(h - margin, node.y + fy[i]))
    }

c.strokeStyle = colors.tint(28)
    c.lineWidth = 1
    c.beginPath()
    c.moveTo(nodes[0].x, nodes[0].y)
    for (let i = 1; i < n; i++) c.lineTo(nodes[i].x, nodes[i].y)
    c.closePath()
    c.stroke()
  }
}

円がいったん少し膨らんで、点の数のまま釣り合った大きさに落ち着く。平滑化が線を縮め、反発が押し戻して、二つの力が止まる輪になる。総延長が頭打ちなので皺は出ない。

中点挿入を足す。隣り合う二点の間隔がしきい値を越えたら、その中点に新しい点を差し込む。点が増えるほど反発の押し合いが強まり、膨らもうとする力が平滑化に勝って、線が折りたたまれる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const span = Math.min(w, h)
  const cx = w / 2
  const cy = h / 2
  const radius = span * 0.1
  const repel = span * 0.045
  const repel2 = repel * repel
  const maxLen = span * 0.035
  const maxLen2 = maxLen * maxLen
  const margin = span * 0.02
  const maxNodes = 560
  const start = 40

const nodes = Array.from({ length: start }, (_v, i) => {
    const a = (i / start) * Math.PI * 2
    return { x: cx + Math.cos(a) * radius, y: cy + Math.sin(a) * radius }
  })

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

const n = nodes.length
    const fx = new Array(n).fill(0)
    const fy = new Array(n).fill(0)

let inserted = 0
    for (let i = nodes.length - 1; i >= 0 && nodes.length < maxNodes && inserted < 6; i--) {
      const a = nodes[i]
      const b = nodes[(i + 1) % nodes.length]
      const dx = b.x - a.x
      const dy = b.y - a.y
      if (dx * dx + dy * dy > maxLen2) {
        nodes.splice(i + 1, 0, { x: (a.x + b.x) * 0.5, y: (a.y + b.y) * 0.5 })
        inserted++
      }
    }

c.strokeStyle = colors.tint(28)
    c.lineWidth = 1
    c.beginPath()
    c.moveTo(nodes[0].x, nodes[0].y)
    for (let i = 1; i < nodes.length; i++) c.lineTo(nodes[i].x, nodes[i].y)
    c.closePath()
    c.stroke()
  }
}

小さな円が点を増やしながら外へ広がり、辺が伸びるたびに中点が割り込んで、縁が皺を打って溢れていく。中点を入れる間隔 maxLen を詰めると皺が細かくなり、反発半径 repel を広げると点どうしが遠ざかって皺の波長が伸びる。平滑化の係数 0.22 を上げると線が張って皺が減る。