[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","69d9cb3013ac8191a5a86cf287194c93","versionInt","title","Gravity Orbit Simulation","type","code/react","content","// @ts-nocheck\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst VIEW_SIZE = 360;\nconst ARTEMIS_VIEW_WIDTH = 760;\nconst ARTEMIS_VIEW_HEIGHT = 420;\nconst CENTER = VIEW_SIZE / 2;\nconst FIXED_DT = 1 / 120;\nconst BASE_TIME_SCALE = 6;\nconst G = 76000;\nconst EPSILON = 8;\nconst MAX_TRAIL_POINTS = 900;\nconst FABRIC_COLORS = [\"#f59e0b\", \"#22d3ee\", \"#60a5fa\", \"#f472b6\", \"#34d399\"];\n\nconst ARTEMIS_PHASES = {\n earth: { color: \"#facc15\", marker: null, label: \"Earth Orbit\" },\n transfer: { color: \"#fb923c\", marker: \"#fb923c\", label: \"Moon Transfer\" },\n return: { color: \"#22c55e\", marker: \"#22c55e\", label: \"Return Transfer\" },\n};\n\nconst SCENARIOS = {\n sandbox: {\n id: \"sandbox\",\n title: \"Concept Lab\",\n subtitle: \"Generic cause-and-effect mode for teaching stable orbit, inward fall, and escape.\",\n centralBodyName: \"Central Mass\",\n orbitBodyName: \"Orbiting Body\",\n centralMassLabel: \"Central Mass\",\n orbitMassLabel: \"Orbiting Body Mass\",\n velocityLabel: \"Velocity\",\n launchRadius: 132,\n escapeRadius: 205,\n centralColor: \"#f59e0b\",\n orbitColor: \"#22d3ee\",\n centralMassKgBase: null,\n orbitMassKgBase: null,\n massReadoutNote: \"Concept Lab is intentionally generic, so it does not claim a single real-world object mass.\",\n presets: {\n \"Stable Orbit\": { centralMass: 1.2, orbitMass: 1.0, velocityScale: 1.0 },\n \"Fall Inward\": { centralMass: 1.2, orbitMass: 1.0, velocityScale: 0.82 },\n Escape: { centralMass: 1.2, orbitMass: 1.0, velocityScale: 1.58 },\n },\n defaultPreset: \"Stable Orbit\",\n },\n earthSun: {\n id: \"earthSun\",\n title: \"Earth–Sun\",\n subtitle: \"Teaching-scale Earth orbiting the Sun. Change Sun mass or Earth velocity live.\",\n centralBodyName: \"Sun\",\n orbitBodyName: \"Earth\",\n centralMassLabel: \"Sun Mass\",\n orbitMassLabel: \"Earth Mass\",\n velocityLabel: \"Earth Velocity\",\n launchRadius: 150,\n escapeRadius: 218,\n centralColor: \"#fbbf24\",\n orbitColor: \"#60a5fa\",\n centralMassKgBase: 1.98847e30,\n orbitMassKgBase: 5.9722e24,\n massReadoutNote: \"Reference masses are real Sun and Earth masses in kilograms. Sliders apply a multiplier.\",\n presets: {\n \"Earth Year\": { centralMass: 1.0, orbitMass: 1.0, velocityScale: 1.0 },\n \"Sun Weakens\": { centralMass: 0.72, orbitMass: 1.0, velocityScale: 1.0 },\n \"Earth Escapes\": { centralMass: 1.0, orbitMass: 1.0, velocityScale: 1.5 },\n },\n defaultPreset: \"Earth Year\",\n },\n artemis: {\n id: \"artemis\",\n title: \"Artemis Transfer\",\n subtitle: \"Parking orbit, timed boost, Moon capture, and return burn in one classroom mission mode.\",\n centralBodyName: \"Earth\",\n orbitBodyName: \"Moon\",\n centralMassLabel: \"Earth Mass\",\n orbitMassLabel: \"Moon Mass\",\n velocityLabel: \"Parking Orbit Speed\",\n launchRadius: 132,\n escapeRadius: 420,\n centralColor: \"#60a5fa\",\n orbitColor: \"#cbd5e1\",\n centralMassKgBase: 5.9722e24,\n orbitMassKgBase: 7.34767309e22,\n massReadoutNote: \"Reference masses are real Earth and Moon masses in kilograms. This mode uses a teaching-scale transfer model.\",\n presets: {\n \"Parking Orbit\": { centralMass: 1.0, orbitMass: 1.0, velocityScale: 1.0 },\n \"Heavy Earth\": { centralMass: 1.15, orbitMass: 1.0, velocityScale: 1.0 },\n \"Light Earth\": { centralMass: 0.85, orbitMass: 1.0, velocityScale: 1.0 },\n },\n defaultPreset: \"Parking Orbit\",\n moonX: 310,\n moonY: 0,\n startX: -75,\n startY: 0,\n baseVX: 0,\n baseVY: -31.8,\n moonCaptureRadius: 42,\n },\n fabric: {\n id: \"fabric\",\n title: \"Fabric Lab\",\n subtitle: \"Click to place masses, drag them around, and watch the fabric deform in real time.\",\n centralBodyName: \"Selected Mass\",\n orbitBodyName: \"Surface\",\n centralMassLabel: \"Selected Mass\",\n orbitMassLabel: \"New Mass\",\n velocityLabel: \"Surface View\",\n launchRadius: 132,\n escapeRadius: 205,\n centralColor: \"#f59e0b\",\n orbitColor: \"#22d3ee\",\n centralMassKgBase: null,\n orbitMassKgBase: null,\n massReadoutNote: \"Fabric Lab uses relative mass values for visual curvature only.\",\n presets: {\n \"Single Mass\": { centralMass: 1, orbitMass: 1, velocityScale: 1 },\n \"Twin Masses\": { centralMass: 1, orbitMass: 1, velocityScale: 1 },\n \"Clear Surface\": { centralMass: 1, orbitMass: 1, velocityScale: 1 },\n },\n defaultPreset: \"Single Mass\",\n },\n};\n\nconst INITIAL_SCENARIO = SCENARIOS.sandbox;\nconst INITIAL_PRESET = INITIAL_SCENARIO.presets[INITIAL_SCENARIO.defaultPreset];\n\nfunction clamp(value, min, max) {\n return Math.min(max, Math.max(min, value));\n}\n\nfunction circularSpeed(centralMass, radius) {\n return Math.sqrt((G * centralMass) / Math.max(radius, 1));\n}\n\nfunction escapeSpeed(centralMass, radius) {\n return Math.sqrt(2) * circularSpeed(centralMass, radius);\n}\n\nfunction getCentralBodyRadius(mass) {\n return 14 + Math.sqrt(mass) * 7;\n}\n\nfunction getOrbitBodyRadius(mass) {\n return 5 + Math.sqrt(mass) * 2.4;\n}\n\nfunction computeAcceleration(x, y, centralMass) {\n const rSoft = Math.sqrt(x * x + y * y + EPSILON * EPSILON);\n const factor = -(G * centralMass) / Math.pow(rSoft, 3);\n return { ax: factor * x, ay: factor * y, r: Math.sqrt(x * x + y * y) };\n}\n\nfunction computeBodyAcceleration(x, y, bodyX, bodyY, mass) {\n const dx = x - bodyX;\n const dy = y - bodyY;\n const rSoft = Math.sqrt(dx * dx + dy * dy + EPSILON * EPSILON);\n const factor = -(G * mass) / Math.pow(rSoft, 3);\n return { ax: factor * dx, ay: factor * dy, r: Math.sqrt(dx * dx + dy * dy) };\n}\n\nfunction computeArtemisAcceleration(x, y, earthMass, moonMass, moonX, moonY) {\n const earth = computeBodyAcceleration(x, y, 0, 0, earthMass);\n const moon = computeBodyAcceleration(x, y, moonX, moonY, moonMass * 0.12);\n return {\n ax: earth.ax + moon.ax,\n ay: earth.ay + moon.ay,\n earthDistance: earth.r,\n moonDistance: moon.r,\n };\n}\n\nfunction funnelDepth(radius, centralMass) {\n const normalized = radius / 90;\n return (-12.5 * centralMass) / Math.sqrt(normalized * normalized + 0.22);\n}\n\nfunction combinedFabricDepth(x, y, masses) {\n return masses.reduce((sum, mass) => {\n const dx = x - mass.x;\n const dy = y - mass.y;\n const r = Math.sqrt(dx * dx + dy * dy);\n return sum + (-9.5 * mass.mass) / Math.sqrt((r / 70) * (r / 70) + 0.18);\n }, 0);\n}\n\nfunction projectTopDown(x, y) {\n return { x: CENTER + x, y: CENTER + y };\n}\n\nfunction projectArtemis(x, y) {\n const xScale = 1.72;\n const earthOffsetX = 118;\n const yScale = 1.38;\n return { x: earthOffsetX + x * xScale, y: ARTEMIS_VIEW_HEIGHT / 2 + y * yScale };\n}\n\nfunction projectFunnel(x, y, centralMass, pitch) {\n const r = Math.sqrt(x * x + y * y);\n const z = funnelDepth(r, centralMass);\n const massFactor = Math.sqrt(Math.max(centralMass, 0.01));\n const yScale = 0.22 + pitch * 0.5;\n const depthScale = 0.42 + pitch * 0.78 + massFactor * 0.16;\n const verticalOffset = 146 - pitch * 34 - massFactor * 5;\n return { x: CENTER + x * 0.95, y: verticalOffset + y * yScale - z * depthScale };\n}\n\nfunction projectFabricSurface(x, y, masses, pitch) {\n const z = combinedFabricDepth(x, y, masses);\n const xScale = 1.28;\n const yScale = 1.02 + pitch * 0.22;\n const depthScale = 0.92 + pitch * 0.7;\n const verticalOffset = 118;\n return {\n x: CENTER + x * xScale,\n y: verticalOffset + y * yScale - z * depthScale,\n };\n}\n\nfunction projectArtemisFabricSurface(x, y, masses, pitch) {\n const z = combinedFabricDepth(x, y, masses);\n const xScale = 1.92;\n const yScale = 0.98 + pitch * 0.12;\n const depthScale = 0.95 + pitch * 0.8;\n const earthOffsetX = 56;\n const verticalOffset = 142;\n return {\n x: earthOffsetX + x * xScale,\n y: verticalOffset + y * yScale - z * depthScale,\n };\n}\n\nfunction pathFromPoints(points, projector) {\n if (!points.length) return \"\";\n return points.map((p, i) => {\n const pt = projector(p.x, p.y);\n return `${i === 0 ? \"M\" : \"L\"} ${pt.x.toFixed(2)} ${pt.y.toFixed(2)}`;\n }).join(\" \");\n}\n\nfunction normalizeVector(x, y, fallback = { x: 1, y: 0 }) {\n const mag = Math.sqrt(x * x + y * y);\n if (mag < 0.0001) return fallback;\n return { x: x / mag, y: y / mag };\n}\n\nfunction normalizedAngleDifference(a, b) {\n return Math.atan2(Math.sin(a - b), Math.cos(a - b));\n}\n\nfunction groupTrailByPhase(points) {\n const groups = [];\n let current = null;\n for (const point of points) {\n if (!current || current.phase !== point.phase) {\n current = { phase: point.phase, points: [{ x: point.x, y: point.y }] };\n groups.push(current);\n } else {\n current.points.push({ x: point.x, y: point.y });\n }\n }\n return groups;\n}\n\nfunction formatMassKg(value) {\n if (!Number.isFinite(value) || value <= 0) return \"—\";\n const exponent = Math.floor(Math.log10(value));\n const mantissa = value / Math.pow(10, exponent);\n return `${mantissa.toFixed(3)} × 10^${exponent} kg`;\n}\n\nfunction formatRatio(a, b) {\n if (!Number.isFinite(a) || !Number.isFinite(b) || b === 0) return \"—\";\n const ratio = a / b;\n if (ratio >= 10000 || ratio < 0.001) {\n const exponent = Math.floor(Math.log10(ratio));\n const mantissa = ratio / Math.pow(10, exponent);\n return `${mantissa.toFixed(3)} × 10^${exponent} : 1`;\n }\n if (ratio >= 100) return `${ratio.toFixed(1)} : 1`;\n if (ratio >= 10) return `${ratio.toFixed(2)} : 1`;\n return `${ratio.toFixed(3)} : 1`;\n}\n\nfunction getStory(scenario, status, speed, circularHere) {\n if (status === \"Falling Inward\") return { headline: `${scenario.orbitBodyName} falls inward`, detail: `${scenario.orbitBodyName} does not have enough sideways speed to stay in orbit.` };\n if (status === \"Escaping\") return { headline: `${scenario.orbitBodyName} escapes`, detail: `${scenario.orbitBodyName} has enough speed to leave ${scenario.centralBodyName}'s pull.` };\n if (speed < circularHere * 0.9) return { headline: `${scenario.orbitBodyName} is below orbital speed`, detail: `Gravity is pulling the path inward more strongly than the sideways motion can balance.` };\n if (speed <= circularHere * 1.08) return { headline: `${scenario.orbitBodyName} is near circular-orbit speed`, detail: `This is close to a stable orbit around ${scenario.centralBodyName}.` };\n return { headline: `${scenario.orbitBodyName} is moving fast`, detail: `Higher sideways speed stretches the path outward and can lead to escape.` };\n}\n\nfunction getArtemisStory(mode, earthDistance, moonDistance) {\n if (mode === \"moonOrbit\") return { headline: \"Spacecraft is captured by the Moon\", detail: \"Now the Moon is the local anchor. A new boost can send the craft back toward Earth.\" };\n if (moonDistance < 34) return { headline: \"Close to the Moon\", detail: \"This is the handoff zone where a well-timed approach can turn into Moon capture.\" };\n if (mode === \"transfer\" || mode === \"returnTransfer\") return { headline: \"Spacecraft is in transfer\", detail: \"Trajectory timing matters. Small burns now can make the difference between capture, miss, or return.\" };\n if (earthDistance < 90) return { headline: \"Parking orbit around Earth\", detail: \"Wait for the boost window, then fire the burn to leave Earth orbit toward the Moon.\" };\n return { headline: \"Earth still dominates\", detail: \"The craft is still close enough to Earth that timing the burn remains the critical move.\" };\n}\n\nfunction getArtemisBoostGuide(mode, craftX, craftY, moonX, moonY) {\n const usingMoonOrbit = mode === \"moonOrbit\";\n const centerX = usingMoonOrbit ? moonX : 0;\n const targetX = usingMoonOrbit ? 0 : moonX;\n const craftAngle = Math.atan2(craftY, craftX - centerX);\n const targetAngle = Math.atan2(0, targetX - centerX);\n const burnAngle = targetAngle + Math.PI;\n const error = Math.abs(normalizedAngleDifference(craftAngle, burnAngle));\n const status = error < 0.22 ? \"Boost now\" : error < 0.5 ? \"Get ready\" : \"Wait\";\n const text = usingMoonOrbit\n ? status === \"Boost now\"\n ? \"Return boost window open\"\n : status === \"Get ready\"\n ? \"Approaching Earth-return window\"\n : \"Wait for Earth-return alignment\"\n : status === \"Boost now\"\n ? \"Moon-transfer window open\"\n : status === \"Get ready\"\n ? \"Approaching Moon-transfer window\"\n : \"Wait for Moon-transfer alignment\";\n return { error, status, text, usingMoonOrbit };\n}\n\nfunction buildArtemisBurnVelocity(mode, state, scenario, boostAmount, centralMass, orbitMass) {\n const currentSpeed = Math.sqrt(state.vx * state.vx + state.vy * state.vy) || 1;\n const currentDir = normalizeVector(state.vx, state.vy, { x: 0, y: -1 });\n\n if (mode === \"moonOrbit\") {\n const toEarth = normalizeVector(-state.x, -state.y, { x: -1, y: 0 });\n const awayFromMoon = normalizeVector(state.x - scenario.moonX, state.y - scenario.moonY, { x: -1, y: 0 });\n const burnDir = normalizeVector(\n currentDir.x * 0.42 + toEarth.x * 0.38 + awayFromMoon.x * 0.2,\n currentDir.y * 0.42 + toEarth.y * 0.38 + awayFromMoon.y * 0.2,\n toEarth\n );\n const orbitRadius = state.__moonOrbitRadius || scenario.moonCaptureRadius;\n const circular = Math.sqrt((G * Math.max(orbitMass * 0.12, 0.01)) / Math.max(orbitRadius, 1));\n const targetSpeed = Math.max(currentSpeed, circular) + boostAmount * 1.45;\n return { vx: burnDir.x * targetSpeed, vy: burnDir.y * targetSpeed, phase: \"return\", nextMode: \"returnTransfer\" };\n }\n\n const orbitRadius = state.__earthOrbitRadius || Math.sqrt(scenario.startX * scenario.startX + scenario.startY * scenario.startY);\n const circular = Math.sqrt((G * Math.max(centralMass, 0.01)) / Math.max(orbitRadius, 1));\n const targetSpeed = Math.max(currentSpeed, circular) + boostAmount;\n return { vx: currentDir.x * targetSpeed, vy: currentDir.y * targetSpeed, phase: \"transfer\", nextMode: \"transfer\" };\n}\n\nfunction createInitialState(scenario, centralMass, velocityScale, orbitMass) {\n if (scenario.id === \"artemis\") {\n const x = scenario.startX;\n const y = scenario.startY;\n const vx = scenario.baseVX * velocityScale;\n const vy = scenario.baseVY * velocityScale;\n return {\n x,\n y,\n vx,\n vy,\n orbitMass,\n trail: [{ x, y, phase: \"earth\" }],\n status: \"Ready\",\n finished: false,\n };\n }\n\n const x = scenario.launchRadius;\n const y = 0;\n const vx = 0;\n const vy = circularSpeed(centralMass, scenario.launchRadius) * velocityScale;\n return {\n x,\n y,\n vx,\n vy,\n orbitMass,\n trail: [{ x, y, phase: \"base\" }],\n status: \"Ready\",\n finished: false,\n };\n}\n\nfunction buildArrow(start, vx, vy, length) {\n const mag = Math.sqrt(vx * vx + vy * vy);\n if (mag < 0.0001) return null;\n const ux = vx / mag;\n const uy = vy / mag;\n const end = { x: start.x + ux * length, y: start.y + uy * length };\n const left = { x: end.x - ux * 8 - uy * 6, y: end.y - uy * 8 + ux * 6 };\n const right = { x: end.x - ux * 8 + uy * 6, y: end.y - uy * 8 - ux * 6 };\n return { start, end, left, right };\n}\n\nfunction StatusPill({ status }) {\n const map = {\n Ready: \"bg-slate-700/70 text-slate-100 border-slate-500/50\",\n Orbiting: \"bg-emerald-500/15 text-emerald-300 border-emerald-400/30\",\n Paused: \"bg-amber-500/15 text-amber-300 border-amber-400/30\",\n \"Falling Inward\": \"bg-rose-500/15 text-rose-300 border-rose-400/30\",\n Escaping: \"bg-sky-500/15 text-sky-300 border-sky-400/30\",\n Interactive: \"bg-cyan-500/15 text-cyan-300 border-cyan-400/30\",\n };\n return {status};\n}\n\nfunction SliderRow({ label, value, min, max, step, onChange, formatter, accent }) {\n return (\n

\n {label}\n {formatter(value)}\n

\n onChange(Number(e.target.value))} className={`h-2 w-full cursor-pointer appearance-none rounded-full bg-slate-700 ${accent}`} />\n

