非欧几里得庞加莱圆盘全景Canvas 双曲莫比乌斯群生成艺术在 19 世纪中叶高斯Gauss、罗巴切夫斯基Lobachevsky与玻耶Bolyai打破了统治人类两千余年的欧几里得第五公设平行公设创立了一座颠覆直觉常识的全新宇宙——双曲非欧几何学Hyperbolic Non-Euclidean Geometry。在双曲几何中经过一条直线外的一点可以引出无穷多条平行线三角形的内角和严格小于 $180^\circ$空间在每一个方向上都在呈指数级“发散膨胀”法国数学大师亨利·庞加莱Henri Poincaré创造了一个将整个无限广袤的双曲二维宇宙、完美塞入一个有限单位圆形之内的绝妙数学模型——庞加莱圆盘模型Poincaré Disk Model。荷兰著名错觉版画大师埃舍尔M.C. Escher以此为灵感创作出了震惊世界的传世杰作《圆极限Circle Limit》系列无数只恶魔与天使从圆盘中心向外层层铺砌越靠近圆盘边界物体的物理尺寸看起来越来越微小无限压缩但在双曲几何内在度量下每一只恶魔和天使的真实身材尺寸完全严格相等在生成艺术领域用复数莫比乌斯群变换Möbius Transformations在 Canvas 中驱动庞加莱圆盘的无限平移漫游是纯粹数学代数与无限几何宇宙最完美的视觉共振。本文将深入推导庞加莱圆盘的双曲测地线方程与莫比乌斯群保圆映射并在 HTML5 Canvas 中手写一个支持鼠标拖拽无限漫游的先锋双曲艺术引擎。庞加莱圆盘的双曲度量与测地线代数方程在复平面单位圆盘 $\mathbb{D} { z \in \mathbb{C} : |z| 1 }$ 内部双曲微分线元度量Riemannian Metric定义为$$ds \frac{2 |dz|}{1 - |z|^2} \frac{2 \sqrt{dx^2 dy^2}}{1 - (x^2 y^2)}$$当 $z \to 0$中心$ds \approx 2 |dz|$接近常规欧氏距离当 $|z| \to 1$逼近边界圆分母趋向于零$ds \to \infty$边界圆在双曲度量下距离中心无穷远。1. 双曲直线测地线 Geodesics的几何特征在庞加莱圆盘中两点之间的“最短直线Geodesic”表现为一条在端点处与单位边界圆严格正交垂直相交 $90^\circ$的欧氏圆弧或穿过圆盘中心的欧氏直径直线2. 双曲等距同构复数莫比乌斯变换Möbius Automorphisms保持庞加莱圆盘双曲距离严格不变的刚体平移与旋转群完全由保形莫比乌斯变换给出$$f(z) e^{i\theta} \frac{z - z_0}{1 - \overline{z_0} z}, \quad \text{其中 } |z_0| 1, \theta \in [0, 2\pi)$$该变换将圆盘内的任意点 $z_0$ 无损平移至圆盘正中心 $z 0$同时完美保持所有双曲角度与正交性不变[复平面单位圆盘 D: |z| 1] │ ▼ (用户使用鼠标在圆盘内拖拽向量 deltaZ) [对圆盘内所有双曲三角形顶点施加莫比乌斯平移: f(z) (z - z0) / (1 - conj(z0)*z)] │ ▼ (求得变换后的新复数坐标并计算正交双曲圆弧) [呈现越靠近边界越无限细分、全局等距无限漫游的埃舍尔《圆极限》奇景]纯 TypeScript 双曲几何与莫比乌斯变换引擎// poincare-hyperbolic-engine.ts export class Complex { public r: number; public i: number; constructor(r 0, i 0) { this.r r; this.i i; } public add(c: Complex): Complex { return new Complex(this.r c.r, this.i c.i); } public sub(c: Complex): Complex { return new Complex(this.r - c.r, this.i - c.i); } public mul(c: Complex): Complex { return new Complex(this.r * c.r - this.i * c.i, this.r * c.i this.i * c.r); } public div(c: Complex): Complex { const denom c.r * c.r c.i * c.i || 1e-8; return new Complex( (this.r * c.r this.i * c.i) / denom, (this.i * c.r - this.r * c.i) / denom ); } public conj(): Complex { return new Complex(this.r, -this.i); } public normSq(): number { return this.r * this.r this.i * this.i; } } export class PoincareDiskEngine { // 1. 核心莫比乌斯双曲平移变换 (将 z 按照平移基点 z0 移动) public static mobiusTranslate(z: Complex, z0: Complex): Complex { // f(z) (z - z0) / (1 - conj(z0) * z) const num z.sub(z0); const denom new Complex(1, 0).sub(z0.conj().mul(z)); return num.div(denom); } // 2. 求解穿过两点 z1, z2 且正交于单位圆的双曲圆弧几何参数 public static computeGeodesicArc(z1: Complex, z2: Complex): { cx: number; cy: number; radius: number; isLine: boolean } { // 若两点与原点共线为一条穿过中心的欧氏直线 const cross z1.r * z2.i - z1.i * z2.r; if (Math.abs(cross) 1e-5) { return { cx: 0, cy: 0, radius: 0, isLine: true }; } // 求解正交圆心坐标 (利用三点共圆与对偶反演点) const d1 1 z1.normSq(); const d2 1 z2.normSq(); const det 2 * cross; const cx (z2.i * d1 - z1.i * d2) / det; const cy (z1.r * d2 - z2.r * d1) / det; const radius Math.sqrt(cx * cx cy * cy - 1); return { cx, cy, radius, isLine: false }; } }Canvas 庞加莱双曲平铺与无限漫游艺术画卷// poincare-canvas-stage.ts export class PoincareCanvasStage { private canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; private centerZ new Complex(0, 0); // 当前双曲视点中心 private baseTessellationPoints: Complex[][] []; constructor(canvas: HTMLCanvasElement) { this.canvas canvas; this.ctx canvas.getContext(2d)!; this.generateHyperbolicGrid(); this.bindMousePan(); } private generateHyperbolicGrid() { // 生成标准的 {p, q} {7, 3} 双曲正七边形密铺初始顶点 const p 7; for (let i 0; i p; i) { const angle1 (i * 2 * Math.PI) / p; const angle2 ((i 1) * 2 * Math.PI) / p; const r 0.55; const p1 new Complex(r * Math.cos(angle1), r * Math.sin(angle1)); const p2 new Complex(r * Math.cos(angle2), r * Math.sin(angle2)); this.baseTessellationPoints.push([p1, p2]); } } private bindMousePan() { // 鼠标在圆盘内拖拽实时在双曲空间中无限平移漫游 this.canvas.addEventListener(pointermove, (e) { if (e.buttons 1) { const rect this.canvas.getBoundingClientRect(); const diskRadius Math.min(rect.width, rect.height) * 0.45; const nx (e.clientX - rect.left - rect.width / 2) / diskRadius; const ny (e.clientY - rect.top - rect.height / 2) / diskRadius; if (nx * nx ny * ny 0.9) { this.centerZ new Complex(nx * 0.4, ny * 0.4); } } }); } public render() { const w this.canvas.width; const h this.canvas.height; const cx w / 2; const cy h / 2; const R Math.min(w, h) * 0.42; this.ctx.fillStyle #05070d; this.ctx.fillRect(0, 0, w, h); // 1. 绘制庞加莱单位圆边界 this.ctx.beginPath(); this.ctx.arc(cx, cy, R, 0, 2 * Math.PI); this.ctx.fillStyle rgba(15, 23, 42, 0.9); this.ctx.fill(); this.ctx.strokeStyle #38bdf8; this.ctx.lineWidth 2.0; this.ctx.stroke(); // 2. 对所有双曲顶点施加莫比乌斯平移并绘制正交测地线 for (const [rawP1, rawP2] of this.baseTessellationPoints) { const z1 PoincareDiskEngine.mobiusTranslate(rawP1, this.centerZ); const z2 PoincareDiskEngine.mobiusTranslate(rawP2, this.centerZ); const arc PoincareDiskEngine.computeGeodesicArc(z1, z2); this.ctx.strokeStyle #818cf8; this.ctx.lineWidth 1.4; this.ctx.beginPath(); if (arc.isLine) { this.ctx.moveTo(cx z1.r * R, cy z1.i * R); this.ctx.lineTo(cx z2.r * R, cy z2.i * R); } else { // 绘制双曲圆弧 this.ctx.arc(cx arc.cx * R, cy arc.cy * R, arc.radius * R, 0, 2 * Math.PI); } this.ctx.stroke(); } } }总结庞加莱圆盘是非欧几里得几何向人类展示的无限压缩空间奇迹。看透双曲度量张量与复数莫比乌斯保形变换的代数本质用纯前端 Canvas 引擎重现埃舍尔《圆极限》中的无限对称铺砖与实时双曲平移漫游我们得以亲手触摸到超越欧几里得平直空间的无限深邃宇宙为先锋数字生成艺术赋予了源自现代微分几何殿堂的至高美感。