2d:null 2e:["$","title",null,{"children":"Hyperbolic Projections and Tilings | Lao | Observable"}] 33:T58a5,const optionsOf = (menu, selected) => { const groups = d3.groups(menu, d => d.group); return groups.map(([g, items]) => `${items.map(d => ``).join("")}`).join(""); }; // Move the central cylinder to the front of the cylindrical group, leaving the // rest of the menu order untouched. function orderedMenu(menu) { const out = menu.slice(); const inGroup = d => /cylind/i.test(d.group || ""); const first = out.findIndex(inGroup); const idx = out.findIndex(d => inGroup(d) && /central/i.test(`${d.label || ""} ${d.key || ""}`)); if (first < 0 || idx < 0 || idx === first) return out; const [item] = out.splice(idx, 1); out.splice(first, 0, item); return out; } const chartHeight = 650; const chartPadding = 8; // must match hyperbolicChart's default // scale = fittedScale * exp(z). Looked up by projection key, then the rules // below, then bounded-box / projection.kind() / default. Hover the zoom slider // to see the key and kind a projection reports. const defaultZoom = { min: 0, max: 2.4, initial: 0 }; const boundedBoxZoom = { min: 0, max: 2.4, initial: 0 }; // starts fully visible in the column const zoomByProjection = { gans: { min: -2.2, max: 2.4, initial: 0.7 } }; const zoomByKind = { halfplane: { min: 0.0, max: 2.4, initial: 1.0 }, box: { min: 0.0, max: 2.0, initial: 0.7 }, plane: { min: -2.2, max: 2.4, initial: 0.7 }, disk: { min: 0.0, max: 2.4, initial: 0.0 } }; // Per-key fade override, e.g. { fermi: "none" }. Keys appear in the zoom // slider's tooltip. Values: "both" | "y" | "x" | "none". const fadeEdgesByProjection = {}; // --- per-projection speed and default zoom -------------------------------- // Any field may be left out; what's missing falls back to the per-kind tables, // then to the defaults. // speed multiplier on the WASD pan speed; 1 means keySpeedBase px/s // zoom the default zoom: a number in slider units, "min" / "max", or a // relative string like "+0.4" / "-0.3" applied to whatever the // zoom rules computed — which is the readable form for the // cylindrical models, where the range itself shifts per projection // speedMode "tiling" holds the hyperbolic speed fixed, so tiles pass at the // same rate at any zoom; "zoom" holds px/s on screen fixed, so // the tile rate drops as you zoom in // Whichever framing the chart opens at is the one keySpeedBase is measured at, // so speed always reads the same at a projection's own default zoom. const keySpeedBase = 320; const projectionDefaults = { speed: 1, zoom: null, speedMode: "tiling" }; const projectionSettings = { poincare: { speed: 1, zoom: 0 }, gans: { speed: 1, zoom: 0.7 } // e.g. band: { speed: 0.8, zoom: "+0.3", speedMode: "zoom" } }; const speedByKind = {}; // e.g. { halfplane: 0.8 } const speedModeByKind = {}; // e.g. { plane: "zoom" } function settingsFor(key, kind) { const s = projectionSettings[key] || {}; const out = { ...projectionDefaults, ...s }; if (s.speed === undefined && speedByKind[kind] !== undefined) out.speed = speedByKind[kind]; if (s.speedMode === undefined && speedModeByKind[kind]) out.speedMode = speedModeByKind[kind]; return out; } // Resolve the zoom property against the spec the rules produced, then keep it // inside the spec's own range. function resolveZoom(spec, zoom) { let z = spec.initial; if (zoom === "min") z = spec.min; else if (zoom === "max") z = spec.max; else if (typeof zoom === "string" && /^[+-]/.test(zoom)) { const d = parseFloat(zoom); if (isFinite(d)) z = spec.initial + d; } else if (zoom !== null && zoom !== undefined && isFinite(+zoom)) z = +zoom; return Math.max(spec.min, Math.min(spec.max, z)); } // Tested against "key label group". const isEqualArea = tag => /cylind/i.test(tag) && /equal|area|lambert/i.test(tag); const isFermi = tag => /fermi/i.test(tag); // Models whose tiles stay full size out toward the sides, so distance- or // edge-based fading misreads them as vanishing. const noFade = tag => isEqualArea(tag) || isFermi(tag); function fadeEdgesFor(key, tag) { if (fadeEdgesByProjection[key]) return fadeEdgesByProjection[key]; return noFade(tag) ? "none" : "both"; } // Matched in order; first match wins. An explicit zoomByProjection entry takes // precedence over all of them. const zoomRules = [ { // equal-area cylinder: size its centre polygon like the Poincaré disk's match: isEqualArea, spec: (base, P) => { const z = zMatchCenterPolygon(P); return z === null ? base : { min: z, max: z + (base.max - base.min), initial: z }; } }, { // other cylindrical models: boundary lines flush with the top and bottom match: tag => /cylind/i.test(tag), spec: (base, P) => { const z = zFillHeight(P); return z === null ? base : { min: z, max: z + (base.max - base.min), initial: z }; } }, { // Poincaré half-plane: start fully zoomed out match: tag => /poincar/i.test(tag) && /half.?plane/i.test(tag), spec: base => ({ ...base, initial: base.min }) }, { // horocyclic: its default framing becomes the zoom-out limit match: tag => /horocycl/i.test(tag), spec: base => ({ ...base, min: base.initial }) } ]; const controlStyle = "font:inherit;padding:3px 6px;background:#fff;border:1px solid #bbb;border-radius:3px"; const chevron = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E\")"; const selectStyle = `${controlStyle};appearance:none;-webkit-appearance:none;text-indent:0;padding-right:22px;background-image:${chevron};background-repeat:no-repeat;background-position:right 7px center;background-size:9px 6px`; const labelStyle = "color:#666;padding-left:7px"; // 6px control padding + 1px border const field = (label, control) => html`${label}${control}`; const projectionSelect = html``; const dragSelect = html``; const tilingSelect = html``; const zoomSlider = html``; const resetButton = html``; // Drives the chart's own perspective parameter: alpha = exp(t) - 1, t in // [0, 2.25], default log 2 — the same parameterization recenter() resets to. const perspectiveDefault = Math.log(2); const perspectiveSlider = html``; perspectiveSlider.value = perspectiveDefault; const projectionRow = html`

