shigureni.dev

曲がった面に敷き詰める

各頂点に正多角形を隙間なく集めて平面を周期的に埋めるとき、許される組み合わせは正方形・正三角形・正六角形の三通りしかない。面そのものを負に曲がった双曲面に取り替えると、平面では成立しなかった組み合わせのタイリングが埋まる。基本領域を反射で複製する筋は同じで、複製の道具が直線の折り返しから円弧（測地線）の反転に変わる。

ポアンカレ円板は、双曲平面を有限の円の中に写したモデル。双曲面での「直線」（測地線）は、境界円に直交する円弧として現れる。{p,q} タイリングは、p角形が各頂点に q枚集まる敷き詰めで、ユークリッド平面では (p-2)(q-2)=4（正方形 {4,4}・三角形 {3,6}・六角形 {6,3}）しか許されないが、(p-2)(q-2)>4 を満たす無数の組み合わせ（{7,3} や {5,4} など）が双曲面では成立する。辺の測地線に関する鏡映の繰り返しがタイル全体を生成し、その群は無限個の元を持つ（クライン群）。エッシャーの「Circle Limit」連作がこのモデルそのものを使っている。

{p,q} の中心 p角形は、半径 r0 の円周上に頂点が 2π/p 刻みで並ぶ。r0 は A = π/p、B = π/q から cos(A+B)/cos(A−B) の平方根で決まる。隣り合う頂点を結ぶ辺は、双曲面では直線でなく境界円に直交する円弧になる。二つの頂点を通り、単位円と直交する円の中心 (gx, gy) と半径 gr を求めて、その円弧を境界の内側に描く。p本の辺を測地線として引き、ゆっくり回す。

const A_OF = (p) => Math.PI / p
const B_OF = (q) => Math.PI / q

// 二頂点を通り単位円に直交する円（測地線）を返す
const edgeGeodesic = (x0, y0, x1, y1) => {
  const k = (x0 * x0 + y0 * y0 + 1) / 2
  const det = x0 * y1 - y0 * x1
  if (Math.abs(det) < 1e-6) return null
  const gx = (k * (y1 - y0)) / det
  const gy = (k * (x0 - x1)) / det
  const gr2 = gx * gx + gy * gy - 1
  if (gr2 <= 0) return null
  return { cx: gx, cy: gy, r: Math.sqrt(gr2) }
}

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.46
  const p = 5
  const q = 4
  const A = A_OF(p)
  const B = B_OF(q)
  const r0 = Math.sqrt(Math.cos(A + B) / Math.cos(A - B))
  let spin = 0

return () => {
    spin += 0.006

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

// 境界円（円板の縁）
    c.strokeStyle = colors.tint(28)
    c.lineWidth = 2
    c.beginPath()
    c.arc(cx, cy, R, 0, Math.PI * 2)
    c.stroke()

// p本の辺を測地線として引く
    c.strokeStyle = colors.tintAlpha(28, 0.8)
    c.lineWidth = 1.5
    for (let e = 0; e < p; e++) {
      const a0 = spin + 2 * A * e
      const a1 = a0 + 2 * A
      const x0 = r0 * Math.cos(a0)
      const y0 = r0 * Math.sin(a0)
      const x1 = r0 * Math.cos(a1)
      const y1 = r0 * Math.sin(a1)
      const g = edgeGeodesic(x0, y0, x1, y1)
      if (!g) continue
      c.beginPath()
      c.arc(cx + g.cx * R, cy + g.cy * R, g.r * R, 0, Math.PI * 2)
      c.stroke()
    }
  }
}

p本の円弧が中心を囲って、辺の膨らんだ多角形になる。直線で結べばただの正多角形だが、測地線は境界円へ向かって反り、辺が中心側へ凹む。q を変えると頂点に集まる枚数が変わり、辺の反り方も変わる。

各辺の測地線円を「鏡」として、別の測地線をその円で反転すると、辺の向こう側に写った測地線が出る。円反転は鏡の中心からの距離を 半径² / 距離² 倍に飛ばす操作で、円を円に写す。1枚の辺を鏡に選んで、中心タイルの残りの辺をその鏡で反転すると、辺を共有する隣のタイルの輪郭が向こう側に立つ。

const edgeGeodesic = (x0, y0, x1, y1) => {
  const k = (x0 * x0 + y0 * y0 + 1) / 2
  const det = x0 * y1 - y0 * x1
  if (Math.abs(det) < 1e-6) return null
  const gx = (k * (y1 - y0)) / det
  const gy = (k * (x0 - x1)) / det
  const gr2 = gx * gx + gy * gy - 1
  if (gr2 <= 0) return null
  return { cx: gx, cy: gy, r: Math.sqrt(gr2) }
}

// 測地線 g を、鏡の円 m で反転して新しい測地線にする
const reflect = (g, m) => {
  const dx = g.cx - m.cx
  const dy = g.cy - m.cy
  const denom = dx * dx + dy * dy - g.r * g.r
  if (Math.abs(denom) < 1e-6) return null
  const s = (m.r * m.r) / denom
  return { cx: m.cx + dx * s, cy: m.cy + dy * s, r: Math.abs(s) * g.r }
}

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.46
  const p = 5
  const q = 4
  const A = Math.PI / p
  const B = Math.PI / q
  const r0 = Math.sqrt(Math.cos(A + B) / Math.cos(A - B))
  let spin = 0

const mirrors = []
  for (let e = 0; e < p; e++) {
    const a0 = 2 * A * e
    const a1 = a0 + 2 * A
    const g = edgeGeodesic(
      r0 * Math.cos(a0),
      r0 * Math.sin(a0),
      r0 * Math.cos(a1),
      r0 * Math.sin(a1),
    )
    if (g) mirrors.push(g)
  }

