16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:T256c,'use client'; import LineStage, { node, limit, type LineProps, type Factory, type Point, } from './line-scene'; import { camera, painter, box, type V3 } from './line-solid'; type Building = { name: string; x: number; y: number; w: number; d: number; h: number; steps: number; }; /** Authored city plan: separated footprints, varied roofs and consistent 2:1 projection. */ export const districtPlan: Building[] = Array.from({ length: 16 }, (_, i) => ({ name: [ 'North Atelier', 'Signal House', 'The Observatory', 'West Studios', 'Archive Tower', 'Meridian Hall', 'Civic Works', 'Foundry No. 8', 'Garden Pavilion', 'Riverside Offices', 'The Exchange', 'South Gallery', 'Beacon House', 'Motion Institute', 'Canal Studios', 'Corner Workshop', ][i], x: -126 + (i % 4) * 84, y: -126 + Math.floor(i / 4) * 84, w: [34, 42, 32, 38][i % 4], d: [38, 30, 40, 34][i % 4], h: [66, 106, 82, 48, 122, 60, 92, 72, 46, 108, 70, 128, 84, 56, 94, 62][i], steps: i % 3, })); function inside(point: Point, polygon: Point[]) { let hit = false; for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { const a = polygon[i], b = polygon[j]; if ( a[1] > point[1] !== b[1] > point[1] && point[0] < ((b[0] - a[0]) * (point[1] - a[1])) / (b[1] - a[1]) + a[0] ) hit = !hit; } return hit; } export const createDistrict: Factory = (group) => { const cam = camera(1.04, [320, 296]), underlay = node(group, 'g', { 'data-city-layer': 'ground' }), roads = node(group, 'g', { 'data-city-layer': 'roads' }), volumes = node(group, 'g', { 'data-city-layer': 'buildings' }), floor = painter(underlay, cam), street = painter(roads, cam), paint = painter(volumes, cam); floor.mesh(box(-181, -181, -7, 181, 181, 0), { color: '#101010', stroke: '#555', width: 0.55, }); for (const axis of [0, 1]) for (const coordinate of [-174, -84, 0, 84, 174]) for (const delta of [-5, 5]) { const pts: V3[] = axis === 0 ? [ [coordinate + delta, -174, 0.4], [coordinate + delta, 174, 0.4], ] : [ [-174, coordinate + delta, 0.4], [174, coordinate + delta, 0.4], ]; street.curve(pts, { stroke: '#777', width: 0.45 }); } // Small lane markings and squares give the city scale without adding visual noise. for (const axis of [0, 1]) for (let i = -158; i < 170; i += 21) { street.curve( axis === 0 ? [ [0, i, 0.5], [0, i + 7, 0.5], ] : [ [i, 0, 0.5], [i + 7, 0, 0.5], ], { stroke: '#494949', width: 0.5 }, ); } floor.draw(); street.draw(); const buildings = districtPlan.map((b, index) => { const { x, y, w, d, h } = b, faces = box(x - w / 2, y - d / 2, 2, x + w / 2, y + d / 2, h), style = { color: '#151515', stroke: '#aaa', width: 0.55 }; const body = paint.mesh(faces, style); body.element.setAttribute('data-building', String(index)); const roofFaces = Array.from({ length: b.steps }, (_, j) => box( x - w / 2 + 4 + j * 3, y - d / 2 + 4 + j * 3, h + j * 9, x + w / 2 - 4 - j * 3, y + d / 2 - 4 - j * 3, h + (j + 1) * 9, ), ); const roofs = roofFaces.map((faces) => paint.mesh(faces, style)); const contours = []; for (let z = 15; z < h - 6; z += 13) { contours.push( paint.curve( [ [x + w / 2, y - d / 2, z], [x + w / 2, y + d / 2, z], [x - w / 2, y + d / 2, z], ], { stroke: '#555', width: 0.45 }, ), ); } const centre = cam.project([x + w * 0.32, y + d * 0.32, h * 0.56]), hits = [faces, ...roofFaces].flatMap((faces) => [faces[1], faces[3], faces[4]].map((f) => f.map(cam.project)), ); return { b, index, style, body, roofs, contours, centre, hits, glow: 0, depth: cam.depth([x, y, 0]), }; }); const ordered = [...buildings].sort((a, b) => b.depth - a.depth); const label = node(group, 'g', { 'data-district-label': '', opacity: 0 }); node(label, 'rect', { x: -91, y: -17, width: 182, height: 30, rx: 15, fill: '#202020', 'fill-opacity': 0.96, stroke: '#ffffff30', 'stroke-width': 0.6, }); node(label, 'circle', { cx: -77, cy: -2, r: 2.5, fill: '#ef6052' }); const text = node(label, 'text', { x: -66, y: 1, fill: '#ededed', 'font-size': 9, 'font-family': 'sans-serif', }); let keyboardIndex = -1, pinned = -1, lastSelected = -1, lx = 320, ly = 200, opacity = 0, groundTheme = document.documentElement.dataset.theme; const nearest = (point: Point) => ordered.find((building) => building.hits.some((polygon) => inside(point, polygon))) ?.index ?? -1; return { reset() { keyboardIndex = pinned = -1; buildings.forEach((b) => (b.glow = 0)); opacity = 0; }, pointer() { keyboardIndex = -1; }, activate(input) { const hit = nearest([input.x, input.y]); pinned = pinned === hit ? -1 : hit; }, key(key, input) { let current = keyboardIndex >= 0 ? keyboardIndex : pinned >= 0 ? pinned : nearest([input.x, input.y]); if (key === 'Enter' || key === ' ') { pinned = pinned === current ? -1 : current; return; } const next = key === 'Home' ? 0 : key === 'End' ? 15 : limit( Math.max(0, current) + (key === 'ArrowLeft' || key === 'ArrowUp' ? -1 : 1), 0, 15, ); keyboardIndex = next; const p = buildings[next].centre; input.x = p[0]; input.y = p[1]; }, update(dt, input) { if (groundTheme !== document.documentElement.dataset.theme) { floor.draw(); street.draw(); groundTheme = document.documentElement.dataset.theme; } const hovered = input.strength > 0.06 ? keyboardIndex >= 0 ? keyboardIndex : nearest([input.x, input.y]) : -1, selected = pinned >= 0 ? pinned : hovered, a = dt === 0 ? 1 : 1 - Math.exp(-dt * 9); let moving = false; buildings.forEach((b) => { const target = b.index === selected ? (pinned >= 0 ? 1 : Math.min(1, input.strength)) : 0; b.glow += (target - b.glow) * a; if (Math.abs(target - b.glow) > 0.001) moving = true; b.style.color = `rgb(${Math.round(21 + b.glow * 17)},${Math.round(21 + b.glow * 7)},${Math.round(21 + b.glow * 5)})`; b.style.stroke = b.glow > 0.003 ? `rgb(${Math.round(165 + b.glow * 74)},${Math.round(165 - b.glow * 69)},${Math.round(165 - b.glow * 83)})` : '#a5a5a5'; b.contours.forEach( (c) => (c.stroke = b.glow > 0.01 ? `rgb(${Math.round(85 + b.glow * 130)},${Math.round(85 + b.glow * 34)},${Math.round(85 + b.glow * 22)})` : '#555'), ); b.body.element.setAttribute('data-glow', b.glow.toFixed(3)); }); paint.draw(); const lightTheme = document.documentElement.dataset.theme === 'light'; label .querySelector('rect')! .setAttribute('fill', lightTheme ? '#fff' : '#202020'); label .querySelector('rect')! .setAttribute('stroke', lightTheme ? '#00000028' : '#ffffff30'); text.setAttribute('fill', lightTheme ? '#292929' : '#ededed'); group.append(label); const targetOpacity = selected >= 0 ? 1 : 0; opacity += (targetOpacity - opacity) * a; if (Math.abs(targetOpacity - opacity) > 0.001) moving = true; if (selected >= 0) { const b = buildings[selected], p = cam.project([b.b.x, b.b.y, b.b.h + b.b.steps * 9]); const tx = limit(p[0], 104, 536), ty = limit(p[1] - 22, 35, 360); lx += (tx - lx) * a; ly += (ty - ly) * a; if (Math.abs(tx - lx) + Math.abs(ty - ly) > 0.05) moving = true; if (lastSelected !== selected) { text.textContent = b.b.name; group .closest('.line-stage') ?.setAttribute('aria-label', `District, ${b.b.name}`); lastSelected = selected; } } else if (lastSelected >= 0) { group .closest('.line-stage') ?.setAttribute('aria-label', 'District, an interactive isometric city'); lastSelected = -1; } label.setAttribute('transform', `translate(${lx.toFixed(2)} ${ly.toFixed(2)})`); label.setAttribute('opacity', opacity.toFixed(3)); group.setAttribute('data-selected-building', String(selected)); return moving; }, }; }; export default function District(props: LineProps) { return ( ); } 18:T2c1e,'use client'; import { useEffect, useId, useRef } from 'react'; export type LineProps = { compact?: boolean; paused?: boolean; className?: string; intensity?: number; speed?: number; }; export type Point = [number, number]; export type Input = { x: number; y: number; strength: number }; export type Scene = { update: (dt: number, input: Input, small: boolean) => boolean; reset: () => void; pointer?: (input: Input) => void; activate?: (input: Input) => void; key?: (key: string, input: Input) => void; }; export type Factory = (group: SVGGElement, id: string) => Scene; export const limit = (v: number, a: number, b: number) => Math.max(a, Math.min(b, v)); export const mix = (a: number, b: number, t: number) => a + (b - a) * t; export const coordinates = (p: Point) => `${p[0].toFixed(2)},${p[1].toFixed(2)}`; export const outline = (points: Point[], closed = false) => 'M' + points.map(coordinates).join('L') + (closed ? 'Z' : ''); export function node( parent: SVGElement, tag: K, attrs: Record = {}, ) { const element = document.createElementNS('http://www.w3.org/2000/svg', tag); for (const [key, value] of Object.entries(attrs)) element.setAttribute(key, String(value)); parent.append(element); return element; } export function path(parent: SVGElement, attrs: Record = {}) { return node(parent, 'path', { fill: 'none', stroke: '#91a29a', 'stroke-width': 0.75, ...attrs, }); } export const spring = (x = 0) => ({ x, v: 0 }); /** Exact damped oscillator step: stable across variable frame lengths, no Euler overshoot. */ export function settle( s: { x: number; v: number }, target: number, dt: number, stiffness = 115, damping = 17, ) { const decayRate = damping / 2, frequency = Math.sqrt(Math.max(0.01, stiffness - decayRate ** 2)); const displacement = s.x - target, quadrature = (s.v + decayRate * displacement) / frequency; const decay = Math.exp(-decayRate * dt), sin = Math.sin(frequency * dt), cos = Math.cos(frequency * dt); s.x = target + decay * (displacement * cos + quadrature * sin); s.v = decay * (s.v * cos - (decayRate * quadrature + frequency * displacement) * sin); if (Math.abs(s.x - target) < 0.0005 && Math.abs(s.v) < 0.005) { s.x = target; s.v = 0; return false; } return true; } export const edge = (amount: number) => `rgb(${Math.round(mix(141, 232, amount))},${Math.round(mix(163, 201, amount))},${Math.round(mix(155, 153, amount))})`; /** Shared lifecycle only. Each sculpture supplies its own geometry and interaction rules. */ export default function LineStage({ label, help, factory, compact = false, paused = false, intensity = 1, speed = 1, className = '', }: LineProps & { label: string; help: string; factory: Factory }) { const host = useRef(null), drawing = useRef(null); const stopped = useRef(paused), wakeRef = useRef<(() => void) | null>(null); stopped.current = paused; const parameters = useRef({ intensity, speed }); parameters.current = { intensity, speed }; const id = useId().replace(/:/g, ''); useEffect(() => { wakeRef.current?.(); }, [paused, intensity, speed]); useEffect(() => { const root = host.current!, group = drawing.current!, svg = root.querySelector('svg')!; const scene = factory(group, id), reduced = matchMedia('(prefers-reduced-motion: reduce)'); const wanted: Input = { x: 320, y: 220, strength: 0 }, current = { ...wanted }; let raf = 0, last = 0, visible = true, small = false, gone = false, release = 0; let down: Point | null = null; function tick(now: number) { raf = 0; if (gone || !visible || document.hidden) return; if (reduced.matches) { scene.reset(); scene.update(0, { x: 320, y: 220, strength: 0 }, small); return; } if (stopped.current) return; const elapsed = (now - last) / 1000; if (small && elapsed < 1 / 30) { raf = requestAnimationFrame(tick); return; } const dt = Math.min(0.055, Math.max(0.001, elapsed)); last = now; const alpha = 1 - Math.exp(-dt * 11); current.x = mix(current.x, wanted.x, alpha); current.y = mix(current.y, wanted.y, alpha); current.strength = mix(current.strength, wanted.strength, alpha); const inputMoving = Math.abs(current.x - wanted.x) + Math.abs(current.y - wanted.y) + Math.abs(current.strength - wanted.strength) > 0.003; const moving = scene.update( dt * limit(parameters.current.speed, 0.4, 2), { ...current, strength: current.strength * limit(parameters.current.intensity, 0, 1.4), }, small, ); if (moving || inputMoving) raf = requestAnimationFrame(tick); } function wake() { if (!gone && !raf && visible && !document.hidden) { last = performance.now(); raf = requestAnimationFrame(tick); } } wakeRef.current = wake; function point(e: PointerEvent) { const r = svg.getBoundingClientRect(), scale = Math.min(r.width / 640, r.height / 440); if (!scale) return; wanted.x = limit( (e.clientX - r.left - (r.width - 640 * scale) / 2) / scale, 0, 640, ); wanted.y = limit( (e.clientY - r.top - (r.height - 440 * scale) / 2) / scale, 0, 440, ); } function move(e: PointerEvent) { if (stopped.current || reduced.matches) return; clearTimeout(release); point(e); wanted.strength = 1; scene.pointer?.(wanted); wake(); } function press(e: PointerEvent) { down = [e.clientX, e.clientY]; move(e); } function rest() { clearTimeout(release); wanted.strength = 0; down = null; scene.pointer?.(wanted); wake(); } function lift(e: PointerEvent) { if ( !stopped.current && !reduced.matches && !compact && down && Math.hypot(e.clientX - down[0], e.clientY - down[1]) < 10 ) { point(e); scene.activate?.(wanted); wake(); } down = null; if (e.pointerType !== 'mouse') { clearTimeout(release); release = window.setTimeout(rest, 1200); } } function leave(e: PointerEvent) { if (e.pointerType === 'mouse') rest(); else { clearTimeout(release); release = window.setTimeout(rest, 1200); } } function keyboard(e: KeyboardEvent) { if ( stopped.current || reduced.matches || ![ 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', ' ', ].includes(e.key) ) return; e.preventDefault(); clearTimeout(release); wanted.strength = 1; if (scene.key) scene.key(e.key, wanted); else { if (e.key === 'Home') { wanted.x = 320; wanted.y = 220; } if (e.key === 'End') wanted.x = 500; if (e.key.startsWith('Arrow')) { wanted.x = limit( wanted.x + (e.key === 'ArrowLeft' ? -55 : e.key === 'ArrowRight' ? 55 : 0), 110, 530, ); wanted.y = limit( wanted.y + (e.key === 'ArrowUp' ? -40 : e.key === 'ArrowDown' ? 40 : 0), 90, 350, ); } } wake(); } function visibility() { if (document.hidden) { cancelAnimationFrame(raf); raf = 0; } else wake(); } function theme() { scene.update(0, current, small); wake(); } const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (!visible) { cancelAnimationFrame(raf); raf = 0; } else wake(); }); const size = new ResizeObserver(([entry]) => { small = entry.contentRect.width < 500; wake(); }); observer.observe(root); size.observe(root); root.addEventListener('pointermove', move); root.addEventListener('pointerdown', press); root.addEventListener('pointerup', lift); root.addEventListener('pointerleave', leave); root.addEventListener('pointercancel', rest); root.addEventListener('keydown', keyboard); root.addEventListener('blur', rest); document.addEventListener('visibilitychange', visibility); reduced.addEventListener('change', wake); document.addEventListener('motiqo-theme-change', theme); scene.update(0, current, small); wake(); return () => { gone = true; cancelAnimationFrame(raf); clearTimeout(release); wakeRef.current = null; observer.disconnect(); size.disconnect(); root.removeEventListener('pointermove', move); root.removeEventListener('pointerdown', press); root.removeEventListener('pointerup', lift); root.removeEventListener('pointerleave', leave); root.removeEventListener('pointercancel', rest); root.removeEventListener('keydown', keyboard); root.removeEventListener('blur', rest); document.removeEventListener('visibilitychange', visibility); reduced.removeEventListener('change', wake); document.removeEventListener('motiqo-theme-change', theme); group.replaceChildren(); }; }, [factory, compact, id]); return (

{help}

); } const styles = `.line-stage{position:relative;display:grid;place-items:center;width:100%;height:440px;min-height:280px;background:radial-gradient(ellipse at 50% 47%,#1c1c1c,#101010 63%,#0a0a0a);overflow:hidden;touch-action:pan-y;outline:none}.line-stage svg{display:block;width:min(100%,700px);height:auto;max-height:100%}.line-stage:focus-visible{outline:1px solid #fff;outline-offset:-5px}.line-compact{height:100%;min-height:0}.line-help{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:500px){.line-stage:not(.line-compact){height:320px}}html[data-theme=light] .line-stage{background:radial-gradient(ellipse at 50% 47%,#fff,#f1eee8 74%)}html[data-theme=light] .line-stage:is(.arbor,.drawer)>svg{filter:invert(1) hue-rotate(180deg)}html[data-theme=light] .line-stage:focus-visible{outline-color:#302c28}`; 19:T2fe9,import { node, outline, path, type Point } from './line-scene'; export type V3 = [number, number, number]; export type Face = V3[]; export type Transform = (p: V3) => V3; export const add = (a: V3, b: V3): V3 => [a[0] + b[0], a[1] + b[1], a[2] + b[2]]; export const mul = (a: V3, s: number): V3 => [a[0] * s, a[1] * s, a[2] * s]; export const dot = (a: V3, b: V3) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; const cross = (a: V3, b: V3): V3 => [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0], ]; export const unit = (a: V3) => mul(a, 1 / (Math.hypot(...a) || 1)); const subtract = (a: V3, b: V3): V3 => [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; export const rotateX = (p: V3, a: number): V3 => [ p[0], p[1] * Math.cos(a) - p[2] * Math.sin(a), p[1] * Math.sin(a) + p[2] * Math.cos(a), ]; export const rotateY = (p: V3, a: number): V3 => [ p[0] * Math.cos(a) + p[2] * Math.sin(a), p[1], -p[0] * Math.sin(a) + p[2] * Math.cos(a), ]; export const rotateZ = (p: V3, a: number): V3 => [ p[0] * Math.cos(a) - p[1] * Math.sin(a), p[0] * Math.sin(a) + p[1] * Math.cos(a), p[2], ]; const VIEW: V3 = [0.612372436, 0.612372436, 0.5]; const LIGHT: V3 = unit([-0.3, -0.5, 1]); /** Orthonormal 45°/30° camera: 2:1 ground diagonals, verticals remain vertical. */ export function camera(scale = 1.3, origin: Point = [320, 270]) { return { scale, project: (p: V3): Point => [ origin[0] + (p[0] - p[1]) * Math.SQRT1_2 * scale, origin[1] + ((p[0] + p[1]) * 0.353553391 - p[2] * 0.866025404) * scale, ], depth: (p: V3) => dot(p, VIEW), ground: (p: Point, z = 0): Point => { const x = (p[0] - origin[0]) / scale, y = ((p[1] - origin[1]) / scale + z * 0.866025404) / 0.5; return [(x + y) * Math.SQRT1_2, (y - x) * Math.SQRT1_2]; }, }; } export type Camera = ReturnType; type Style = { color?: string; stroke?: string; width?: number; glow?: number; cull?: boolean; shade?: boolean; }; type Draw = { element: SVGElement; key: number; id: number }; const identity: Transform = (p) => p; /** Keep opaque depth and lighting in both host themes; artwork is never image-inverted. */ function lightColour(value: string, surface = false) { let rgb: number[]; if (/^#[\da-f]{3}$/i.test(value)) value = '#' + value .slice(1) .split('') .map((c) => c + c) .join(''); if (/^#[\da-f]{6}$/i.test(value)) rgb = [1, 3, 5].map((i) => parseInt(value.slice(i, i + 2), 16)); else if (value.startsWith('rgb(')) rgb = value .match(/[\d.]+/g)! .slice(0, 3) .map(Number); else return value; return `rgb(${rgb.map((v, i) => Math.round(surface ? Math.min(253, 210 + v * 0.65) : v * (rgb[0] - rgb[1] > 20 ? [0.78, 0.72, 0.68][i] : 0.46))).join(',')})`; } /** Own SVG painter. Opaque surfaces and curves share depth order; no React work per frame. */ export function painter(group: SVGGElement, cam: Camera) { const tasks: (() => Draw[])[] = []; let serial = 0, signature = '', lightTheme = false; const write = (el: SVGElement, name: string, value: string) => { if (el.getAttribute(name) !== value) el.setAttribute(name, value); }; function mesh(faces: Face[], style: Style = {}) { const entries = faces.map((points) => ({ points, el: path(group, { 'stroke-width': style.width ?? 0.6, 'data-solid-face': '' }), id: serial++, })); const item = { transform: identity, glow: style.glow ?? 0, visible: true, element: entries[0].el, }; tasks.push(() => entries.map(({ points, el, id }) => { const vertices = points.map(item.transform); const normal = unit( cross(subtract(vertices[1], vertices[0]), subtract(vertices[2], vertices[0])), ); const visible = item.visible && (style.cull === false || dot(normal, VIEW) > -0.001); write(el, 'visibility', visible ? 'visible' : 'hidden'); if (visible) { const light = style.shade === false ? 0 : Math.max(0, dot(normal, LIGHT)) * 0.8 + 0.18; write(el, 'd', outline(vertices.map(cam.project), true)); const fill = style.color ?? (lightTheme ? `rgb(${Math.round(215 + light * 28 + item.glow * 10)},${Math.round(215 + light * 28)},${Math.round(215 + light * 28 - item.glow * 5)})` : `rgb(${Math.round(15 + light * 29 + item.glow * 19)},${Math.round(29 + light * 29 + item.glow * 11)},${Math.round(32 + light * 22)})`); write(el, 'fill', lightTheme && style.color ? lightColour(fill, true) : fill); write( el, 'stroke', lightTheme ? lightColour(style.stroke ?? 'none') : (style.stroke ?? 'none'), ); } const centre = mul(vertices.reduce(add, [0, 0, 0]), 1 / vertices.length); return { element: el, key: cam.depth(centre), id }; }), ); return item; } function curve(points: V3[], style: Style = {}) { const el = path(group, { stroke: style.stroke ?? '#91a79d', 'stroke-width': style.width ?? 0.7, 'data-solid-curve': '', }); const id = serial++, item = { points, transform: identity, visible: true, opacity: 1, stroke: style.stroke ?? '#91a79d', bias: 0.1, }; tasks.push(() => { const vertices = item.points.map(item.transform); write(el, 'd', vertices.length > 1 ? outline(vertices.map(cam.project)) : ''); write(el, 'visibility', item.visible ? 'visible' : 'hidden'); write(el, 'opacity', String(item.opacity)); write(el, 'stroke', lightTheme ? lightColour(item.stroke) : item.stroke); return [ { element: el, key: cam.depth( mul(vertices.reduce(add, [0, 0, 0]), 1 / (vertices.length || 1)), ) + item.bias, id, }, ]; }); return item; } function custom(element: SVGElement, depth: () => number) { const id = serial++; tasks.push(() => [{ element, key: depth(), id }]); } return { mesh, curve, custom, draw() { lightTheme = document.documentElement.dataset.theme === 'light'; const draws = tasks .flatMap((task) => task()) .sort((a, b) => a.key - b.key || a.id - b.id), next = draws.map((d) => d.id).join(','); if (next !== signature) { let cursor = group.firstElementChild; for (const { element } of draws) { if (element === cursor) cursor = cursor.nextElementSibling; else group.insertBefore(element, cursor); } signature = next; } }, }; } /** Outward-wound faces: rear surfaces cannot leak through a foreground object. */ export function box( x0: number, y0: number, z0: number, x1: number, y1: number, z1: number, ): Face[] { const a: V3 = [x0, y0, z0], b: V3 = [x1, y0, z0], c: V3 = [x1, y1, z0], d: V3 = [x0, y1, z0]; const e: V3 = [x0, y0, z1], f: V3 = [x1, y0, z1], g: V3 = [x1, y1, z1], h: V3 = [x0, y1, z1]; return [ [a, d, c, b], [e, f, g, h], [a, b, f, e], [b, c, g, f], [c, d, h, g], [d, a, e, h], ]; } export function cylinder(a: V3, b: V3, radius: number, segments = 24): Face[] { const axis = unit(subtract(b, a)), u = unit(cross(axis, Math.abs(axis[2]) < 0.9 ? [0, 0, 1] : [0, 1, 0])), v = cross(axis, u); const ring = (centre: V3) => Array.from({ length: segments }, (_, i) => add( centre, add( mul(u, Math.cos((i / segments) * Math.PI * 2) * radius), mul(v, Math.sin((i / segments) * Math.PI * 2) * radius), ), ), ); const near = ring(a), far = ring(b); return [ near.slice().reverse(), far, ...near.map((p, i) => [ p, near[(i + 1) % segments], far[(i + 1) % segments], far[i], ]), ]; } export function annulus( radius: number, tube: number, z: number, thickness: number, segments = 64, ): Face[] { const at = (r: number, i: number, h: number): V3 => [ Math.cos((i / segments) * Math.PI * 2) * r, Math.sin((i / segments) * Math.PI * 2) * r, h, ], faces: Face[] = []; for (let i = 0; i < segments; i++) { const o0 = at(radius, i, z), o1 = at(radius, i + 1, z), O0 = at(radius, i, z + thickness), O1 = at(radius, i + 1, z + thickness); const i0 = at(radius - tube, i, z), i1 = at(radius - tube, i + 1, z), I0 = at(radius - tube, i, z + thickness), I1 = at(radius - tube, i + 1, z + thickness); faces.push([o0, o1, O1, O0], [I0, I1, i1, i0], [O0, O1, I1, I0], [i0, i1, o1, o0]); } return faces; } export const circle3 = (r: number, z: number, samples = 64): V3[] => Array.from({ length: samples + 1 }, (_, i) => [ r * Math.cos((i / samples) * Math.PI * 2), r * Math.sin((i / samples) * Math.PI * 2), z, ]); /** Circular silhouette plus correctly clipped surface arcs: a sphere in an orthographic view. */ export function sphere( group: SVGGElement, id: string, cam: Camera, paint: ReturnType, radius: number, colors = ['#718d85', '#344f4f', '#101d23'], ) { const defs = node(group, 'defs'), gradient = node(defs, 'radialGradient', { id: `${id}-orb`, cx: '.29', cy: '.23', r: '.8', }); node(gradient, 'stop', { offset: 0, 'stop-color': colors[0] }); node(gradient, 'stop', { offset: '.38', 'stop-color': colors[1] }); node(gradient, 'stop', { offset: 1, 'stop-color': colors[2] }); const g = node(group, 'g', { 'data-orb': '' }), body = node(g, 'circle', { fill: `url(#${id}-orb)`, stroke: '#9bb1a3', 'stroke-width': 0.8, }); const arcs = Array.from({ length: 4 }, () => path(g, { stroke: '#a9b9a2', 'stroke-width': 0.5, 'stroke-opacity': 0.45 }), ); const shadow = node(group, 'ellipse', { fill: '#02090c', 'fill-opacity': 0.5 }); const item = { centre: [0, 0, 0] as V3, scale: 1, angle: 0, glow: 0 }; paint.custom(g, () => cam.depth(item.centre) + radius * item.scale * 0.55); paint.custom(shadow, () => cam.depth([item.centre[0], item.centre[1], 0.5])); function surfacePath(samples: V3[]) { let d = '', previous = false; for (const q of samples) { const front = dot(q, VIEW) >= 0; if (front) { const p = cam.project(add(item.centre, q)); d += (previous ? 'L' : 'M') + p.map((v) => v.toFixed(2)).join(','); } previous = front; } return d; } return { item, element: g, draw() { const r = radius * item.scale, p = cam.project(item.centre), screenR = r * cam.scale; body.setAttribute('cx', String(p[0])); body.setAttribute('cy', String(p[1])); body.setAttribute('r', String(screenR)); body.setAttribute('stroke', item.glow > 0.1 ? '#e0c699' : '#9bb1a3'); g.setAttribute('data-scale', item.scale.toFixed(4)); g.setAttribute('data-x', item.centre[0].toFixed(3)); g.setAttribute('visibility', r > 0.15 ? 'visible' : 'hidden'); [-0.55, 0, 0.55].forEach((h, i) => { const rr = Math.sqrt(1 - h * h) * r; arcs[i].setAttribute( 'd', surfacePath( Array.from({ length: 97 }, (_, j) => { const a = (j / 96) * Math.PI * 2; return [rr * Math.cos(a), rr * Math.sin(a), h * r]; }), ), ); }); arcs[3].setAttribute( 'd', surfacePath( Array.from({ length: 97 }, (_, j) => { const a = (j / 96) * Math.PI * 2; return rotateZ([r * Math.cos(a), 0, r * Math.sin(a)], item.angle); }), ), ); const ground = cam.project([item.centre[0], item.centre[1], 0.6]); shadow.setAttribute('cx', String(ground[0])); shadow.setAttribute('cy', String(ground[1])); shadow.setAttribute('rx', String(screenR * 0.92)); shadow.setAttribute('ry', String(screenR * 0.4)); shadow.setAttribute('visibility', r > 0.15 ? 'visible' : 'hidden'); }, }; } b:["$","$L16",null,{"initialView":"preview","originalSource":{"district":[{"name":"district.tsx","code":"$17"},{"name":"line-scene.tsx","code":"$18"},{"name":"line-solid.ts","code":"$19"}]},"initialElement":"district","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]