shigureni.dev

回す — 回転行列

向きを変えるのは回転。平面の回転は、点 (x, y) を角度 θ だけ回して (x cosθ − y sinθ, x sinθ + y cosθ) にする。立体では、この平面回転を三つの軸それぞれについて行う。y 軸まわりに回せば横を向き、x 軸まわりなら上下を向く。

二次元の回転行列は [[cosθ, −sinθ], [sinθ, cosθ]]。この行列を三次元の各軸に当てると、その軸を固定して残り二成分を回す三つの行列になる。y 軸回転は x と z を混ぜ、x 軸回転は y と z を混ぜる。複数の軸を順に掛けると合成回転になり、掛ける順番で結果が変わる（回転は非可換）。順番依存やジンバルロックを避けるため、実務ではクォータニオンや軸‐角で持つことが多い。ここでは三角関数を直に二回かける素朴な形で足りる。

立方体の八つの頂点を、まだ投影せずに y 軸と x 軸で回して点で打つ。線で結ぶ前の、頂点だけが宙で回る状態。奥行き z はここでは大きさに使わず、薄さ（tintAlpha）に回して、奥の点を淡くしている。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cx = w / 2
  const cy = h / 2
  const r = Math.min(w, h) * 0.26
  let t = 0

const verts = []
  for (let i = 0; i < 8; i++) {
    verts.push([(i & 1) * 2 - 1, ((i >> 1) & 1) * 2 - 1, ((i >> 2) & 1) * 2 - 1])
  }

return () => {
    t += 0.015
    const cy1 = Math.cos(t)
    const sy1 = Math.sin(t)
    const cx1 = Math.cos(t * 0.6)
    const sx1 = Math.sin(t * 0.6)

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

for (const v of verts) {
      const x = v[0] * r
      const y = v[1] * r
      const z = v[2] * r
      // y 軸回転（x と z を混ぜる）
      const x1 = x * cy1 - z * sy1
      const z1 = x * sy1 + z * cy1
      // x 軸回転（y と z を混ぜる）
      const y2 = y * cx1 - z1 * sx1
      const z2 = y * sx1 + z1 * cx1

const alpha = 0.35 + (z2 / r + 1) * 0.32
      c.fillStyle = colors.tintAlpha(20, alpha)
      c.beginPath()
      c.arc(cx + x1, cy + y2, 5, 0, Math.PI * 2)
      c.fill()
    }
  }
}

x1 / z1 の二行が y 軸回転、y2 / z2 の二行が x 軸回転で、どちらも回転行列をそのまま展開しただけ。(i & 1) のビット演算は 0..7 を立方体の八隅 (±1, ±1, ±1) に振り分けている。投影をまだ入れていないので奥行きで大きさは変わらず、z2 を tintAlpha に渡して奥の頂点を淡くしているだけ。t * 0.6 の係数を変えると二軸の回転比が変わって、頂点の描く軌跡が変わる。