`; projectionRow.append(projectionSelect, perspectiveSlider); const projectionField = field("Projection", projectionRow); const bar = html`

${projectionField} ${field("Tile", tilingSelect)} ${field("Drag", dragSelect)} ${field("Zoom", zoomSlider)} ${resetButton}

`; projectionSelect.innerHTML = optionsOf(orderedMenu(hyperbolicProjections.menu), "poincare"); tilingSelect.innerHTML = optionsOf(hyperbolicTilings.menu, "reg:7,3"); // Pin the row to the select's own natural width, measured with the slider // hidden, so showing the slider shrinks the select instead of widening the bar. let projectionRowWidth = 0; function lockProjectionWidth() { if (projectionRowWidth) return; const shown = perspectiveSlider.style.display; perspectiveSlider.style.display = "none"; projectionRow.style.width = ""; projectionRowWidth = projectionSelect.offsetWidth; if (projectionRowWidth) projectionRow.style.width = `${projectionRowWidth}px`; perspectiveSlider.style.display = shown; } const chartContainer = document.createElement("div"); let chart = null; let currentTiling = null, currentTilingSpec = null; let baseScale = 1, zoomSpec = defaultZoom, clamping = false; let bleeding = true, chartW = 0; // Remembered per projection key, so switching away and back preserves the // setting while an unvisited projection starts at its own default. const zoomMemory = new Map(); const perspectiveMemory = new Map(); let currentKey = null; // The chart registers its own wheel listener during construction and there's no // handle to remove it, so intercept in the capture phase before the event // reaches the canvas. No preventDefault, so the page scrolls as usual. chartContainer.addEventListener("wheel", e => e.stopPropagation(), true); function tagFor(key) { const entry = hyperbolicProjections.menu.find(d => d.key === key); return [key, entry && entry.label, entry && entry.group].filter(Boolean).join(" "); } // A box model with finite extents (the conformal rectangle) fills its own frame, // so it stays in the column. Cylindrical and band models are also "box" but // infinite in x, so they keep the page-width canvas. function isBoundedBox(P) { if (!(typeof P.kind === "function" && P.kind() === "box")) return false; if (typeof P.extent !== "function") return false; const e = P.extent(); return !!(e && e[1] && isFinite(e[1][0]) && isFinite(e[1][1])); } // On-screen radius of the tiling's centre polygon, linear in k. function centerPolygonRadius(P, T, k) { if (!T || !T.shapes || !T.faces || !T.faces.length || typeof P.raw !== "function") return 0; const raw = P.raw(); const f = T.faces.find(d => d.ti === 0) || T.faces[0]; const sh = T.shapes[f.si]; if (!sh || !sh.verts) return 0; const c = raw(T.center[0], T.center[1], T.center[2]); if (!c) return 0; let r = 0; for (const v of sh.verts) { const u = raw(v[0], v[1], v[2]); if (!u || !isFinite(u[0]) || !isFinite(u[1])) continue; r = Math.max(r, k * Math.hypot(u[0] - c[0], u[1] - c[1])); } return r; } // Zoom that makes the centre polygon match its size in the Poincaré disk. function zMatchCenterPolygon(P) { if (typeof hyperbolicProjections.poincare !== "function") return null; const R = hyperbolicProjections.poincare(); R.fitExtent([[0, 0], [chartW, chartHeight]], chartPadding); const ref = centerPolygonRadius(R, currentTiling, R.scale()); const here = centerPolygonRadius(P, currentTiling, baseScale); return ref > 0 && here > 0 ? Math.log(ref / here) : null; } // Zoom that puts the model's horizontal boundary lines on the canvas edges. function zFillHeight(P) { const e = typeof P.extent === "function" ? P.extent() : null; const hh = e && e[1] ? Math.abs(e[1][1]) : Infinity; if (!isFinite(hh) || hh <= 0) return null; return Math.log(chartHeight / (2 * hh * baseScale)); } function specFor(P, key, kind, bounded, tag) { if (zoomByProjection[key]) return zoomByProjection[key]; const base = bounded ? boundedBoxZoom : (zoomByKind[kind] || defaultZoom); for (const rule of zoomRules) if (rule.match(tag)) return rule.spec(base, P); return base; } // `width` is referenced so the cell re-runs on resize; clientWidth (not 100vw) // avoids overflowing past the scrollbar. const pageWidth = () => Math.max(width, document.documentElement.clientWidth); function layoutContainer() { if (!bleeding) { chartContainer.style.width = ""; chartContainer.style.maxWidth = ""; chartContainer.style.marginLeft = ""; return; } // Shift left by the container's own natural offset so it clears the gutter. chartContainer.style.marginLeft = "0px"; const p = chartContainer.parentElement; let off = 0; if (p) { const cs = getComputedStyle(p); off = p.getBoundingClientRect().left + (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.borderLeftWidth) || 0); } chartContainer.style.width = `${pageWidth()}px`; chartContainer.style.maxWidth = "none"; chartContainer.style.marginLeft = `${-off}px`; } function setZoom(z) { zoomSlider.value = Math.max(zoomSpec.min, Math.min(zoomSpec.max, z)); applyZoom(); } function applyZoom() { if (!chart) return; stopMorph(); // the slider owns the scale from here const z = +zoomSlider.value; if (currentKey) zoomMemory.set(currentKey, z); chart.value.projection.scale(baseScale * Math.exp(z)); chart.value.render(); } function applyPerspective() { if (!chart) return; stopMorph(); // setting alpha replaces the raw, warp included const P = chart.value.projection; if (typeof P.alpha !== "function") return; const t = +perspectiveSlider.value; if (currentKey) perspectiveMemory.set(currentKey, t); P.alpha(Math.exp(t) - 1); alignProjection(P); // setting alpha installs a fresh raw chart.value.render(); } // The chart fires "input" after every render, so the limits stay enforced even // if something inside the chart changes the scale. function syncZoomFromChart() { if (morphing) return; // the scale is the warp's to drive while it runs const P = chart.value.projection; const z = Math.log(P.scale() / baseScale); const cz = Math.max(zoomSpec.min, Math.min(zoomSpec.max, z)); zoomSlider.value = cz; if (!clamping && Math.abs(cz - z) > 1e-6) { clamping = true; P.scale(baseScale * Math.exp(cz)); chart.value.render(); } else { clamping = false; } } // --- warping from one projection to the next -------------------------------- // The chart re-reads projection.raw() and projection.scale() on every render, // so a morph needs nothing from the chart itself: swap a blended raw in, drive // it per frame, then put the real raw back at the end. const morphMs = 650; const easeMorph = u => u < 0.5 ? 4*u*u*u : 1 - Math.pow(-2*u + 2, 3)/2; let morphAnim = null, morphing = false, morphEnd = null; // finish: land on the target projection rather than leaving it part-warped. function stopMorph(finish = true) { if (morphAnim !== null) cancelAnimationFrame(morphAnim); morphAnim = null; morphing = false; const end = morphEnd; morphEnd = null; if (end && finish) end(); } function startMorph(P, fromRaw, fromScale, toRaw, toScale) { stopMorph(); const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (!morphMs || reduce || !fromRaw || fromRaw === toRaw) return; const M = projectionMorph(fromRaw, toRaw); if (!M) return; morphEnd = () => { P.raw(toRaw); P.scale(toScale); if (chart) chart.value.render(); }; morphing = true; const t0 = performance.now(); const frame = () => { const u = Math.min(1, (performance.now() - t0)/morphMs); if (u >= 1) { morphAnim = null; stopMorph(true); return; } const e = easeMorph(u); P.raw(M.at(e)); P.scale(M.scaleAt(e, fromScale, toScale)); chart.value.render(); morphAnim = requestAnimationFrame(frame); }; frame(); } function rebuildChart() { // Captured before anything is replaced: what the chart is showing right now // is where the warp starts from, and carrying the view over is what keeps the // centre tile in place instead of snapping back to the origin. const tilingChanged = tilingSelect.value !== currentTilingSpec; const prevP = chart && chart.value.projection; const prevRaw = prevP && prevP.raw(), prevScale = prevP && prevP.scale(); const prevView = chart && !tilingChanged ? chart.value.view : null; const prevColors = prevView ? chart.value.colors : null; stopMorph(); if (tilingChanged) { currentTilingSpec = tilingSelect.value; currentTiling = hyperbolicTilings.tiling(currentTilingSpec); } const key = projectionSelect.value; const tag = tagFor(key); const P = hyperbolicProjections[key](); // Square the model up before anything measures it: the half-plane and the // horocyclic model carry a half-turn at the origin, which would otherwise // flip the whole tiling on switching to them and spin it during the warp. alignProjection(P); const bounded = isBoundedBox(P); const kind = typeof P.kind === "function" ? P.kind() : ""; const settings = settingsFor(key, kind); bleeding = !bounded; layoutContainer(); chartW = bleeding ? pageWidth() : width; chart = hyperbolicChart({ width: chartW, height: chartHeight, padding: chartPadding, projection: P, tiling: currentTiling, view: prevView, colors: prevColors, mode: dragSelect.value, fadeEdges: fadeEdgesFor(key, tag), keySpeed: keySpeedBase * settings.speed, keySpeedMode: settings.speedMode, // WASD works with the pointer over the chart, and also whenever one of the // bar's controls has focus — so the arrows can stay on the selects while // the same hand pans, without having to park the mouse on the canvas. keyWhen: () => bar.contains(document.activeElement) }); baseScale = P.scale(); // whatever fitExtent chose for this viewport zoomSpec = specFor(P, key, kind, bounded, tag); zoomSpec = { ...zoomSpec, initial: resolveZoom(zoomSpec, settings.zoom) }; zoomSlider.title = `${key} — kind: ${kind || "unknown"} — speed ×${settings.speed} (${settings.speedMode})`; zoomSlider.min = zoomSpec.min; zoomSlider.max = zoomSpec.max; const hasAlpha = typeof P.alpha === "function"; perspectiveSlider.style.display = hasAlpha ? "block" : "none"; const remembered = zoomMemory.get(key); const rememberedT = perspectiveMemory.get(key); currentKey = key; clamping = false; chart.addEventListener("input", syncZoomFromChart); if (hasAlpha) { perspectiveSlider.value = rememberedT === undefined ? perspectiveDefault : rememberedT; applyPerspective(); } // Calibrate at the projection's default zoom, then restore whatever zoom this // projection was left at, so the "tiling" speed mode always references the // default framing rather than wherever the user happened to stop. setZoom(zoomSpec.initial); chart.value.keyCalibrate(); if (remembered !== undefined) setZoom(remembered); chartContainer.replaceChildren(chart); chart.value.render(); // Last, so the warp ends on exactly the raw and scale this rebuild settled on. if (prevRaw && !tilingChanged) startMorph(P, prevRaw, prevScale, P.raw(), P.scale()); } // --- arrow keys drive the bar --------------------------------------------- // WASD pans the chart, so the arrows belong to the inputs: left/right walks // between controls, up/down changes the focused control's value. Both are // prevented from their native behaviour — a closed , a range slider and a button are all fair game // — W/A/S/D mean nothing to them beyond a select's type-ahead, which the // keydown handler suppresses — but a text field owns its letters. const typingTags = { INPUT: 1, TEXTAREA: 1 }; const typingTypes = { text: 1, search: 1, email: 1, url: 1, tel: 1, password: 1, number: 1, date: 1, time: 1 }; function isTyping(el = document.activeElement) { if (!el) return false; if (el.isContentEditable) return true; if (!typingTags[el.tagName]) return false; return el.tagName === "TEXTAREA" || !!typingTypes[(el.type || "text").toLowerCase()]; } const keyActive = () => { if (!keysOn) return false; // A press on the canvas is an explicit claim on the keys and outranks the // rest: it holds until something else is pressed or focus moves into a // field. Nothing else here is reliable enough on its own — enter/leave, // focus and the order of the two all shift around under pointer capture. if (engaged) return true; const typing = isTyping(); if (keyWhen && keyWhen()) return !typing; if (keyTarget === "always") return !typing; if (keyTarget === "focus") return focused; if (focused) return true; // the canvas itself has focus if (!pointerOver()) return false; // A text field or code editor elsewhere on the page keeps its letters // unless the pointer has moved onto the chart since it took focus. In a // notebook that is the difference between typing in a cell with the mouse // parked over the canvas, which should type, and clicking into a cell and // then reaching for the chart, which should walk. return !typing || lastMoveAt > focusAt; }; // For working out in the notebook why a key press did or didn't take. const keyState = () => ({ active: keyActive(), pointerOver: pointerOver(), engaged, focused, typing: isTyping(), held: [...held], capture: !!keyCapture, activeElement: document.activeElement && document.activeElement.tagName }); // Diagonals are normalized, so holding two keys goes the same speed as one. function keyDir() { let x = 0, y = 0; for (const c of held) { const d = keyDirs[c]; x += d[0]; y += d[1]; } const n = Math.hypot(x, y); return n > 1e-9 ? [x/n, y/n] : [0, 0]; } function keyStep(dx, dy) { if (dragging) { kLast = null; return; } // a real drag owns the view if (coasting) { coasting = false; dVel = [0, 0]; } // keys take over from a fling stopAnim(); if (!kLast) kLast = [cx, cy]; const from = kLast, to = [kLast[0] + dx, kLast[1] + dy]; applyDrag(from, to, dx, dy); // Keep the virtual pointer on the canvas so unproject stays well defined. kLast = to; wrapInto(kLast); } function keyTick(now) { kFrame = null; if (!canvas.isConnected) { detachKeys(); return; } const dt = Math.min(0.05, Math.max(0, (now - kPrev)/1000)); // cap after a tab switch kPrev = now; // Focus or the pointer may have moved away mid-hold; drop the keys and let // the momentum run down rather than gliding on. if (!keyActive()) clearKeys(); const dir = keyDir(), sp = keySpeed*(boost ? keyBoost : 1)*speedFactor(); // keyCamera: the keys move the viewpoint, so the surface slides the other way. const sign = keyCamera ? -1 : 1; const gx = sign*dir[0]*sp, gy = sign*dir[1]*sp; const k = keyAccelMs > 0 ? 1 - Math.exp(-1000*dt/keyAccelMs) : 1; kVel = [kVel[0] + (gx - kVel[0])*k, kVel[1] + (gy - kVel[1])*k]; const moving = Math.hypot(kVel[0], kVel[1]); if (!dir[0] && !dir[1] && moving < 1) { kVel = [0, 0]; kLast = null; return; } // coasted to a stop if (moving > 1e-6) keyStep(kVel[0]*dt, kVel[1]*dt); kFrame = requestAnimationFrame(keyTick); } const keyStart = () => { if (kFrame === null) { kPrev = performance.now(); kFrame = requestAnimationFrame(keyTick); } }; const clearKeys = () => { held.clear(); boost = false; }; const onWindowBlur = () => { clearKeys(); engaged = false; }; // Kills the coast — key momentum and pointer fling both — without touching // keys that are still physically down. Centring calls this because keyStep's // own stopAnim would otherwise cancel the centring on the very next frame // and the view would sail straight past the tile that was clicked. function stopMomentum() { kVel = [0, 0]; kLast = null; coasting = false; dVel = [0, 0]; if (!held.size && kFrame !== null) { cancelAnimationFrame(kFrame); kFrame = null; } } // Runs in the capture phase, so it sees W/A/S/D before any editor or widget // that stops propagation on the way up. Nothing is claimed unless the chart // actually owns the keys, and only these four keys are ever looked at, so // typing anywhere on the page is untouched. const onKeyDown = e => { if (!canvas.isConnected) return detachKeys(); boost = e.shiftKey || e.ctrlKey; if (e.altKey || e.metaKey) return; const c = keyId(e); if (!c || !keyActive()) return; // leave the key to whoever should have it claim(e); // auto-repeats included, or a held key would leak letters downstream held.add(c); keyStart(); }; const onKeyUp = e => { if (!canvas.isConnected) return detachKeys(); boost = e.shiftKey || e.ctrlKey; const c = keyId(e); if (!c) return; if (held.delete(c)) claim(e); // released even if the chart lost the keys meanwhile }; // Taking a key means nothing downstream should also act on it: preventDefault // alone would still let a keymap on the way up treat it as a command. function claim(e) { e.preventDefault(); e.stopPropagation(); if (e.stopImmediatePropagation) e.stopImmediatePropagation(); } function attachKeys() { window.addEventListener("keydown", onKeyDown, keyCapture); window.addEventListener("keyup", onKeyUp, keyCapture); window.addEventListener("blur", onWindowBlur); // Both bubble, so one pair on the document covers the canvas, the control // bar and everywhere else the pointer might be. document.addEventListener("pointermove", trackPointer, { passive: true }); document.addEventListener("pointerover", trackPointer, { passive: true }); document.addEventListener("pointerdown", trackPress, true); document.addEventListener("focusin", trackFocus, true); } // A re-run leaves the old canvas detached; it drops its listeners on the next // key event or frame rather than keeping a dead chart on the window. function detachKeys() { window.removeEventListener("keydown", onKeyDown, keyCapture); window.removeEventListener("keyup", onKeyUp, keyCapture); window.removeEventListener("blur", onWindowBlur); document.removeEventListener("pointermove", trackPointer); document.removeEventListener("pointerover", trackPointer); document.removeEventListener("pointerdown", trackPress, true); document.removeEventListener("focusin", trackFocus, true); if (kFrame !== null) { cancelAnimationFrame(kFrame); kFrame = null; } clearKeys(); kVel = [0, 0]; kLast = null; } // Leaving the canvas only drops the keys if nothing else still qualifies — // with keyWhen watching the control bar, panning survives the pointer // wandering off, and only stops when the keys are released or focus leaves. canvas.addEventListener("focus", () => { focused = true; }); canvas.addEventListener("blur", () => { focused = false; if (!keyActive()) clearKeys(); }); attachKeys(); canvas.value = { get view() { return V; }, get colors() { return faceColor; }, projection: P, tiling: T, render: requestRender, mode(m) { mode = m; }, centerAt(sx, sy) { const hit = faceAt(sx, sy); if (hit) centerFace(hit); }, keys(on) { keysOn = !!on; if (!keysOn) { clearKeys(); kVel = [0, 0]; kLast = null; } }, speed(v) { if (v !== undefined) keySpeed = +v; return keySpeed; }, speedMode(m) { if (m !== undefined) keySpeedMode = m; return keySpeedMode; }, dragSmooth(ms) { if (ms !== undefined) dragSmoothMs = +ms; return dragSmoothMs; }, dragFling(ms, tiers) { if (ms !== undefined) dragFlingMs = +ms; if (tiers) dragFlingTiers = tiers; return { ms: dragFlingMs, tiers: dragFlingTiers }; }, keyCalibrate, // take the current framing as the reference for "tiling" mode keyState, // a snapshot of why the keys are or aren't live get velocity() { return kVel.slice(); }, destroy() { detachKeys(); stopAnim(); if (dFrame !== null) { cancelAnimationFrame(dFrame); dFrame = null; } coasting = false; }, recenter() { stopAnim(); coasting = false; dVel = [0, 0]; kVel = [0, 0]; kLast = null; clearKeys(); V = H.identity(); tZoom = 0; tPersp = Math.log(2); if (T.custom) V = T.rebase(V); applyParam(); requestRender(); } }; render(); return canvas; } display("build chart function"); display(hyperbolicChart);39:[] 31:{"id":"2c9ce11584776efc","slug":"hyperbolic-projections-and-tilings","title":"Hyperbolic Projections and Tilings","thumbnail":"dc32d3a37a8b6f49fe6bea95a3a73369b4192899e46ef111f3b4051f5d19da81","access_level":"public","create_time":"$D2026-09-15T07:53:49.307Z","update_time":"$D2026-09-17T00:49:06.350Z","view_time":null,"first_public_time":"$D2026-09-15T13:04:09.852Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":208,"publish_version":208,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[{"id":"9668f1b8f361a242","reply_to_id":null,"content":"Wow, awesome! It’s so smooth and satisfying to pan, and I love the transitions between the projections. The Ford circles reminded me of an Apollonian gasket interactive that Jason Davies. My animated version: https://observablehq.com/@mbostock/apollonian-gasket","create_time":"$D2026-09-17T03:04:55.261Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hyperbolic Projections and Tilings","cells":[{"id":15,"value":"# Hyperbolic Projections and Tilings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$33","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"- `Drag` to move\n- `Click` to center a tile\n- `WASD` to walk, `+Shift` to run","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$35","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$36","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$37","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$38","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"2","titling":"auto"}} 32:"$31:body"