shigureni.dev

この先

平面の点を複素数 z = x + iy として持ち、z → (a z + b) / (c z + d) の四つの複素係数で書くと、鏡映・回転・並進・反転がこの一族の特別な場合になる。係数を一組決めれば一つの変換、係数を時間で動かせば変換そのものが連続に移り変わる。

z → (az + b) / (cz + d) がメビウス変換。c = 0 なら分母が定数になり、az + b の一次式 — 回転（a の偏角）・拡大縮小（a の絶対値）・平行移動（b）の合成にあたる。c ≠ 0 だと分母が z に依存し、z が -d/c に近づくと値が発散する、円反転を含む写像になる。円と直線をまとめて「円または直線」に写し、角度を保つ（等角）。合成は係数を 2×2 行列 [[a,b],[c,d]] と見たときの行列の積に対応し、変換のリストを行列の積で畳める。

直交した格子を一枚のメビウス変換に通す。各格子線を点列に刻んで z → (az + b) / (cz + d) に通し、写った点を折れ線で結ぶ。a = e^{it} で回転を回し、c を 0 から立ち上げると分母が効きはじめ、まっすぐな格子が円弧の束へ反っていく。発散して画面外へ飛ぶ点は描かずに線を切る。

const cmul = (ax, ay, bx, by) => [ax * bx - ay * by, ax * by + ay * bx]

const cdiv = (ax, ay, bx, by) => {
  const den = bx * bx + by * by + 1e-9
  return [(ax * bx + ay * by) / den, (ay * bx - ax * by) / den]
}

// メビウス変換 z → (a z + b) / (c z + d)。a,b,c,d は複素係数
const mobius = (zx, zy, a, b, cc, d) => {
  const num = cmul(a[0], a[1], zx, zy)
  const den = cmul(cc[0], cc[1], zx, zy)
  return cdiv(num[0] + b[0], num[1] + b[1], den[0] + d[0], den[1] + d[1])
}

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

return () => {
    t += 0.01

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

// c を 0 から立ち上げると分母が効いて反転が混ざる
    const a = [Math.cos(t), Math.sin(t)]
    const b = [0, 0]
    const cc = [Math.sin(t * 0.7) * 0.6, 0]
    const d = [1, 0]

c.strokeStyle = colors.tint(28)
    c.lineWidth = 1

// 縦線と横線を変換して敷く。x∈0..w と y∈0..h を独立に張る
    for (let pass = 0; pass < 2; pass++) {
      const along = pass === 0 ? h : w
      const acrossMax = pass === 0 ? w : h
      for (let fixed = 0; fixed <= acrossMax; fixed += gap) {
        c.beginPath()
        let on = false
        for (let s = 0; s <= 60; s++) {
          const moving = (s / 60) * along
          const px = pass === 0 ? fixed : moving
          const py = pass === 0 ? moving : fixed
          const zx = (px - cx) / scale
          const zy = (py - cy) / scale
          const m = mobius(zx, zy, a, b, cc, d)
          const ox = cx + m[0] * scale
          const oy = cy + m[1] * scale
          if (ox < -w || ox > w * 2 || oy < -h || oy > h * 2) {
            on = false
            continue
          }
          if (!on) {
            c.moveTo(ox, oy)
            on = true
          } else {
            c.lineTo(ox, oy)
          }
        }
        c.stroke()
      }
    }
  }
}

cc を [0, 0] に固定すると分母が定数になり、格子はまっすぐなまま回転と移動だけを受ける。cc の絶対値が上がるほど分母の効きが強まり、中心の近くの線が外へ弾かれて円弧へ反る。直交していた格子線は写った先でも直交したまま曲がる。a を実数の [s, 0] にすれば一様な拡大縮小、b を動かせば平行移動と、同じ一つの式の係数を振り分けるだけで別々の対称操作に化ける。

基本領域と群 — この対は、形を作る側でなく形にかける側にある。群を「変換のリスト」としてデータで持てば、基本領域の各点に全要素を適用して複製する操作が、群を引数に取る一本の関数で書ける。