2f:T40b2,{ // --- 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 = 2, q = 3, r = 7 --- const pControl = createParameterControl("p", 2); 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 --- // Changed to buttons with the same basic style as the "+1" button. 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 tVal = Math.min(1, elapsed / duration); tSlider.value = interp(tVal); update(); if (tVal >= 1) { currentAnimation.stop(); currentAnimation = null; return true; } }); } // Adjust duration (in ms) to control the animation speed. labelDisk.onclick = () => { animateSliderTo(0, 1000); }; labelUHP.onclick = () => { animateSliderTo(0.995, 1000); }; // --- t–slider for the Möbius transform parameter --- const tSlider = html` `; // Cancel any active animation if the user starts dragging. tSlider.addEventListener("mousedown", () => { if (currentAnimation) { currentAnimation.stop(); currentAnimation = null; } }); tSlider.addEventListener("touchstart", () => { if (currentAnimation) { currentAnimation.stop(); currentAnimation = null; } }); // Wrap slider and labels in a container. const tSliderContainer = html`

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

`; // --- Assume ComplexPlane utilities are available --- const { cAdd, cSub, cMul, cDiv, cConj, cAbs, cScale, cSqrt, applyMobius, mobiusCompose, mobiusInverse, triangleArea, ensureOrientation, mobiusFromTriples, computeFixedPoints, T_from_a, T_from_a_inv, geodesicSegmentPointsRaw, trianglePolygonPointsRaw, fullGeodesicEndpoints, fullGeodesicPointsRaw, reflectPoint, reflectTriangle } = ComplexPlane; // --- One-parameter Möbius transform --- 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 } }; } // --- Set Up Disk and SVG --- 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"); // New groups for invariant axes: const axisGroup = zoomContainer.append("g").attr("class", "axis-group"); // for fixed axes const axisHoverGroup = zoomContainer.append("g").attr("class", "axis-hover-group"); // for dynamic (hover) axis 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 }; } // --- Store the fundamental (base) triangle --- let fundamentalTriangle = []; // --- Update Tiling and Redraw (augmented to compute each tile’s invariant axis) --- function updateTiling() { // Clear any fixed axes when parameters change axisGroup.selectAll("*").remove(); 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) { // Adjust orientation to match the fundamental triangle tri = ensureOrientation(tri, triangleArea(fundamentalTriangle)); const key = tri.map(v => v.x.toFixed(3) + "," + v.y.toFixed(3)).join(";"); if (!seenTriangles.has(key)) { seenTriangles.add(key); // Compute the transformation T mapping the fundamental triangle to this triangle. const T_tile = mobiusFromTriples(fundamentalTriangle, tri); // Compute the invariant axis as the geodesic joining the two fixed points. const axis = computeFixedPoints(T_tile); tiling.push({ vertices: tri, depth, T: T_tile, axis }); 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) }; } fundamentalTriangle = [A, B, C]; // Initialize the tiling from the fundamental triangle. let queue = []; if (isInside(fundamentalTriangle) && addTriangle(fundamentalTriangle, 0)) { queue.push({ vertices: fundamentalTriangle, depth: 0 }); } while (queue.length > 0) { const { vertices, depth } = queue.shift(); // Use the provided reflectTriangle (which returns new vertices) to generate reflected triangles. 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 }); } } } // Now add polygon and edge arcs. tiling.forEach(tile => { tile.polygon = trianglePolygonPointsRaw(tile.vertices); }); edges.forEach(edge => { edge.arc = fullGeodesicPointsRaw(edge.v1, edge.v2, 80); }); update(); } // === Drawing invariant set for tile: either hyperbolic geodesic or rotation circle === function drawAxis(tile, group, style) { // Use the current global transformation. const T_global = T_param(+tSlider.value); // Check if the transformation is elliptic: if the two fixed points nearly coincide. const fpDiff = cAbs(cSub(tile.axis[0], tile.axis[1])); if (fpDiff < 0.01) { // Elliptic: use the average as the unique fixed point. const fixed = tile.axis[0]; const svgFixed = diskToSVG(applyMobius(T_global, fixed)); // Compute the centroid of the tile (after global transform). const transformedVertices = tile.vertices.map(pt => diskToSVG(applyMobius(T_global, pt))); const cx = d3.mean(transformedVertices, d => d.x); const cy = d3.mean(transformedVertices, d => d.y); const centroid = { x: cx, y: cy }; const rad = Math.sqrt((centroid.x - svgFixed.x) ** 2 + (centroid.y - svgFixed.y) ** 2); group.append("circle") .attr("cx", svgFixed.x) .attr("cy", svgFixed.y) .attr("r", rad) .attr("stroke", "blue") // different color for elliptic rotation circle .attr("stroke-width", 2) .attr("fill", "none") .attr("class", "axis-path"); } else { // Hyperbolic: draw invariant geodesic arc between the two fixed points. const arcPts = fullGeodesicPointsRaw(tile.axis[0], tile.axis[1], 100); const transformedPts = arcPts.map(pt => diskToSVG(applyMobius(T_global, pt))); group.append("path") .attr("d", d3.line().x(d => d.x).y(d => d.y)(transformedPts)) .attr("stroke", style.stroke) .attr("stroke-width", style.strokeWidth) .attr("fill", "none") .attr("class", "axis-path"); } } function clearHoverAxis() { axisHoverGroup.selectAll("*").remove(); } function handleTileHover(tile) { clearHoverAxis(); drawAxis(tile, axisHoverGroup, { stroke: "green", strokeWidth: 2 }); } function fixHoverAxis(tile) { drawAxis(tile, axisGroup, { stroke: "green", strokeWidth: 2 }); } // === Main update drawing routine === function update() { const tVal = +tSlider.value; const T_global = T_param(tVal); function transformPoints(points) { return points.map(pt => diskToSVG(applyMobius(T_global, pt))); } boundaryGroup.selectAll("*").remove(); tileGroup.selectAll("*").remove(); fullArcGroup.selectAll("*").remove(); redArcGroup.selectAll("*").remove(); defs.selectAll("*").remove(); gradientCounter = 0; axisHoverGroup.selectAll("*").remove(); 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"; const tilePath = 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"); tilePath.datum(tile) .on("mouseover", (event, d) => { handleTileHover(d); }) .on("mouseout", (event, d) => { clearHoverAxis(); }) .on("click", (event, d) => { fixHoverAxis(d); }); }); edges.forEach(edge => { if (edge.depth !== 0) { const pts = transformPoints(edge.arc); const dStr = d3.line().x(d => d.x).y(d => d.y)(pts); const endpoints = [pts[0], pts[pts.length - 1]]; const gradId = "grad" + (gradientCounter++); const grad = defs.append("linearGradient") .attr("id", gradId) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", endpoints[0].x).attr("y1", endpoints[0].y) .attr("x2", endpoints[1].x).attr("y2", endpoints[1].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(geodesicSegmentPointsRaw(edge.v1, edge.v2)); const dStr = d3.line().x(d => d.x).y(d => d.y)(pts); 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(); svg.call( d3.zoom() .scaleExtent([0.5, 10]) .on("zoom", event => { zoomContainer.attr("transform", event.transform); }) ); const container = html`

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

`; return container; }30:T2919,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); } function cScale(z, s) { return { x: z.x * s, y: z.y * s }; } function cSqrt(z) { const r = Math.sqrt(cAbs(z)); const theta = Math.atan2(z.y, z.x) / 2; return { x: r * Math.cos(theta), y: r * Math.sin(theta) }; } // --- Compute the signed (double) area of a triangle (to check orientation) --- function triangleArea(tri) { // tri: array of 3 points {x, y} const [p, q, r] = tri; return (q.x - p.x) * (r.y - p.y) - (q.y - p.y) * (r.x - p.x); } // Ensure the triangle has the same orientation as a reference (here, the fundamental triangle) function ensureOrientation(tri, refOrientation) { if (triangleArea(tri) * refOrientation < 0) { // swap vertices 1 and 2 if the orientation is reversed return [tri[0], tri[2], tri[1]]; } return tri; } // --- Compute a Möbius transformation that sends a triple src = [z1,z2,z3] to dst = [w1,w2,w3] --- // We use the standard method via the cross-ratio. function mobiusFromTriples(src, dst) { // First, map src to (0,1,∞). // The map tau(z) = ((z - z1)/(z - z3)) * ((z2 - z3)/(z2 - z1)) // (No matrix is needed if we compute the corresponding matrix forms as below.) // Write tau in matrix form: M_tau = [ k, -k * z1; 1, -z3 ], where k = (z2 - z3)/(z2 - z1). const k = cDiv(cSub(src[1], src[2]), cSub(src[1], src[0])); const M_tau = { a: k, b: cScale(cMul(k, src[0]), -1), c: { x: 1, y: 0 }, d: cScale(src[2], -1) }; // Next, map (0,1,∞) to dst. For a Möbius transformation h such that // h(0) = w1, h(1) = w2, and h(∞) = w3, we set: // h(z) = (A * z + B) / (C * z + D) // with B = w1, D = 1, and A = w3 * C from h(∞) = A/C = w3. // Then h(1) = (A+B)/(C+1) = w2 implies C = (w2 - w1)/(w3 - w2). const C = cDiv(cSub(dst[1], dst[0]), cSub(dst[2], dst[1])); const A = cMul(dst[2], C); const M_h = { a: A, b: dst[0], c: C, d: { x: 1, y: 0 } }; // Compose these two: T = h ∘ tau. function mobiusCompose(T1, T2) { // Return the Möbius transformation representing T1 ∘ T2. 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)) }; } return mobiusCompose(M_h, M_tau); } // --- Compute fixed points of a (holomorphic) Möbius transformation T --- // They satisfy z = (a z + b)/(c z + d), which leads to: c z^2 + (d - a) z - b = 0. function computeFixedPoints(T) { // Assume T.c is not zero (otherwise one fixed point is at infinity). const aMinusD = cSub(T.a, T.d); const aMinusD2 = cMul(aMinusD, aMinusD); const fourBC = cMul({ x: 4, y: 0 }, cMul(T.b, T.c)); const disc = cAdd(aMinusD2, fourBC); const sqrtDisc = cSqrt(disc); const twoC = cScale(T.c, 2); const fixed1 = cDiv(cAdd(aMinusD, sqrtDisc), twoC); const fixed2 = cDiv(cSub(aMinusD, sqrtDisc), twoC); return [fixed1, fixed2]; } // --- 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)); } return { cAdd, cSub, cMul, cDiv, cConj, cAbs, cScale, cSqrt, applyMobius, mobiusCompose, mobiusInverse, triangleArea, ensureOrientation, mobiusFromTriples, computeFixedPoints, T_from_a, T_from_a_inv, geodesicSegmentPointsRaw, trianglePolygonPointsRaw, fullGeodesicEndpoints, fullGeodesicPointsRaw, reflectPoint, reflectTriangle }; }; 31:[] 2d:{"title":"Hyperbolic billiards","cells":[{"id":0,"value":"# Hyperbolic billiards","pinned":false,"hidden":false,"mode":"md"},{"id":290,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}