const arc = (g, alpha) => {
    c.strokeStyle = colors.tintAlpha(28, alpha)
    c.beginPath()
    c.arc(cx + g.cx * R, cy + g.cy * R, g.r * R, 0, Math.PI * 2)
    c.stroke()
  }

return () => {
    spin += 0.01

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

c.strokeStyle = colors.tint(28)
    c.lineWidth = 2
    c.beginPath()
    c.arc(cx, cy, R, 0, Math.PI * 2)
    c.stroke()

c.lineWidth = 1.5

// 中心タイルの p本の辺
    for (const g of mirrors) arc(g, 0.8)

// 鏡を1枚ずつ選び、中心タイルの全辺をその鏡で反転 → 隣のタイルが出る
    const which = ((Math.floor(spin) % p) + p) % p
    const m = mirrors[which]
    c.lineWidth = 2.5
    for (let e = 0; e < p; e++) {
      if (e === which) continue
      const reflected = reflect(mirrors[e], m)
      if (reflected && Number.isFinite(reflected.r) && reflected.r < 6) {
        arc(reflected, 0.5)
      }
    }
  }
}

太い円弧の束が、選んだ鏡の向こう側へ写った隣のタイル。鏡にする辺を順に変えると、写る先が中心の周りをぐるりと回る。反転で生まれる円弧は、必ずまた境界円に直交していて、隣のタイルの辺として収まる。

中心タイルの p本の辺を出発点に、各円弧をすべての鏡で反転し、新しく出た円弧をまた次の世代の種にする。同じ円弧（中心・半径が一致）はキーで弾いて重複を止める。境界に近づくほどタイルが小さく潰れるので、半径がごく小さいものは打ち切る。辺ごとの反転を全方向へ繰り返すと、円板が {7,3} の網で埋まる。

const reflect = (g, m) => {
  const dx = g.cx - m.cx
  const dy = g.cy - m.cy
  const denom = dx * dx + dy * dy - g.r * g.r
  if (Math.abs(denom) < 1e-6) return null
  const s = (m.r * m.r) / denom
  return { cx: m.cx + dx * s, cy: m.cy + dy * s, r: Math.abs(s) * g.r }
}

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.46
  const p = 7
  const q = 3
  const A = Math.PI / p
  const B = Math.PI / q
  const r0 = Math.sqrt(Math.cos(A + B) / Math.cos(A - B))

// 反転を世代ごとに繰り返してタイル全体を作る（一度だけ）
  const arcs = []
  const seen = new Set()
  const add = (g) => {
    if (!g || !Number.isFinite(g.r) || g.r < 0.004 || g.r > 6) return false
    const key = g.cx.toFixed(2) + "," + g.cy.toFixed(2) + "," + g.r.toFixed(2)
    if (seen.has(key)) return false
    seen.add(key)
    arcs.push(g)
    return true
  }
  let frontier = mirrors.filter(add)
  for (let lvl = 0; lvl < 5 && arcs.length < 700; lvl++) {
    const next = []
    for (const g of frontier) {
      if (arcs.length >= 700) break
      for (const m of mirrors) {
        const ng = reflect(g, m)
        if (add(ng)) next.push(ng)
      }
    }
    frontier = next
  }

let rot = 0

return () => {
    rot += 0.0025

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

const co = Math.cos(rot)
    const si = Math.sin(rot)

c.strokeStyle = colors.tintAlpha(28, 0.55)
    c.lineWidth = 1
    for (const g of arcs) {
      const gx = (g.cx * co - g.cy * si) * R + cx
      const gy = (g.cx * si + g.cy * co) * R + cy
      const gr = g.r * R
      if (!Number.isFinite(gx) || !Number.isFinite(gy) || !Number.isFinite(gr)) continue
      c.beginPath()
      c.arc(gx, gy, gr, 0, Math.PI * 2)
      c.stroke()
    }

c.strokeStyle = colors.tint(28)
    c.lineWidth = 2
    c.beginPath()
    c.arc(cx, cy, R, 0, Math.PI * 2)
    c.stroke()
  }
}

円板の縁に近づくほどタイルが無限に小さく潰れていく。中心の一区画を辺の測地線で次々に反転して増やすだけで、円板の内側が {7,3} の網で埋まる。

双曲面は無限に広いが、それを有限の円板に押し込むと、外周ぶんの面積が縁の一点に向けて際限なく圧縮される。境界に近いタイルほど見た目が小さく潰れる（双曲計量では同じ大きさ）。縁そのものは無限遠にあたり、どのタイルも縁には到達しない。

タイルを縮小しながら割り続けると、周期を持たないのに5回対称を宿す敷き詰めができる。ペンローズタイル。

ペンローズタイリングは、2種類のひし形（または鋭・鈍の黄金三角形）で平面を隙間なく敷き詰めるのに、決して周期的にならない非周期タイリング。作り方の一つがデフレーション（膨張・分割）で、各三角形を黄金比 φ の比率でより小さな三角形に割り、それを繰り返す。辺の長さの比に φ が現れ、5回・10回対称の局所構造を持つ。周期がないので並進対称はゼロだが、任意の有限パターンが図全体に無限回現れる（反復性）。1982年に発見された準結晶は、この非周期だが秩序ある構造を物質が取った例で、結晶学的制限定理の「例外」として2011年のノーベル化学賞につながった。

非周期は、分割（デフレーション）でも作れるし、隣接の制約でも作れる。Wang タイルは辺の色が一致しないと置けないという制約だけで、適切なタイル集合を選ぶと周期的には敷けなくなる。