2e:null 2f:["$","title",null,{"children":"Hyperbolic surfaces | Yao Liu | Observable"}] 34:T3ce6,{ // --- Create a parameter control widget without a box --- function createParameterControl(name, defaultValue) { const container = html`

${name} = ${defaultValue}

`; const slider = container.querySelector("input[type='range']"); const incButton = container.querySelector(".inc"); const toggle = container.querySelector(".toggleInfinity"); const valueDisplay = container.querySelector(".currentValue"); let isInfinite = false; function updateDisplay() { valueDisplay.innerHTML = `${name} = ${isInfinite ? "∞" : slider.value}`; updateTiling(); } slider.oninput = updateDisplay; incButton.onclick = () => { if (!isInfinite) { let newValue = +slider.value + 1; if (newValue > +slider.max) { slider.max = newValue; } slider.value = newValue; updateDisplay(); } }; toggle.onclick = () => { isInfinite = !isInfinite; slider.disabled = isInfinite; incButton.disabled = isInfinite; toggle.style.color = isInfinite ? "blue" : ""; updateDisplay(); }; return { container, slider, getValue: () => isInfinite ? Infinity : +slider.value, getMin: () => +slider.min }; } // --- Create parameter controls with default values: p = 4, q = 3, r = 7 --- const pControl = createParameterControl("p", 4); const qControl = createParameterControl("q", 3); const rControl = createParameterControl("r", 7); // --- Create a toggle for triangle placement mode --- const placementToggle = html` `; let alternatePlacement = false; placementToggle.onclick = () => { alternatePlacement = !alternatePlacement; placementToggle.textContent = alternatePlacement ? "Fix p-vertex" : "Free p-vertex"; updateTiling(); }; // --- Create clickable labels for the Möbius transform parameter slider --- const labelDisk = html``; const labelUHP = html``; // --- Animation logic for the slider --- let currentAnimation = null; function animateSliderTo(target, duration) { if (currentAnimation) currentAnimation.stop(); const startValue = +tSlider.value; const interp = d3.interpolateNumber(startValue, target); const startTime = Date.now(); currentAnimation = d3.timer(function() { const elapsed = Date.now() - startTime; const t = Math.min(1, elapsed / duration); tSlider.value = interp(t); update(); // refresh your drawing with the new slider value if (t >= 1) { currentAnimation.stop(); currentAnimation = null; return true; } }); } labelDisk.onclick = () => { animateSliderTo(0, 1000); }; labelUHP.onclick = () => { animateSliderTo(0.995, 1000); }; // --- t–slider for the Möbius transform parameter --- const tSlider = html` `; tSlider.addEventListener("mousedown", () => { if (currentAnimation) { currentAnimation.stop(); currentAnimation = null; } }); tSlider.addEventListener("touchstart", () => { if (currentAnimation) { currentAnimation.stop(); currentAnimation = null; } }); const tSliderContainer = html`

${labelDisk} ${tSlider} ${labelUHP}

`; // --- Assume ComplexPlane utilities are available --- const { cAdd, cSub, cAbs, applyMobius, mobiusCompose, mobiusInverse, T_from_a, T_from_a_inv, geodesicSegmentPointsRaw, trianglePolygonPointsRaw, fullGeodesicEndpoints, fullGeodesicPointsRaw, reflectPoint, reflectTriangle } = ComplexPlane; function T_param(t) { return { a: { x: 1, y: 0 }, b: { x: 0, y: t }, c: { x: 0, y: t }, d: { x: 1, y: 0 } }; } const height = 600; const diskRadius = height * 0.4; const svg = d3.select(DOM.svg(width, height)) .attr("width", width) .attr("height", height); const zoomContainer = svg.append("g").attr("class", "zoom-container"); const boundaryGroup = zoomContainer.append("g").attr("class", "boundary"); const tileGroup = zoomContainer.append("g").attr("class", "tiles"); const fullArcGroup = zoomContainer.append("g").attr("class", "full-arcs"); const redArcGroup = zoomContainer.append("g").attr("class", "red-arcs"); const defs = svg.append("defs"); let gradientCounter = 0; let tiling = []; let edges = []; const color = "LightSkyBlue"; const scheme = { even: d3.color(color).brighter(0.5).toString(), odd: d3.color(color).brighter(1.5).toString(), outline: d3.color(color).darker(0.5).toString() }; const boundaryPoints = []; const numBoundaryPts = 200; for (let i = 0; i <= numBoundaryPts; i++) { let theta = 2 * Math.PI * i / numBoundaryPts; boundaryPoints.push({ x: Math.cos(theta), y: Math.sin(theta) }); } function diskToSVG(z) { return { x: width / 2 + z.x * diskRadius, y: height / 2 - z.y * diskRadius }; } function updateTiling() { const p_val = pControl.getValue(); const q_val = qControl.getValue(); const r_val = rControl.getValue(); tiling = []; edges = []; let seenTriangles = new Set(); let seenEdges = new Set(); function canonicalEdge(v1, v2) { const s1 = v1.x.toFixed(5) + "," + v1.y.toFixed(5); const s2 = v2.x.toFixed(5) + "," + v2.y.toFixed(5); return s1 < s2 ? s1 + ";" + s2 : s2 + ";" + s1; } function addEdge(v1, v2, depth) { const key = canonicalEdge(v1, v2); if (!seenEdges.has(key)) { seenEdges.add(key); edges.push({ v1, v2, depth }); } } function isInside(tri) { return tri.some(v => cAbs(v) < 0.9); } function addTriangle(tri, depth) { const key = tri.map(v => v.x.toFixed(3) + "," + v.y.toFixed(3)).join(";"); if (!seenTriangles.has(key)) { seenTriangles.add(key); tiling.push({ vertices: tri, depth }); for (let i = 0; i < 3; i++) { addEdge(tri[i], tri[(i + 1) % 3], depth); } return true; } return false; } const p_eff = isFinite(p_val) ? p_val : 1000; const q_eff = isFinite(q_val) ? q_val : 1000; const r_eff = isFinite(r_val) ? r_val : 1000; const angleA = Math.PI / p_eff; const angleB = Math.PI / q_eff; const angleC = Math.PI / r_eff; const side_a = Math.acosh((Math.cos(angleA) + Math.cos(angleB) * Math.cos(angleC)) / (Math.sin(angleB) * Math.sin(angleC))); const side_b = Math.acosh((Math.cos(angleB) + Math.cos(angleA) * Math.cos(angleC)) / (Math.sin(angleA) * Math.sin(angleC))); const side_c = Math.acosh((Math.cos(angleC) + Math.cos(angleA) * Math.cos(angleB)) / (Math.sin(angleA) * Math.sin(angleB))); let A, B, C; if (!alternatePlacement) { A = { x: 0, y: 0 }; B = { x: -Math.tanh(side_c / 2) * Math.sin(Math.PI / p_eff), y: Math.tanh(side_c / 2) * Math.cos(Math.PI / p_eff) }; C = { x: 0, y: Math.tanh(side_b / 2) }; } else { const h = Math.asinh((Math.sinh(side_a) * Math.sinh(side_c) * Math.sin(angleB)) / Math.sinh(side_b)); const a0 = Math.acosh(Math.cosh(side_c) / Math.cosh(h)); const c0 = Math.acosh(Math.cosh(side_a) / Math.cosh(h)); A = { x: 0, y: -Math.tanh(a0 / 2) }; B = { x: -Math.tanh(h / 2), y: 0 }; C = { x: 0, y: Math.tanh(c0 / 2) }; } let fundamental = [A, B, C]; let queue = []; if (isInside(fundamental)) { addTriangle(fundamental, 0); queue.push({ vertices: fundamental, depth: 0 }); } while (queue.length > 0) { const { vertices, depth } = queue.shift(); for (let i = 0; i < 3; i++) { const reflected = reflectTriangle(vertices, i); if (isInside(reflected) && addTriangle(reflected, depth + 1)) { queue.push({ vertices: reflected, depth: depth + 1 }); } } } tiling.forEach(tile => { tile.polygon = trianglePolygonPointsRaw(tile.vertices); }); edges.forEach(edge => { const fullArcPts = fullGeodesicPointsRaw(edge.v1, edge.v2, 80); edge.arc = [ fullArcPts[0], fullArcPts[Math.floor(fullArcPts.length / 2)], fullArcPts[fullArcPts.length - 1] ]; const segPts = geodesicSegmentPointsRaw(edge.v1, edge.v2); edge.redArc = [ segPts[0], segPts[Math.floor(segPts.length / 2)], segPts[segPts.length - 1] ]; }); update(); } // --- New helper functions for drawing an arc from three points --- function modAngle(a) { return (a % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI); } function computeCircleCenterAndRadius(p1, p2, p3) { const x1 = p1.x, y1 = p1.y; const x2 = p2.x, y2 = p2.y; const x3 = p3.x, y3 = p3.y; const D = 2 * (x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)); if (Math.abs(D) < 1e-6) return null; const Ux = ((x1 * x1 + y1 * y1) * (y2 - y3) + (x2 * x2 + y2 * y2) * (y3 - y1) + (x3 * x3 + y3 * y3) * (y1 - y2)) / D; const Uy = ((x1 * x1 + y1 * y1) * (x3 - x2) + (x2 * x2 + y2 * y2) * (x1 - x3) + (x3 * x3 + y3 * y3) * (x2 - x1)) / D; const center = { x: Ux, y: Uy }; const radius = Math.hypot(p1.x - Ux, p1.y - Uy); return { center, radius }; } function arcFromThreePoints(p1, pMid, p2) { const circle = computeCircleCenterAndRadius(p1, pMid, p2); if (!circle) return `M${p1.x},${p1.y} L${p2.x},${p2.y}`; const { center, radius } = circle; const a1 = modAngle(Math.atan2(p1.y - center.y, p1.x - center.x)); const aMid = modAngle(Math.atan2(pMid.y - center.y, pMid.x - center.x)); const a2 = modAngle(Math.atan2(p2.y - center.y, p2.x - center.x)); const dCounter = (a2 - a1 + 2 * Math.PI) % (2 * Math.PI); const diffMid = (aMid - a1 + 2 * Math.PI) % (2 * Math.PI); let largeArcFlag, sweepFlag; if (diffMid <= dCounter) { largeArcFlag = dCounter > Math.PI ? 1 : 0; sweepFlag = 1; } else { const dClock = (a1 - a2 + 2 * Math.PI) % (2 * Math.PI); largeArcFlag = dClock > Math.PI ? 1 : 0; sweepFlag = 0; } return `M${p1.x},${p1.y} A${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${p2.x},${p2.y}`; } function update() { const t = +tSlider.value; const T_global = T_param(t); function transformPoints(points) { return points.map(pt => { const p = applyMobius(T_global, pt); return diskToSVG(p); }); } boundaryGroup.selectAll("*").remove(); tileGroup.selectAll("*").remove(); fullArcGroup.selectAll("*").remove(); redArcGroup.selectAll("*").remove(); defs.selectAll("*").remove(); gradientCounter = 0; boundaryGroup.append("path") .attr("d", d3.line().x(d => d.x).y(d => d.y)(transformPoints(boundaryPoints))) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 2) .style("vector-effect", "non-scaling-stroke"); tiling.forEach(tile => { const pts = transformPoints(tile.polygon); const dStr = "M" + pts.map(pt => [pt.x, pt.y].join(",")).join(" L") + " Z"; tileGroup.append("path") .attr("d", dStr) .attr("fill", tile.depth === 0 ? "red" : (tile.depth % 2 === 0 ? scheme.even : scheme.odd)) .attr("stroke", tile.depth === 0 ? "red" : "rgba(0,0,0,0.15)") .attr("stroke-width", tile.depth === 0 ? 5 : 0.5) .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .style("vector-effect", "non-scaling-stroke"); }); edges.forEach(edge => { if (edge.depth !== 0) { const pts = transformPoints(edge.arc); const dStr = arcFromThreePoints(pts[0], pts[1], pts[2]); const gradId = "grad" + (gradientCounter++); const grad = defs.append("linearGradient") .attr("id", gradId) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", pts[0].x).attr("y1", pts[0].y) .attr("x2", pts[2].x).attr("y2", pts[2].y); grad.append("stop").attr("offset", "0%").attr("stop-color", scheme.outline).attr("stop-opacity", 0); grad.append("stop").attr("offset", "25%").attr("stop-color", scheme.outline).attr("stop-opacity", 0.8); grad.append("stop").attr("offset", "75%").attr("stop-color", scheme.outline).attr("stop-opacity", 0.8); grad.append("stop").attr("offset", "100%").attr("stop-color", scheme.outline).attr("stop-opacity", 0); fullArcGroup.append("path") .attr("d", dStr) .attr("stroke", `url(#${gradId})`) .attr("stroke-width", 1) .attr("fill", "none") .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .style("shape-rendering", "geometricPrecision") .style("vector-effect", "non-scaling-stroke"); } }); edges.forEach(edge => { if (edge.depth === 0) { const pts = transformPoints(edge.redArc); const dStr = arcFromThreePoints(pts[0], pts[1], pts[2]); redArcGroup.append("path") .attr("d", dStr) .attr("stroke", "red") .attr("stroke-width", 2) .attr("fill", "none") .style("vector-effect", "non-scaling-stroke"); } }); } tSlider.oninput = () => { requestAnimationFrame(update); }; updateTiling(); // --- Modified zoom behavior: restrict horizontal dragging while preserving zoom about the pointer --- // We record the initial average pointer x-coordinate (initialPivotX) and its corresponding scene x (initialPivotSceneX) // on zoom start (using d3.pointers). Then during zoom events, we compute: // newTx = initialPivotX - k * initialPivotSceneX // This helps keep the horizontal anchor fixed during the gesture. let initialPivotX = null; let initialPivotSceneX = null; svg.call( d3.zoom() .scaleExtent([0.5, 10]) .on("start", event => { const pointers = d3.pointers(event, svg.node()); initialPivotX = d3.mean(pointers, d => d[0]); initialPivotSceneX = (initialPivotX - event.transform.x) / event.transform.k; }) .on("zoom", event => { const k = event.transform.k; const newTx = initialPivotX - k * initialPivotSceneX; zoomContainer.attr("transform", `translate(${newTx},${event.transform.y}) scale(${k})`); }) ); const container = html`

${pControl.container} ${qControl.container} ${rControl.container} ${tSliderContainer} ${placementToggle} ${svg.node()}

`; return container; } 35:T2493,ComplexPlane = { // --- Complex Arithmetic --- function cAdd(z1, z2) { return { x: z1.x + z2.x, y: z1.y + z2.y }; } function cSub(z1, z2) { return { x: z1.x - z2.x, y: z1.y - z2.y }; } function cMul(z1, z2) { return { x: z1.x * z2.x - z1.y * z2.y, y: z1.x * z2.y + z1.y * z2.x }; } function cDiv(z1, z2) { const denom = z2.x * z2.x + z2.y * z2.y; return { x: (z1.x * z2.x + z1.y * z2.y) / denom, y: (z1.y * z2.x - z1.x * z2.y) / denom }; } function cConj(z) { return { x: z.x, y: -z.y }; } function cAbs(z) { return Math.sqrt(z.x * z.x + z.y * z.y); } // --- Basic Möbius Transforms --- // T(z) = (a*z + b)/(c*z + d) function applyMobius(T, z) { // const { cAdd, cMul, cDiv } = this; const num = cAdd(cMul(T.a, z), T.b); const den = cAdd(cMul(T.c, z), T.d); return cDiv(num, den); } function mobiusCompose(T1, T2) { // T1 ◦ T2 const { cAdd, cMul } = this; return { a: cAdd(cMul(T1.a, T2.a), cMul(T1.b, T2.c)), b: cAdd(cMul(T1.a, T2.b), cMul(T1.b, T2.d)), c: cAdd(cMul(T1.c, T2.a), cMul(T1.d, T2.c)), d: cAdd(cMul(T1.c, T2.b), cMul(T1.d, T2.d)) }; } function mobiusInverse(T) { // If T = (a, b; c, d), T^-1 = 1/det * ( d, -b; -c, a ) const { cMul, cAbs, cAdd } = this; const { a, b, c, d } = T; const ad = cMul(a, d); const bc = cMul(b, c); const det = { x: ad.x - bc.x, y: ad.y - bc.y }; // (ad - bc) const cDivByW = (z, w) => { const denom = w.x * w.x + w.y * w.y; return { x: (z.x * w.x + z.y * w.y) / denom, y: (z.y * w.x - z.x * w.y) / denom }; }; return { a: cDivByW(d, det), b: cDivByW({ x: -b.x, y: -b.y }, det), c: cDivByW({ x: -c.x, y: -c.y }, det), d: cDivByW(a, det) }; } // T_from_a sends point 'a' -> 0; T_from_a_inv sends 0 -> a function T_from_a(a) { const { cConj } = this; return { a: { x: 1, y: 0 }, b: { x: -a.x, y: -a.y }, c: cConj(a), d: { x: 1, y: 0 } }; } function T_from_a_inv(a) { // const { cConj } = this; return { a: { x: 1, y: 0 }, b: { x: a.x, y: a.y }, c: cConj(a), d: { x: 1, y: 0 } }; } // --- Geometry Helper Functions (unchanged) --- function geodesicSegmentPointsRaw(v1, v2) { const eps = 1e-6; const det = Math.abs(v1.x * v2.y - v2.x * v1.y); const numPoints = 80; if(det < eps) { let points = []; for(let i = 0; i <= numPoints; i++){ let t = i / numPoints; points.push({ x: v1.x*(1-t) + v2.x*t, y: v1.y*(1-t) + v2.y*t }); } return points; } else { const v1abs2 = v1.x*v1.x+v1.y*v1.y; const v2abs2 = v2.x*v2.x+v2.y*v2.y; const D = v1.x*v2.y - v2.x*v1.y; const u = (((v1abs2+1)/2)*v2.y - ((v2abs2+1)/2)*v1.y)/D; const w = ((v1.x*((v2abs2+1)/2)-v2.x*((v1abs2+1)/2)))/D; const C = { x: u, y: w }; const Rcircle = Math.sqrt((v1.x - C.x)**2 + (v1.y - C.y)**2); let theta1 = Math.atan2(v1.y-C.y, v1.x-C.x); let theta2 = Math.atan2(v2.y-C.y, v2.x-C.x); while(theta2 - theta1 > Math.PI) theta2 -= 2*Math.PI; while(theta2 - theta1 < -Math.PI) theta2 += 2*Math.PI; let points = []; for(let i = 0; i <= numPoints; i++){ const t = theta1 + (theta2 - theta1)*(i/numPoints); points.push({ x: C.x + Rcircle*Math.cos(t), y: C.y + Rcircle*Math.sin(t) }); } return points; } } function trianglePolygonPointsRaw(tri) { let pts = []; for(let i = 0; i < 3; i++){ let seg = geodesicSegmentPointsRaw(tri[i], tri[(i+1)%3]); if(i > 0) seg.shift(); pts = pts.concat(seg); } return pts; } function fullGeodesicEndpoints(v1, v2) { if(Math.abs(v1.x*v2.y-v2.x*v1.y) < 1e-6){ const v = cAbs(v1)>1e-6 ? v1 : v2; const d = cAbs(v); const norm = { x: v.x/d, y: v.y/d }; return { p1: norm, p2: { x: -norm.x, y: -norm.y } }; } else { const v1abs2 = v1.x*v1.x+v1.y*v1.y; const v2abs2 = v2.x*v2.x+v2.y*v2.y; const D = v1.x*v2.y - v2.x*v1.y; const u = (((v1abs2+1)/2)*v2.y - ((v2abs2+1)/2)*v1.y) / D; const w = ((v1.x*((v2abs2+1)/2) - v2.x*((v1abs2+1)/2)))/D; const C = { x: u, y: w }; const dC = Math.sqrt(C.x*C.x+C.y*C.y); const M = { x: C.x/(dC*dC), y: C.y/(dC*dC) }; const L = Math.sqrt(1-1/(dC*dC)); const u_perp = { x: -C.y/dC, y: C.x/dC }; const p1 = { x: M.x+L*u_perp.x, y: M.y+L*u_perp.y }; const p2 = { x: M.x-L*u_perp.x, y: M.y-L*u_perp.y }; return { p1, p2 }; } } function fullGeodesicPointsRaw(v1, v2, numPoints = 80) { const eps = 1e-6; if(Math.abs(v1.x*v2.y-v2.x*v1.y)Math.PI) theta2-=2*Math.PI; while(theta2-theta1<-Math.PI) theta2+=2*Math.PI; let pts = []; for(let i = 0; i <= numPoints; i++){ let theta = theta1+(theta2-theta1)*(i/numPoints); pts.push({ x: C.x+Rcircle*Math.cos(theta), y: C.y+Rcircle*Math.sin(theta) }); } return pts; } } function reflectPoint(z, A, B) { const D = A.x*B.y - B.x*A.y; if(Math.abs(D)<1e-6){ const dx = B.x-A.x, dy = B.y-A.y; const t = ((z.x-A.x)*dx+(z.y-A.y)*dy)/(dx*dx+dy*dy); const proj = { x: A.x+t*dx, y: A.y+t*dy }; return { x: 2*proj.x-z.x, y: 2*proj.y-z.y }; } else { const A2 = A.x*A.x+A.y*A.y; const B2 = B.x*B.x+B.y*B.y; const u = (((A2+1)/2)*B.y-((B2+1)/2)*A.y)/D; const v = ((A.x*((B2+1)/2)-B.x*((A2+1)/2)))/D; const C = { x: u, y: v }; const Rcircle = Math.sqrt((A.x-C.x)**2+(A.y-C.y)**2); const diff = cSub(z, C); const factor = (Rcircle*Rcircle)/(diff.x*diff.x+diff.y*diff.y); return cAdd(C,{ x: diff.x*factor, y: diff.y*factor }); } } function reflectTriangle(tri, edgeIndex) { const A = tri[edgeIndex], B = tri[(edgeIndex+1)%3]; return tri.map(v => reflectPoint(v, A, B)); } // --- New helper functions for drawing an arc from three points --- function computeCircleCenterAndRadius(p1, p2, p3) { const x1 = p1.x, y1 = p1.y; const x2 = p2.x, y2 = p2.y; const x3 = p3.x, y3 = p3.y; const D = 2 * (x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)); if (Math.abs(D) < 1e-6) return null; // points are nearly collinear const Ux = ((x1 * x1 + y1 * y1) * (y2 - y3) + (x2 * x2 + y2 * y2) * (y3 - y1) + (x3 * x3 + y3 * y3) * (y1 - y2)) / D; const Uy = ((x1 * x1 + y1 * y1) * (x3 - x2) + (x2 * x2 + y2 * y2) * (x1 - x3) + (x3 * x3 + y3 * y3) * (x2 - x1)) / D; const center = { x: Ux, y: Uy }; const radius = Math.hypot(p1.x - Ux, p1.y - Uy); return { center, radius }; } function arcFromThreePoints(p1, pMid, p2) { const modAngle = a => (a % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI); const circle = computeCircleCenterAndRadius(p1, pMid, p2); if (!circle) return `M${p1.x},${p1.y} L${p2.x},${p2.y}`; const { center, radius } = circle; const a1 = modAngle(Math.atan2(p1.y - center.y, p1.x - center.x)); const aMid = modAngle(Math.atan2(pMid.y - center.y, pMid.x - center.x)); const a2 = modAngle(Math.atan2(p2.y - center.y, p2.x - center.x)); // Compute the counterclockwise angular difference from p1 to p2. const dCounter = (a2 - a1 + 2 * Math.PI) % (2 * Math.PI); const diffMid = (aMid - a1 + 2 * Math.PI) % (2 * Math.PI); let largeArcFlag, sweepFlag; if (diffMid <= dCounter) { // Use the counterclockwise (minor) arc from p1 to p2. largeArcFlag = dCounter > Math.PI ? 1 : 0; sweepFlag = 1; } else { // Otherwise use the clockwise arc. const dClock = (a1 - a2 + 2 * Math.PI) % (2 * Math.PI); largeArcFlag = dClock > Math.PI ? 1 : 0; sweepFlag = 0; } return `M${p1.x},${p1.y} A${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${p2.x},${p2.y}`; } return { cAdd, cSub, cMul, cDiv, cConj, cAbs, applyMobius, mobiusCompose, mobiusInverse, T_from_a, T_from_a_inv, geodesicSegmentPointsRaw, trianglePolygonPointsRaw, fullGeodesicEndpoints, fullGeodesicPointsRaw, reflectPoint, reflectTriangle, arcFromThreePoints }; }; 36:[] 32:{"id":"16709c7560fe21d2","slug":"hyperbolic-surfaces","title":"Hyperbolic surfaces","thumbnail":"20a4b9ab550bd2a9c92cbc89d821f26d51b3667552015a2ca06512b778295680","access_level":"public","create_time":"$D2025-03-14T02:22:34.774Z","update_time":"$D2026-02-27T05:56:12.573Z","view_time":null,"first_public_time":"$D2025-04-03T04:30:30.924Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"490427fcc4ec2c1d","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":"starter_2024"},"version":555,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ae908de8dd38723a","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":null}],"members":[{"type":"team","id":"490427fcc4ec2c1d","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ae908de8dd38723a","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Hyperbolic surfaces","cells":[{"id":0,"value":"# Hyperbolic surfaces","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"