shigureni.dev

仲間を見て、障害物を避ける

判断の相手は一つとは限らない。群れにすると、各自が近所の仲間だけを見て、離れ・揃え・寄る、の三つを同時にやる。誰も全体を指揮していないのに、群れのうねりが立つ。

boids は Craig Reynolds が 1986 年に発表した群れのモデル。各個体が近傍だけを見て三つの操舵を合成する。分離（separation）は近所から離れる向き、整列（alignment）は近所の平均速度へ寄る向き、結合（cohesion）は近所の重心へ寄る向き。三本それぞれが小さな操舵力を返し、重みつきで足して一つの向きにする。振る舞いを「向きを返す関数」として揃えると、seek や壁回避も同じ足し算に乗せられ、いくつでも合成できる。ステアリング・ビヘイビアの設計はこの足し算で組む。

boids の三規則は、それぞれが小さな操舵力を返す。分離は近所から離れる向き、整列は近所の平均速度へ寄る向き、結合は近所の重心へ寄る向き。三つの力を重みつきで足し合わせて、ひとつの操舵にする。標的を追う seek も、壁を避ける力も、同じ「向きを返す関数」として扱えば合成できる。

障害物回避もこの足し算の一員。seek だけの一匹を置く。下から円の向こうの標的へ向かわせると、まっすぐ進んで円に突っ込む。標的しか見ていないので、間にあるものが目に入らない。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const maxSpeed = 2.2
  const maxForce = 0.12

const obstacle = { x: w * 0.5, y: h * 0.5, r: Math.min(w, h) * 0.16 }
  const goal = { x: w * 0.5, y: h * 0.12 }
  const a = { x: w * 0.5, y: h * 0.9, vx: 0, vy: -1 }

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

return () => {
    c.fillStyle = colors.tintAlpha(238, 0.05)
    c.fillRect(0, 0, w, h)

c.fillStyle = colors.tint(160)
    c.beginPath()
    c.arc(obstacle.x, obstacle.y, obstacle.r, 0, Math.PI * 2)
    c.fill()
    c.fillStyle = colors.tint(58)
    c.beginPath()
    c.arc(goal.x, goal.y, 5, 0, Math.PI * 2)
    c.fill()

// seek: 標的へ向かう力だけ
    const gx = goal.x - a.x
    const gy = goal.y - a.y
    const gd = Math.hypot(gx, gy) || 1
    const fx = (gx / gd) * maxForce
    const fy = (gy / gd) * maxForce

a.vx += fx
    a.vy += fy
    const v = Math.hypot(a.vx, a.vy) || 1
    a.vx = (a.vx / v) * Math.min(v, maxSpeed)
    a.vy = (a.vy / v) * Math.min(v, maxSpeed)
    a.x += a.vx
    a.y += a.vy

if (gd < 8) {
      a.x = w * 0.5
      a.y = h * 0.9
      a.vx = 0
      a.vy = -1
    }

c.fillStyle = colors.ink
    c.beginPath()
    c.arc(a.x, a.y, 4, 0, Math.PI * 2)
    c.fill()
  }
}

円を横切って、構わず標的まで行ってしまう。衝突を避けるには、進む先に何かあるかを点自身に確かめさせる。前方へ短い触角を一本伸ばす。速度の向きへ ahead だけ進んだ点が、触角の先になる。

// 速度の向きへ ahead だけ伸ばした点 = 触角の先
const sp = Math.hypot(a.vx, a.vy) || 1
const px = a.x + (a.vx / sp) * ahead
const py = a.y + (a.vy / sp) * ahead

この先端が障害物の円に入っていれば、このまま進むと当たる。入っているかは中心からの距離で分かる。od < obstacle.r なら触角が円に食い込んでいる。

入っていたら、横へ逃げる力を seek に足す。逃げる向きは、障害物の中心から触角先へ向かう向き。この向きが円の表面を押しのける方向になる。

// 中心 → 触角先 の向きへ押す = 円から離れる向き
fx += (ox / od) * maxForce * 2.2
fy += (oy / od) * maxForce * 2.2

seek の fx, fy に足し込む。標的へ行く力と、円から離れる力。二つを混ぜた合力が、避けながら向かう動きになる。下が全部乗せ。触角が円に入ると線が濃くなる。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const maxSpeed = 2.2
  const maxForce = 0.12

const obstacle = { x: w * 0.5, y: h * 0.5, r: Math.min(w, h) * 0.16 }
  const goal = { x: w * 0.5, y: h * 0.12 }
  const a = { x: w * 0.5, y: h * 0.9, vx: 0, vy: -1 }

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

return () => {
    c.fillStyle = colors.tintAlpha(238, 0.05)
    c.fillRect(0, 0, w, h)

// 障害物と標的
    c.fillStyle = colors.tint(160)
    c.beginPath()
    c.arc(obstacle.x, obstacle.y, obstacle.r, 0, Math.PI * 2)
    c.fill()
    c.fillStyle = colors.tint(58)
    c.beginPath()
    c.arc(goal.x, goal.y, 5, 0, Math.PI * 2)
    c.fill()

// seek: 標的へ向かう力
    const gx = goal.x - a.x
    const gy = goal.y - a.y
    const gd = Math.hypot(gx, gy) || 1
    let fx = (gx / gd) * maxForce
    let fy = (gy / gd) * maxForce

// avoid: 前方の触角の先が障害物に入っていたら、横へ逃げる
    const sp = Math.hypot(a.vx, a.vy) || 1
    const ahead = 46
    const px = a.x + (a.vx / sp) * ahead
    const py = a.y + (a.vy / sp) * ahead
    const ox = px - obstacle.x
    const oy = py - obstacle.y
    const od = Math.hypot(ox, oy)
    if (od < obstacle.r + 8) {
      // 障害物の中心から触角先へ向かう向き = 逃げる向き
      fx += (ox / (od || 1)) * maxForce * 2.2
      fy += (oy / (od || 1)) * maxForce * 2.2
      c.strokeStyle = colors.ink
    } else {
      c.strokeStyle = colors.tint(140)
    }

// 触角を描く
    c.lineWidth = 1
    c.beginPath()
    c.moveTo(a.x, a.y)
    c.lineTo(px, py)
    c.stroke()

a.vx += fx
    a.vy += fy
    const v = Math.hypot(a.vx, a.vy) || 1
    a.vx = (a.vx / v) * Math.min(v, maxSpeed)
    a.vy = (a.vy / v) * Math.min(v, maxSpeed)
    a.x += a.vx
    a.y += a.vy

// 標的に着いたら下から仕切り直し
    if (gd < 8) {
      a.x = w * 0.5
      a.y = h * 0.9
      a.vx = 0
      a.vy = -1
    }

c.fillStyle = colors.ink
    c.beginPath()
    c.arc(a.x, a.y, 4, 0, Math.PI * 2)
    c.fill()
  }
}

触角の先が円に入ると線が濃くなって、横へ押す力が立つ。点は壁に当たる前に膨らんで回り込み、抜けたらまた標的へまっすぐ戻る。触角の長さ ahead を伸ばすと早めに反応して大回りになり、短くすると壁ギリギリで急ハンドルを切る。回避と seek を足し算で混ぜているだけで、避けながら向かう、という二つの向きが同時に成り立つ。