shigureni.dev

距離拘束の親戚たち

距離を保つ拘束を少しずつ崩すと、見た目の違うものがいくつも出てくる。距離をきっちり保つ代わりにずれた量へ比例した力で引き戻すのがばね、各リンクの長さだけ保ったまま先端を目標へ引っぱるのが逆運動学。どれも二点の間の長さを読み替えただけの親戚になる。

ばねの復元力は Hooke の法則 F = -k·x。自然長からのずれ x に比例した力が、ずれを縮める向きに働く。距離拘束が長さをその場で 1 に直すのに対し、ばねは力として返すので一気には戻らず、行き過ぎて振動する。減衰 damp を掛けないとエネルギーが抜けず、刻みが粗いと振幅が育って発散する。ばねを輪に組んで内側から面積を保つ圧を足すと、閉じた膜（pressurized soft body）になる。

点を輪に並べて、隣どうしをばねでつなぐ。各ばねは今の長さ d と自然長 rest のずれに k を掛けた力で、二点を縮める向きに引く。輪の内側からは、囲む面積を目標へ近づける圧を法線方向に押し出す。重心を画面中央へゆるく引き戻し、四辺で跳ね返して枠内に留める。

const polygonArea = (points) => {
  let sum = 0
  for (let i = 0; i < points.length; i++) {
    const p = points[i]
    const q = points[(i + 1) % points.length]
    sum += p.x * q.y - q.x * p.y
  }
  return Math.abs(sum) / 2
}

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const count = 26
  const radius = Math.min(w, h) * 0.16
  const k = 0.22
  const press = 0.7
  const damp = 0.97
  const gravity = Math.min(w, h) * 0.0009
  const anchor = 0.014
  const margin = Math.min(w, h) * 0.03
  const bounce = 0.7

const points = Array.from({ length: count }, (_value, i) => {
    const a = (i / count) * Math.PI * 2
    return {
      x: w * 0.5 + Math.cos(a) * radius,
      y: h * 0.5 + Math.sin(a) * radius,
      vx: 0,
      vy: 0,
    }
  })

const restLengths = points.map((p, i) => {
    const q = points[(i + 1) % count]
    return Math.hypot(q.x - p.x, q.y - p.y)
  })
  const targetArea = Math.PI * radius * radius * 1.15

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

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

const forceX = new Array(count).fill(0)
    const forceY = new Array(count).fill(0)

// 隣どうしのばね: ずれ (d - rest) に比例した力で縮める
    for (let i = 0; i < count; i++) {
      const p = points[i]
      const q = points[(i + 1) % count]
      const dx = q.x - p.x
      const dy = q.y - p.y
      const d = Math.hypot(dx, dy) + 1e-4
      const f = (k * (d - restLengths[i])) / d
      forceX[i] += dx * f
      forceY[i] += dy * f
      forceX[(i + 1) % count] -= dx * f
      forceY[(i + 1) % count] -= dy * f
    }

// 内圧: 面積を目標へ近づける力を、各点で外向き法線へ押し出す
    const area = polygonArea(points) + 1e-4
    const pressure = (press * (targetArea - area)) / targetArea
    for (let i = 0; i < count; i++) {
      const prev = points[(i + count - 1) % count]
      const next = points[(i + 1) % count]
      const nx = next.y - prev.y
      const ny = -(next.x - prev.x)
      const nl = Math.hypot(nx, ny) + 1e-4
      forceX[i] += (nx / nl) * pressure
      forceY[i] += (ny / nl) * pressure
    }

// 重心をゆるく画面中央へ戻して、膜が roam しつつ枠内に留まる
    let centerX = 0
    let centerY = 0
    for (const p of points) {
      centerX += p.x
      centerY += p.y
    }
    centerX /= count
    centerY /= count
    const pullX = (w * 0.5 - centerX) * anchor
    const pullY = (h * 0.5 - centerY) * anchor

for (let i = 0; i < count; i++) {
      const p = points[i]
      p.vx = (p.vx + forceX[i] + pullX) * damp
      p.vy = (p.vy + forceY[i] + pullY + gravity) * damp
      p.x += p.vx
      p.y += p.vy
      if (p.x < margin) {
        p.x = margin
        p.vx = Math.abs(p.vx) * bounce
      } else if (p.x > w - margin) {
        p.x = w - margin
        p.vx = -Math.abs(p.vx) * bounce
      }
      if (p.y < margin) {
        p.y = margin
        p.vy = Math.abs(p.vy) * bounce
      } else if (p.y > h - margin) {
        p.y = h - margin
        p.vy = -Math.abs(p.vy) * bounce
      }
    }

c.strokeStyle = colors.tint(30)
    c.lineWidth = 2
    c.beginPath()
    c.moveTo(points[0].x, points[0].y)
    for (let i = 1; i <= count; i++) {
      const p = points[i % count]
      c.lineTo(p.x, p.y)
    }
    c.stroke()

c.fillStyle = colors.tint(58)
    for (const p of points) c.fillRect(p.x - 2, p.y - 2, 4, 4)
  }
}

ばねの力だけだと輪はしぼんで一点に潰れる。内圧を足すと面積が目標まで膨らんで、ぷるぷるした風船になる。重力で傾いて揺れ、形が潰れるたびにばねと圧が押し返して丸く戻る。k を上げると膜が硬くなり、下げるとゆるんで大きく波打つ。press を上げると張りつめ、damp を 1 に近づけると揺れが止まらず暴れる。

同じ拘束を関節に応用すると逆運動学になる。先端を目標へ動かしたいとき、根元から角度を計算する代わりに、各関節の距離を保ったまま先端を引っぱって根元を押し戻す。前向きと後ろ向きの二パスをくり返すと、腕がしなって目標へ届く。

ik は FABRIK というやり方で、各リンクの長さを保つ操作を、先端と根元の両方から交互に当てている。距離拘束という一つの道具が、布にも、ばねにも、関節にも化けていく。