\n );\n}\n\nfunction Panel({ title, right, children }) {\n return (\n

{title}

\n {right ?

{right}

: null}\n

\n {children}\n

\n );\n}\n\nexport default function GravityOrbitSimulation() {\n const [selectedScenarioId, setSelectedScenarioId] = useState(INITIAL_SCENARIO.id);\n const [selectedPreset, setSelectedPreset] = useState(INITIAL_SCENARIO.defaultPreset);\n const [centralMass, setCentralMass] = useState(INITIAL_PRESET.centralMass);\n const [orbitMass, setOrbitMass] = useState(INITIAL_PRESET.orbitMass);\n const [velocityScale, setVelocityScale] = useState(INITIAL_PRESET.velocityScale);\n const [simSpeed, setSimSpeed] = useState(0.25);\n const [boostAmount, setBoostAmount] = useState(4.2);\n const [showOverlays, setShowOverlays] = useState(true);\n const [showNarration, setShowNarration] = useState(true);\n const [funnelPitch, setFunnelPitch] = useState(0.75);\n const [isRunning, setIsRunning] = useState(false);\n const [fabricMasses, setFabricMasses] = useState([{ id: 1, x: 0, y: 0, mass: 2.2, color: FABRIC_COLORS[0] }]);\n const [selectedFabricId, setSelectedFabricId] = useState(1);\n const [newFabricMass, setNewFabricMass] = useState(1.8);\n const [artemisBoostMarkers, setArtemisBoostMarkers] = useState([]);\n const [artemisMode, setArtemisMode] = useState(\"earthOrbit\");\n const [narration, setNarration] = useState({ headline: \"Live Control Narration\", detail: \"Adjust a slider, choose a preset, or switch scenarios and this panel will explain the change.\" });\n const [renderState, setRenderState] = useState(() => createInitialState(INITIAL_SCENARIO, INITIAL_PRESET.centralMass, INITIAL_PRESET.velocityScale, INITIAL_PRESET.orbitMass));\n\n const scenario = SCENARIOS[selectedScenarioId];\n const simRef = useRef(createInitialState(INITIAL_SCENARIO, INITIAL_PRESET.centralMass, INITIAL_PRESET.velocityScale, INITIAL_PRESET.orbitMass));\n const scenarioRef = useRef(INITIAL_SCENARIO);\n const centralMassRef = useRef(INITIAL_PRESET.centralMass);\n const orbitMassRef = useRef(INITIAL_PRESET.orbitMass);\n const velocityScaleRef = useRef(INITIAL_PRESET.velocityScale);\n const simSpeedRef = useRef(0.25);\n const isRunningRef = useRef(false);\n const artemisModeRef = useRef(\"earthOrbit\");\n const artemisPhaseRef = useRef(\"earth\");\n const lastTimestampRef = useRef(null);\n const accumulatorRef = useRef(0);\n const fabricTopSvgRef = useRef(null);\n const fabricIdRef = useRef(2);\n const fabricDragRef = useRef(null);\n\n useEffect(() => { scenarioRef.current = scenario; }, [scenario]);\n useEffect(() => { centralMassRef.current = centralMass; }, [centralMass]);\n useEffect(() => { orbitMassRef.current = orbitMass; }, [orbitMass]);\n useEffect(() => { velocityScaleRef.current = velocityScale; }, [velocityScale]);\n useEffect(() => { simSpeedRef.current = simSpeed; }, [simSpeed]);\n useEffect(() => { isRunningRef.current = isRunning; }, [isRunning]);\n useEffect(() => { artemisModeRef.current = artemisMode; }, [artemisMode]);\n\n const narrate = useCallback((headline, detail) => setNarration({ headline, detail }), []);\n\n const snapshot = useCallback(() => {\n const s = simRef.current;\n setRenderState({ ...s, trail: [...s.trail] });\n }, []);\n\n const setArtemisPhase = useCallback((phase) => {\n artemisPhaseRef.current = phase;\n }, []);\n\n const screenToFabric = useCallback((svgEl, clientX, clientY) => {\n if (!svgEl) return { x: 0, y: 0 };\n const rect = svgEl.getBoundingClientRect();\n const svgX = ((clientX - rect.left) / rect.width) * VIEW_SIZE;\n const svgY = ((clientY - rect.top) / rect.height) * VIEW_SIZE;\n return { x: clamp(svgX - CENTER, -150, 150), y: clamp(svgY - CENTER, -150, 150) };\n }, []);\n\n const updateFabricMassPosition = useCallback((id, coords) => {\n setFabricMasses((prev) => prev.map((mass) => (mass.id === id ? { ...mass, x: coords.x, y: coords.y } : mass)));\n }, []);\n\n const appendCurrentTrailPoint = useCallback(() => {\n const s = simRef.current;\n const last = s.trail[s.trail.length - 1];\n const dx = s.x - last.x;\n const dy = s.y - last.y;\n if (dx * dx + dy * dy > 3.2) {\n s.trail.push({ x: s.x, y: s.y, phase: scenarioRef.current.id === \"artemis\" ? artemisPhaseRef.current : \"base\" });\n if (s.trail.length > MAX_TRAIL_POINTS) s.trail.shift();\n }\n }, []);\n\n const applyFabricPreset = useCallback((presetName, announce = true) => {\n let masses = [];\n if (presetName === \"Twin Masses\") {\n masses = [\n { id: 1, x: -62, y: 0, mass: 1.8, color: FABRIC_COLORS[0] },\n { id: 2, x: 62, y: 0, mass: 1.8, color: FABRIC_COLORS[1] },\n ];\n fabricIdRef.current = 3;\n setSelectedFabricId(1);\n if (announce) narrate(\"Twin Masses preset\", \"Two masses create two wells and a shared deformation pattern across the surface.\");\n } else if (presetName === \"Clear Surface\") {\n masses = [];\n fabricIdRef.current = 1;\n setSelectedFabricId(null);\n if (announce) narrate(\"Surface cleared\", \"The fabric is reset and ready for new masses.\");\n } else {\n masses = [{ id: 1, x: 0, y: 0, mass: 2.2, color: FABRIC_COLORS[0] }];\n fabricIdRef.current = 2;\n setSelectedFabricId(1);\n if (announce) narrate(\"Single Mass preset\", \"One mass creates a single well. Click to place more masses or drag the existing one.\");\n }\n setSelectedPreset(presetName);\n setFabricMasses(masses);\n }, [narrate]);\n\n const resetSimulation = useCallback((status = \"Ready\", overrides = {}) => {\n accumulatorRef.current = 0;\n lastTimestampRef.current = null;\n const activeScenario = overrides.scenario ?? scenarioRef.current;\n const next = createInitialState(activeScenario, overrides.centralMass ?? centralMassRef.current, overrides.velocityScale ?? velocityScaleRef.current, overrides.orbitMass ?? orbitMassRef.current);\n next.status = status;\n simRef.current = next;\n if (activeScenario.id === \"artemis\") {\n setArtemisMode(\"earthOrbit\");\n setArtemisPhase(\"earth\");\n setArtemisBoostMarkers([]);\n next.__earthOrbitRadius = Math.sqrt(activeScenario.startX * activeScenario.startX + activeScenario.startY * activeScenario.startY);\n next.__earthOrbitDirection = 1;\n }\n setRenderState({ ...next, trail: [...next.trail] });\n }, [setArtemisPhase]);\n\n const applyVelocityLive = useCallback((scale, mass) => {\n const s = simRef.current;\n if (scenarioRef.current.id === \"artemis\") {\n s.vx = 0;\n s.vy = scenarioRef.current.baseVY * scale;\n velocityScaleRef.current = scale;\n setVelocityScale(scale);\n setSelectedPreset(\"Custom\");\n snapshot();\n return;\n }\n const radius = Math.max(18, Math.sqrt(s.x * s.x + s.y * s.y));\n const desired = circularSpeed(mass, radius) * scale;\n const speed = Math.sqrt(s.vx * s.vx + s.vy * s.vy);\n const dirX = speed > 0.0001 ? s.vx / speed : -s.y / radius;\n const dirY = speed > 0.0001 ? s.vy / speed : s.x / radius;\n s.vx = dirX * desired;\n s.vy = dirY * desired;\n if (!s.finished) s.status = isRunningRef.current ? \"Orbiting\" : \"Ready\";\n snapshot();\n }, [snapshot]);\n\n const applyArtemisBoost = useCallback(() => {\n if (scenarioRef.current.id !== \"artemis\") return;\n const s = simRef.current;\n const burn = buildArtemisBurnVelocity(artemisModeRef.current, s, scenarioRef.current, boostAmount, centralMassRef.current, orbitMassRef.current);\n setArtemisBoostMarkers((prev) => [...prev, { x: s.x, y: s.y, phase: burn.phase }]);\n setArtemisPhase(burn.phase);\n s.vx = burn.vx;\n s.vy = burn.vy;\n s.status = \"Orbiting\";\n if (burn.phase === \"return\") {\n s.__moonDepartureCooldown = 260;\n s.__mustClearMoonCapture = true;\n }\n artemisModeRef.current = burn.nextMode;\n setArtemisMode(burn.nextMode);\n appendCurrentTrailPoint();\n snapshot();\n narrate(\"Boost applied\", burn.phase === \"return\" ? \"A guided return burn was applied to leave Moon orbit and head back toward Earth.\" : \"A guided transfer burn was applied to leave Earth orbit toward the Moon.\");\n }, [appendCurrentTrailPoint, boostAmount, narrate, setArtemisPhase, snapshot]);\n\n const applyArtemisCourseBurn = useCallback((kind) => {\n if (scenarioRef.current.id !== \"artemis\") return;\n const s = simRef.current;\n const center = artemisModeRef.current === \"moonOrbit\"\n ? { x: scenarioRef.current.moonX, y: scenarioRef.current.moonY }\n : { x: 0, y: 0 };\n const speedMag = Math.sqrt(s.vx * s.vx + s.vy * s.vy) || 1;\n const radialVec = { x: s.x - center.x, y: s.y - center.y };\n const radialMag = Math.sqrt(radialVec.x * radialVec.x + radialVec.y * radialVec.y) || 1;\n const prograde = { x: s.vx / speedMag, y: s.vy / speedMag };\n const radialOut = { x: radialVec.x / radialMag, y: radialVec.y / radialMag };\n const delta = artemisModeRef.current === \"moonOrbit\" ? 1.45 : 1.25;\n\n if (kind === \"prograde\") {\n s.vx += prograde.x * delta;\n s.vy += prograde.y * delta;\n }\n if (kind === \"retrograde\") {\n s.vx -= prograde.x * delta;\n s.vy -= prograde.y * delta;\n }\n if (kind === \"out\") {\n s.vx += radialOut.x * delta;\n s.vy += radialOut.y * delta;\n }\n if (kind === \"in\") {\n s.vx -= radialOut.x * delta;\n s.vy -= radialOut.y * delta;\n }\n\n if (artemisModeRef.current === \"earthOrbit\") {\n artemisModeRef.current = \"transfer\";\n setArtemisMode(\"transfer\");\n setArtemisPhase(\"transfer\");\n } else if (artemisModeRef.current === \"moonOrbit\") {\n artemisModeRef.current = \"returnTransfer\";\n setArtemisMode(\"returnTransfer\");\n setArtemisPhase(\"return\");\n s.__moonDepartureCooldown = Math.max(s.__moonDepartureCooldown || 0, 120);\n }\n\n snapshot();\n narrate(\"Course correction applied\", \"A small local burn adjusted the spacecraft path.\");\n }, [narrate, setArtemisPhase, snapshot]);\n\n const switchScenario = useCallback((scenarioId) => {\n const nextScenario = SCENARIOS[scenarioId];\n if (nextScenario.id === \"fabric\") {\n setIsRunning(false);\n setSelectedScenarioId(scenarioId);\n scenarioRef.current = nextScenario;\n setRenderState((prev) => ({ ...prev, status: \"Ready\", finished: false }));\n applyFabricPreset(nextScenario.defaultPreset, false);\n setArtemisBoostMarkers([]);\n setArtemisMode(\"earthOrbit\");\n setArtemisPhase(\"earth\");\n narrate(`Switched to ${nextScenario.title}`, nextScenario.subtitle);\n return;\n }\n const presetName = nextScenario.defaultPreset;\n const preset = nextScenario.presets[presetName];\n setIsRunning(false);\n setSelectedScenarioId(scenarioId);\n setSelectedPreset(presetName);\n setCentralMass(preset.centralMass);\n setOrbitMass(preset.orbitMass);\n setVelocityScale(preset.velocityScale);\n scenarioRef.current = nextScenario;\n centralMassRef.current = preset.centralMass;\n orbitMassRef.current = preset.orbitMass;\n velocityScaleRef.current = preset.velocityScale;\n setArtemisBoostMarkers([]);\n setArtemisMode(\"earthOrbit\");\n setArtemisPhase(\"earth\");\n const next = createInitialState(nextScenario, preset.centralMass, preset.velocityScale, preset.orbitMass);\n if (nextScenario.id === \"artemis\") {\n next.__earthOrbitRadius = Math.sqrt(nextScenario.startX * nextScenario.startX + nextScenario.startY * nextScenario.startY);\n next.__earthOrbitDirection = 1;\n }\n next.status = \"Ready\";\n simRef.current = next;\n setRenderState({ ...next, trail: [...next.trail] });\n narrate(`Switched to ${nextScenario.title}`, nextScenario.subtitle);\n }, [applyFabricPreset, narrate, setArtemisPhase]);\n\n const applyPreset = useCallback((presetName) => {\n if (scenarioRef.current.id === \"fabric\") {\n applyFabricPreset(presetName, true);\n return;\n }\n const activeScenario = scenarioRef.current;\n const preset = activeScenario.presets[presetName];\n setIsRunning(false);\n setSelectedPreset(presetName);\n setCentralMass(preset.centralMass);\n setOrbitMass(preset.orbitMass);\n setVelocityScale(preset.velocityScale);\n centralMassRef.current = preset.centralMass;\n orbitMassRef.current = preset.orbitMass;\n velocityScaleRef.current = preset.velocityScale;\n setArtemisBoostMarkers([]);\n if (activeScenario.id === \"artemis\") {\n setArtemisMode(\"earthOrbit\");\n setArtemisPhase(\"earth\");\n }\n const next = createInitialState(activeScenario, preset.centralMass, preset.velocityScale, preset.orbitMass);\n if (activeScenario.id === \"artemis\") {\n next.__earthOrbitRadius = Math.sqrt(activeScenario.startX * activeScenario.startX + activeScenario.startY * activeScenario.startY);\n next.__earthOrbitDirection = 1;\n }\n next.status = \"Ready\";\n simRef.current = next;\n setRenderState({ ...next, trail: [...next.trail] });\n narrate(`${presetName} preset`, `Preset loaded for ${activeScenario.title}.`);\n }, [applyFabricPreset, narrate, setArtemisPhase]);\n\n const setCentralMassLive = useCallback((value) => {\n const next = clamp(value, 0.5, 5);\n const prev = centralMassRef.current;\n setSelectedPreset(\"Custom\");\n setCentralMass(next);\n centralMassRef.current = next;\n narrate(`${scenarioRef.current.centralBodyName} mass ${next > prev ? \"increased\" : \"decreased\"}`, next > prev ? \"Gravity strengthens and the well deepens.\" : \"Gravity weakens and the well becomes shallower.\");\n if (!isRunningRef.current) resetSimulation(\"Ready\", { centralMass: next, scenario: scenarioRef.current });\n }, [narrate, resetSimulation]);\n\n const setOrbitMassLive = useCallback((value) => {\n const next = clamp(value, 0.5, 5);\n setSelectedPreset(\"Custom\");\n setOrbitMass(next);\n orbitMassRef.current = next;\n simRef.current.orbitMass = next;\n snapshot();\n narrate(`${scenarioRef.current.orbitBodyName} mass changed`, \"In this teaching model the marker size changes and the local curvature influence changes as well.\");\n }, [narrate, snapshot]);\n\n const setVelocityScaleLive = useCallback((value) => {\n const next = clamp(value, scenarioRef.current.id === \"artemis\" ? 0.8 : 0.2, scenarioRef.current.id === \"artemis\" ? 1.2 : 2);\n const prev = velocityScaleRef.current;\n setSelectedPreset(\"Custom\");\n setVelocityScale(next);\n velocityScaleRef.current = next;\n narrate(`${scenarioRef.current.orbitBodyName} velocity ${next > prev ? \"increased\" : \"decreased\"}`, next > prev ? \"More sideways speed widens the path and can lead to escape.\" : \"Less sideways speed lets gravity bend the path inward more strongly.\");\n if (isRunningRef.current) applyVelocityLive(next, centralMassRef.current);\n else resetSimulation(\"Ready\", { velocityScale: next, scenario: scenarioRef.current });\n }, [applyVelocityLive, narrate, resetSimulation]);\n\n const selectedFabricMass = useMemo(() => fabricMasses.find((mass) => mass.id === selectedFabricId) || null, [fabricMasses, selectedFabricId]);\n const deepestFabricDepth = useMemo(() => {\n if (!fabricMasses.length) return 0;\n return Math.min(...fabricMasses.map((mass) => combinedFabricDepth(mass.x, mass.y, fabricMasses)));\n }, [fabricMasses]);\n\n useEffect(() => {\n let frameId;\n\n const advance = () => {\n const s = simRef.current;\n const activeScenario = scenarioRef.current;\n if (s.finished || activeScenario.id === \"fabric\") return;\n\n if (activeScenario.id === \"artemis\") {\n const parkingRadius = s.__earthOrbitRadius || Math.sqrt(activeScenario.startX * activeScenario.startX + activeScenario.startY * activeScenario.startY);\n const moonCaptureRadius = activeScenario.moonCaptureRadius;\n const earthCaptureTolerance = 4.5;\n\n if (artemisModeRef.current === \"earthOrbit\") {\n const radius = parkingRadius;\n let theta = Math.atan2(s.y, s.x);\n const tangentSign = s.__earthOrbitDirection || 1;\n const omega = Math.sqrt((G * Math.max(centralMassRef.current, 0.01)) / Math.pow(radius, 3));\n theta += tangentSign * omega * FIXED_DT;\n s.x = Math.cos(theta) * radius;\n s.y = Math.sin(theta) * radius;\n s.vx = -Math.sin(theta) * omega * radius * tangentSign;\n s.vy = Math.cos(theta) * omega * radius * tangentSign;\n s.status = \"Orbiting\";\n return;\n }\n\n if (artemisModeRef.current === \"moonOrbit\") {\n const moonX = activeScenario.moonX;\n const moonY = activeScenario.moonY;\n const radius = s.__moonOrbitRadius || moonCaptureRadius;\n let theta = Math.atan2(s.y - moonY, s.x - moonX);\n const tangentSign = s.__moonOrbitDirection || 1;\n const omega = Math.sqrt((G * Math.max(orbitMassRef.current * 0.12, 0.01)) / Math.pow(radius, 3));\n theta += tangentSign * omega * FIXED_DT;\n s.x = moonX + Math.cos(theta) * radius;\n s.y = moonY + Math.sin(theta) * radius;\n s.vx = -Math.sin(theta) * omega * radius * tangentSign;\n s.vy = Math.cos(theta) * omega * radius * tangentSign;\n s.status = \"Orbiting\";\n return;\n }\n\n if (s.__moonDepartureCooldown && s.__moonDepartureCooldown > 0) {\n s.__moonDepartureCooldown -= 1;\n }\n if (s.__mustClearMoonCapture) {\n const currentMoonDistance = Math.sqrt((s.x - activeScenario.moonX) * (s.x - activeScenario.moonX) + (s.y - activeScenario.moonY) * (s.y - activeScenario.moonY));\n if (currentMoonDistance >= moonCaptureRadius + 18) {\n s.__mustClearMoonCapture = false;\n }\n }\n\n const a1 = computeArtemisAcceleration(s.x, s.y, centralMassRef.current, orbitMassRef.current, activeScenario.moonX, activeScenario.moonY);\n const vxHalf = s.vx + a1.ax * (FIXED_DT / 2);\n const vyHalf = s.vy + a1.ay * (FIXED_DT / 2);\n s.x += vxHalf * FIXED_DT;\n s.y += vyHalf * FIXED_DT;\n const a2 = computeArtemisAcceleration(s.x, s.y, centralMassRef.current, orbitMassRef.current, activeScenario.moonX, activeScenario.moonY);\n s.vx = vxHalf + a2.ax * (FIXED_DT / 2);\n s.vy = vyHalf + a2.ay * (FIXED_DT / 2);\n\n const moonRelativeSpeed = Math.sqrt(s.vx * s.vx + s.vy * s.vy);\n const moonCaptureTolerance = 4.5;\n if ((!s.__moonDepartureCooldown || s.__moonDepartureCooldown <= 0) && !s.__mustClearMoonCapture && Math.abs(a2.moonDistance - moonCaptureRadius) <= moonCaptureTolerance && moonRelativeSpeed <= 32 && (artemisModeRef.current === \"transfer\" || artemisModeRef.current === \"returnTransfer\")) {\n const moonDx = s.x - activeScenario.moonX;\n const moonDy = s.y - activeScenario.moonY;\n const tangential = moonDx * s.vy - moonDy * s.vx;\n const theta = Math.atan2(moonDy, moonDx);\n s.__moonOrbitDirection = tangential >= 0 ? 1 : -1;\n s.__moonOrbitRadius = moonCaptureRadius;\n s.x = activeScenario.moonX + Math.cos(theta) * moonCaptureRadius;\n s.y = activeScenario.moonY + Math.sin(theta) * moonCaptureRadius;\n s.vx = 0;\n s.vy = 0;\n artemisModeRef.current = \"moonOrbit\";\n setArtemisMode(\"moonOrbit\");\n s.status = \"Orbiting\";\n return;\n }\n\n if (artemisModeRef.current === \"returnTransfer\" && Math.abs(a2.earthDistance - parkingRadius) <= earthCaptureTolerance) {\n const theta = Math.atan2(s.y, s.x);\n const tangential = s.x * s.vy - s.y * s.vx;\n s.__earthOrbitDirection = tangential >= 0 ? 1 : -1;\n s.__earthOrbitRadius = parkingRadius;\n s.x = Math.cos(theta) * parkingRadius;\n s.y = Math.sin(theta) * parkingRadius;\n artemisModeRef.current = \"earthOrbit\";\n setArtemisMode(\"earthOrbit\");\n setArtemisPhase(\"earth\");\n s.status = \"Orbiting\";\n return;\n }\n\n if (a2.earthDistance <= getCentralBodyRadius(centralMassRef.current) + 6) {\n s.finished = true;\n s.status = \"Falling Inward\";\n return;\n }\n\n if (Math.sqrt(s.x * s.x + s.y * s.y) >= activeScenario.escapeRadius * 3.5) {\n s.finished = true;\n s.status = \"Escaping\";\n return;\n }\n\n s.status = \"Orbiting\";\n return;\n }\n\n const { ax: ax1, ay: ay1 } = computeAcceleration(s.x, s.y, centralMassRef.current);\n const vxHalf = s.vx + ax1 * (FIXED_DT / 2);\n const vyHalf = s.vy + ay1 * (FIXED_DT / 2);\n s.x += vxHalf * FIXED_DT;\n s.y += vyHalf * FIXED_DT;\n const { ax: ax2, ay: ay2, r } = computeAcceleration(s.x, s.y, centralMassRef.current);\n s.vx = vxHalf + ax2 * (FIXED_DT / 2);\n s.vy = vyHalf + ay2 * (FIXED_DT / 2);\n const collisionRadius = getCentralBodyRadius(centralMassRef.current) + 4;\n if (r <= collisionRadius) {\n s.finished = true;\n s.status = \"Falling Inward\";\n return;\n }\n if (r >= activeScenario.escapeRadius) {\n s.finished = true;\n s.status = \"Escaping\";\n return;\n }\n s.status = \"Orbiting\";\n };\n\n const appendTrail = () => {\n const s = simRef.current;\n const last = s.trail[s.trail.length - 1];\n const dx = s.x - last.x;\n const dy = s.y - last.y;\n if (dx * dx + dy * dy > 3.2) {\n s.trail.push({ x: s.x, y: s.y, phase: scenarioRef.current.id === \"artemis\" ? artemisPhaseRef.current : \"base\" });\n if (s.trail.length > MAX_TRAIL_POINTS) s.trail.shift();\n }\n };\n\n const loop = (timestamp) => {\n if (lastTimestampRef.current == null) lastTimestampRef.current = timestamp;\n const elapsed = Math.min(0.05, (timestamp - lastTimestampRef.current) / 1000);\n lastTimestampRef.current = timestamp;\n if (isRunningRef.current && scenarioRef.current.id !== \"fabric\") {\n accumulatorRef.current += elapsed * BASE_TIME_SCALE * simSpeedRef.current;\n while (accumulatorRef.current >= FIXED_DT) {\n advance();\n accumulatorRef.current -= FIXED_DT;\n if (simRef.current.finished) break;\n }\n appendTrail();\n snapshot();\n if (simRef.current.finished) setIsRunning(false);\n }\n frameId = requestAnimationFrame(loop);\n };\n\n frameId = requestAnimationFrame(loop);\n return () => cancelAnimationFrame(frameId);\n }, [setArtemisPhase, snapshot]);\n\n const topDownTrailPath = useMemo(() => pathFromPoints(renderState.trail, projectTopDown), [renderState.trail]);\n const funnelTrailPath = useMemo(() => pathFromPoints(renderState.trail, (x, y) => projectFunnel(x, y, centralMass, funnelPitch)), [renderState.trail, centralMass, funnelPitch]);\n const artemisTrailGroups = useMemo(() => groupTrailByPhase(renderState.trail), [renderState.trail]);\n const orbitPoint = projectTopDown(renderState.x, renderState.y);\n const funnelPoint = projectFunnel(renderState.x, renderState.y, centralMass, funnelPitch);\n const funnelCenterPoint = projectFunnel(0, 0, centralMass, funnelPitch);\n const centralRadius = getCentralBodyRadius(centralMass);\n const orbitRadius = getOrbitBodyRadius(orbitMass);\n const funnelCentralRadius = centralRadius * (0.56 + funnelPitch * 0.18);\n const funnelCentralGlowRadius = funnelCentralRadius * 1.52;\n const funnelCentralY = funnelCenterPoint.y - funnelCentralRadius * (0.08 + (1.2 - funnelPitch) * 0.08);\n const speed = Math.sqrt(renderState.vx * renderState.vx + renderState.vy * renderState.vy);\n const distance = Math.sqrt(renderState.x * renderState.x + renderState.y * renderState.y);\n const circularHere = circularSpeed(centralMass, Math.max(distance, 1));\n const escapeHere = escapeSpeed(centralMass, Math.max(distance, 1));\n const story = getStory(scenario, renderState.status, speed, circularHere);\n const centralMassKg = scenario.centralMassKgBase != null ? scenario.centralMassKgBase * centralMass : null;\n const orbitMassKg = scenario.orbitMassKgBase != null ? scenario.orbitMassKgBase * orbitMass : null;\n const ratioText = centralMassKg != null && orbitMassKg != null ? formatRatio(centralMassKg, orbitMassKg) : \"—\";\n const artemisEarthDistance = scenario.id === \"artemis\" ? Math.sqrt(renderState.x * renderState.x + renderState.y * renderState.y) : null;\n const artemisMoonDistance = scenario.id === \"artemis\" ? Math.sqrt((renderState.x - scenario.moonX) ** 2 + (renderState.y - scenario.moonY) ** 2) : null;\n const status = scenario.id === \"fabric\" ? \"Interactive\" : isRunning ? renderState.status || \"Orbiting\" : renderState.status;\n const velocityArrow = useMemo(() => buildArrow(projectTopDown(renderState.x, renderState.y), renderState.vx, renderState.vy, 34), [renderState.x, renderState.y, renderState.vx, renderState.vy]);\n const gravityArrow = useMemo(() => {\n const accel = scenario.id === \"artemis\" ? computeArtemisAcceleration(renderState.x, renderState.y, centralMass, orbitMass, scenario.moonX, scenario.moonY) : computeAcceleration(renderState.x, renderState.y, centralMass);\n return buildArrow(projectTopDown(renderState.x, renderState.y), accel.ax, accel.ay, 28);\n }, [renderState.x, renderState.y, centralMass, orbitMass, scenario.id, scenario.moonX, scenario.moonY]);\n\n const artemisBodies = useMemo(() => {\n if (scenario.id !== \"artemis\") return [];\n return [\n { x: 0, y: 0, mass: centralMass * 2.8, color: scenario.centralColor },\n { x: scenario.moonX, y: scenario.moonY, mass: orbitMass * 2.2, color: scenario.orbitColor },\n ];\n }, [scenario.id, scenario.centralColor, scenario.orbitColor, scenario.moonX, scenario.moonY, centralMass, orbitMass]);\n\n const standardRingPolylines = useMemo(() => {\n const rings = [];\n for (let i = 1; i <= 11; i += 1) {\n const radius = (scenario.escapeRadius * i) / 11;\n const points = [];\n for (let j = 0; j <= 40; j += 1) {\n const theta = (Math.PI * 2 * j) / 40;\n const p = projectFunnel(Math.cos(theta) * radius, Math.sin(theta) * radius, centralMass, funnelPitch);\n points.push(`${p.x.toFixed(1)},${p.y.toFixed(1)}`);\n }\n rings.push(points.join(\" \"));\n }\n return rings;\n }, [scenario.escapeRadius, centralMass, funnelPitch]);\n\n const standardSpokes = useMemo(() => {\n const spokes = [];\n for (let i = 0; i < 20; i += 1) {\n const theta = (Math.PI * 2 * i) / 20;\n const points = [];\n for (let j = 0; j <= 18; j += 1) {\n const radius = (scenario.escapeRadius * j) / 18;\n const p = projectFunnel(Math.cos(theta) * radius, Math.sin(theta) * radius, centralMass, funnelPitch);\n points.push(`${p.x.toFixed(1)},${p.y.toFixed(1)}`);\n }\n spokes.push(points.join(\" \"));\n }\n return spokes;\n }, [scenario.escapeRadius, centralMass, funnelPitch]);\n\n const renderStandardOrbitBody = () => (\n \n );\n\n const renderStandardFunnelBody = () => (\n <>\n

Separate visualization layer

Pitch{funnelPitch.toFixed(2)}×

\n setFunnelPitch(clamp(Number(e.target.value), 0.2, 1.2))} className=\"h-2 w-full cursor-pointer appearance-none rounded-full bg-slate-700 accent-violet-400\" />\n

\n \n \n );\n\n const renderArtemisMissionBody = () => {\n const moonCaptureRadius = scenario.moonCaptureRadius;\n const moonPoint = projectArtemis(scenario.moonX, scenario.moonY);\n const craftPoint = projectArtemis(renderState.x, renderState.y);\n const earthPoint = projectArtemis(0, 0);\n const earthRadius = 26 + centralMass * 4;\n const moonRadius = 12 + orbitMass * 2;\n const parkingRadius = Math.sqrt(scenario.startX * scenario.startX + scenario.startY * scenario.startY) * 1.72;\n const boostGuide = getArtemisBoostGuide(artemisMode, renderState.x, renderState.y, scenario.moonX, scenario.moonY);\n const needleDir = normalizeVector(renderState.vx, renderState.vy, { x: 0, y: -1 });\n const needleEnd = { x: craftPoint.x + needleDir.x * 20, y: craftPoint.y + needleDir.y * 20 };\n const needleLeft = { x: needleEnd.x - needleDir.x * 6 - needleDir.y * 4, y: needleEnd.y - needleDir.y * 6 + needleDir.x * 4 };\n const needleRight = { x: needleEnd.x - needleDir.x * 6 + needleDir.y * 4, y: needleEnd.y - needleDir.y * 6 - needleDir.x * 4 };\n return (\n \n );\n };\n\n const renderArtemisFunnelBody = () => {\n const yLines = Array.from({ length: 21 }, (_, i) => -230 + i * 26);\n const xLines = Array.from({ length: 34 }, (_, i) => -110 + i * 18);\n const xSamples = Array.from({ length: 110 }, (_, i) => -110 + i * 6);\n const ySamples = Array.from({ length: 74 }, (_, i) => -230 + i * 7);\n return (\n <>\n

Combined Earth and Moon wells {artemisMode === \"moonOrbit\" ? \"• moon capture active\" : artemisMode === \"transfer\" || artemisMode === \"returnTransfer\" ? \"• transfer active\" : \"• parking orbit\"}

Pitch{funnelPitch.toFixed(2)}×

\n setFunnelPitch(clamp(Number(e.target.value), 0.2, 1.2))} className=\"h-2 w-full cursor-pointer appearance-none rounded-full bg-slate-700 accent-violet-400\" />\n

\n \n \n );\n };\n\n const renderArtemisControlsBody = () => (\n <>\n

{Object.keys(scenario.presets).map((preset) => )}

\n `${v.toFixed(1)}×`} accent=\"accent-blue-400\" />\n `${v.toFixed(1)}×`} accent=\"accent-slate-300\" />\n `${v.toFixed(2)}×`} accent=\"accent-cyan-400\" />\n `${v.toFixed(2)} Δv`} accent=\"accent-fuchsia-400\" />\n { const next = clamp(value, 0.05, 2); setSimSpeed(next); narrate(\"Simulation speed changed\", \"Slow it down for teaching or speed it up to show the transfer more quickly.\"); }} formatter={(v) => `${v.toFixed(2)}×`} accent=\"accent-emerald-400\" />\n

\n \n \n \n \n \n \n \n \n

\n \n \n );\n\n const renderArtemisReadoutBody = () => {\n const artemisStory = getArtemisStory(artemisMode, artemisEarthDistance || 0, artemisMoonDistance || 0);\n const transferRadius = Math.sqrt(scenario.moonX * scenario.moonX + scenario.moonY * scenario.moonY);\n const parkingRadius = Math.sqrt(scenario.startX * scenario.startX + scenario.startY * scenario.startY);\n const boostGuide = getArtemisBoostGuide(artemisMode, renderState.x, renderState.y, scenario.moonX, scenario.moonY);\n const muEarth = G * centralMass;\n const transferA = (parkingRadius + transferRadius) / 2;\n const rawMoonBoost = Math.max(0, Math.sqrt(muEarth * (2 / parkingRadius - 1 / transferA)) - Math.sqrt(muEarth / parkingRadius));\n const suggestedMoonBoost = clamp(rawMoonBoost * 0.48, 2.5, 6.5);\n const moonOrbitRadius = simRef.current.__moonOrbitRadius || scenario.moonCaptureRadius;\n const muMoon = G * Math.max(orbitMass * 0.12, 0.01);\n const rawEarthBoost = Math.max(0, Math.sqrt(2) * Math.sqrt(muMoon / moonOrbitRadius) - Math.sqrt(muMoon / moonOrbitRadius));\n const suggestedEarthBoost = clamp(rawEarthBoost * 1.15 + 1.2, 2.5, 6.5);\n return (\n

Status

{status}

What Students Should Notice

{artemisStory.headline}

{artemisStory.detail}

Current Speed

{speed.toFixed(2)}

Boost Amount

{boostAmount.toFixed(2)}

Earth Distance

{(artemisEarthDistance || 0).toFixed(2)}

Moon Distance

{(artemisMoonDistance || 0).toFixed(2)}

Flight Mode

{artemisMode === \"moonOrbit\" ? \"Moon Orbit\" : artemisMode === \"transfer\" || artemisMode === \"returnTransfer\" ? \"Transfer\" : \"Parking Orbit\"}

Boost Guide

{boostGuide.status}

{boostGuide.usingMoonOrbit ? \"Return-to-Earth window\" : \"Earth-to-Moon window\"} • Suggested Δv: {(boostGuide.usingMoonOrbit ? suggestedEarthBoost : suggestedMoonBoost).toFixed(2)}

Mass Settings

Earth

{centralMass.toFixed(1)}×

Moon

{orbitMass.toFixed(1)}×

Mass Data

{formatMassKg(centralMassKg)}

{formatMassKg(orbitMassKg)}

Ratio: {ratioText}

\n );\n };\n\n const renderStandardControlsBody = () => (\n <>\n

{Object.keys(scenario.presets).map((preset) => )}

`${v.toFixed(1)}×`} accent=\"accent-amber-400\" /> `${v.toFixed(1)}×`} accent=\"accent-cyan-400\" /> `${v.toFixed(2)}× circular`} accent=\"accent-fuchsia-400\" /> { const next = clamp(value, 0.05, 2); setSimSpeed(next); narrate(\"Simulation speed changed\", \"Slow it down for teaching or speed it up to show long arcs more quickly.\"); }} formatter={(v) => `${v.toFixed(2)}×`} accent=\"accent-emerald-400\" />

\n \n \n );\n\n const renderStandardReadoutBody = () => (\n

Status

{status}

What Students Should Notice

{story.headline}

{story.detail}

Current Speed

{speed.toFixed(2)}

Distance

{distance.toFixed(2)}

Circular Speed

{circularHere.toFixed(2)}

Escape Speed

{escapeHere.toFixed(2)}

Mass Settings

{scenario.centralBodyName}

{centralMass.toFixed(1)}×

{scenario.orbitBodyName}

{orbitMass.toFixed(1)}×

Mass Data

{centralMassKg != null && orbitMassKg != null ?

{formatMassKg(centralMassKg)}

{formatMassKg(orbitMassKg)}

Ratio: {ratioText}

{scenario.massReadoutNote}

}

\n );\n\n const renderFabricTopBody = () => (\n

Click on the fabric to place a mass. Drag an existing mass to move it.

\n );\n\n const renderFabricSurfaceBody = () => {\n const yLines = Array.from({ length: 17 }, (_, i) => -210 + i * 28);\n const xLines = Array.from({ length: 17 }, (_, i) => -210 + i * 28);\n const xSamples = Array.from({ length: 65 }, (_, i) => -210 + i * 6.5);\n const ySamples = Array.from({ length: 65 }, (_, i) => -210 + i * 6.5);\n return (\n <>

Surface deformation responds to the placed masses.

Pitch{funnelPitch.toFixed(2)}×

setFunnelPitch(clamp(Number(e.target.value), 0.2, 1.2))} className=\"h-2 w-full cursor-pointer appearance-none rounded-full bg-slate-700 accent-violet-400\" />

\n );\n };\n\n const renderFabricControlsBody = () => (\n <>

{Object.keys(scenario.presets).map((preset) => )}

`${v.toFixed(1)}×`} accent=\"accent-amber-400\" /> { if (!selectedFabricMass) return; setFabricMasses((prev) => prev.map((mass) => (mass.id === selectedFabricMass.id ? { ...mass, mass: value } : mass))); }} formatter={(v) => `${v.toFixed(1)}×`} accent=\"accent-cyan-400\" />

\n );\n\n const renderFabricReadoutBody = () => (\n

Status

Interactive

What Students Should Notice

Heavier masses make deeper wells

Moving a mass changes the surface immediately. Multiple masses combine to reshape the fabric together.

Mass Count

{fabricMasses.length}

Pitch

{funnelPitch.toFixed(2)}×

Selected Mass

{selectedFabricMass ? `${selectedFabricMass.mass.toFixed(1)}×` : \"—\"}

Deepest Well

{deepestFabricDepth.toFixed(2)}

Selected Position

X: {selectedFabricMass ? selectedFabricMass.x.toFixed(1) : \"—\"}

Y: {selectedFabricMass ? selectedFabricMass.y.toFixed(1) : \"—\"}

Mass Data

Fabric Lab uses relative mass values for curvature only. This mode is visual and intentionally separate from the orbit engine.

\n );\n\n return (\n

Gravity Orbit Simulation

Classroom-ready V1+: compare orbit math to the funnel teaching model, explore the Fabric Lab, and simulate an Earth–Moon transfer.

\n \n

Live controls enabled

Funnel = teaching model only

\n\n

Simulation Modes

{scenario.subtitle}

\n {Object.values(SCENARIOS).map((entry) => )}\n

\n\n

Live Control Narration

{showNarration ? narration.headline : \"Narration hidden\"}

{showNarration ? narration.detail : \"Turn narration back on any time if you want the app to explain your live control changes.\"}

\n \n

\n\n

\n {scenario.id === \"artemis\" ? (\n <>\n {renderArtemisMissionBody()}\n {renderArtemisFunnelBody()}\n \n ) : scenario.id === \"fabric\" ? (\n

\n {renderFabricTopBody()}\n {renderFabricSurfaceBody()}\n

\n ) : (\n

\n {renderStandardOrbitBody()}\n {renderStandardFunnelBody()}\n

\n )}\n

\n\n \n {scenario.id === \"artemis\" ? renderArtemisControlsBody() : scenario.id === \"fabric\" ? renderFabricControlsBody() : renderStandardControlsBody()}\n \n\n \n {scenario.id === \"artemis\" ? renderArtemisReadoutBody() : scenario.id === \"fabric\" ? renderFabricReadoutBody() : renderStandardReadoutBody()}\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","13510411887777637333","traceTime",1776413247896]