[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","691129a80ee88191a0fba73868329f05","versionInt","title","Jupiter–saturn 5:2 Resonance Visualizer (top‑down View)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Play, Pause, RotateCcw, ChevronLeft, ChevronRight } from \"lucide-react\";\n\n// --- Physical constants ---\nconst R_SUN = 0.15;\nconst R_JUPITER = 5.2044;\nconst R_SATURN = 9.5826;\n// (for acceleration cue only) mild eccentricity so Saturn has perihelion/aphelion speed changes\nconst E_SATURN = 0.0565; // actual ~0.0565\nconst T_JUPITER = 11.862;\nconst T_SATURN = 29.4571;\nconst SYNODIC = 1 / (1 / T_JUPITER - 1 / T_SATURN);\nconst YEARS_DEFAULT = 120;\nconst MAX_SPAN = 300;\n\nfunction useAnimationFrame(callback) {\n const reqRef = useRef();\n const previousTimeRef = useRef();\n useEffect(() => {\n const animate = (time) => {\n if (previousTimeRef.current !== undefined) {\n const delta = (time - previousTimeRef.current) / 1000;\n callback(delta);\n }\n previousTimeRef.current = time;\n reqRef.current = requestAnimationFrame(animate);\n };\n reqRef.current = requestAnimationFrame(animate);\n return () => cancelAnimationFrame(reqRef.current);\n }, [callback]);\n}\n\nfunction drawStar(ctx, x, y, r, color) {\n ctx.beginPath();\n ctx.arc(x, y, r, 0, Math.PI * 2);\n ctx.fillStyle = color;\n ctx.shadowColor = color;\n ctx.shadowBlur = 18;\n ctx.fill();\n ctx.shadowBlur = 0;\n}\n\nfunction moduloTau(theta) {\n const tau = Math.PI * 2;\n let t = theta % tau;\n if (t < 0) t += tau;\n return t;\n}\n\nfunction angleDiff(a, b) {\n const tau = Math.PI * 2;\n let d = (a - b) % tau;\n if (d > Math.PI) d -= tau;\n if (d < -Math.PI) d += tau;\n return d;\n}\n\nexport default function ResonanceVisualizer() {\n const canvasRef = useRef(null);\n const [w, setW] = useState(900);\n const [h, setH] = useState(600);\n const [isPlaying, setIsPlaying] = useState(true);\n const [yearsPerSecond, setYearsPerSecond] = useState(2.5);\n const [time, setTime] = useState(0);\n const [span, setSpan] = useState(YEARS_DEFAULT);\n const [showConjunctions, setShowConjunctions] = useState(true);\n const [showRelativeVector, setShowRelativeVector] = useState(true);\n const [zoom, setZoom] = useState(26);\n\n const conjunctionsRef = useRef([]);\n const conjCounterRef = useRef(0); // running index for labels 1,2,3...\n const lastAngleDiffRef = useRef(null);\n const containerRef = useRef(null);\n\n useEffect(() => {\n const onResize = () => {\n const maxW = Math.min(1100, window.innerWidth - 32);\n setW(maxW);\n setH(Math.min(700, Math.max(420, Math.floor(maxW * 0.62))));\n };\n onResize();\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n useAnimationFrame((dt) => {\n if (!isPlaying) return;\n const increment = yearsPerSecond * dt;\n setTime((t) => t + increment);\n });\n\n // Angles and instantaneous acceleration cue for Saturn\n const angles = useMemo(() => {\n // heliocentric angles assuming circular mean motions for drawing\n const thetaJ = moduloTau((2 * Math.PI * time) / T_JUPITER);\n const thetaS = moduloTau((2 * Math.PI * time) / T_SATURN);\n // instantaneous angular speeds (for cues):\n const nJ = (2 * Math.PI) / T_JUPITER;\n const nS = (2 * Math.PI) / T_SATURN;\n // approximate Saturn acceleration phase with a simple eccentric model\n // mean anomaly for Saturn measured from perihelion at theta=0\n const MS = moduloTau(nS * time);\n // 2-term series solution for E (good for small e): E ≈ M + e sin M + (e^2/2) sin 2M\n const ES = MS + E_SATURN * Math.sin(MS) + (E_SATURN * E_SATURN / 2) * Math.sin(2 * MS);\n // true anomaly f from E\n const tanHalf = Math.sqrt((1 + E_SATURN) / (1 - E_SATURN)) * Math.tan(ES / 2);\n const fS = 2 * Math.atan(tanHalf);\n const fSNorm = moduloTau(fS);\n // instantaneous omega ∝ (1 + e cos f)^2/(1-e^2)^{3/2}\n const omegaS = nS * ((1 + E_SATURN * Math.cos(fSNorm)) ** 2) / Math.pow(1 - E_SATURN * E_SATURN, 1.5);\n const omegaJ = nJ; // keep Jupiter circular for simplicity\n const saturnAccelerating = omegaS >= nS;\n return { thetaJ, thetaS, omegaJ, omegaS, saturnAccelerating };\n }, [time]);\n\n // Detect and store conjunctions, with label and Saturn's state\n useEffect(() => {\n const d = angleDiff(angles.thetaJ, angles.thetaS);\n const last = lastAngleDiffRef.current;\n if (last === null) {\n lastAngleDiffRef.current = d;\n return;\n }\n if ((last < 0 && d >= 0) || (last > 0 && d <= 0)) {\n const cx = w / 2;\n const cy = h / 2;\n const scale = zoom;\n const x = cx + R_SATURN * scale * Math.cos(angles.thetaS);\n const y = cy + R_SATURN * scale * Math.sin(angles.thetaS);\n const id = ++conjCounterRef.current;\n conjunctionsRef.current.push({ id, t: time, theta: angles.thetaS, x, y, saturnAccelAtConj: angles.saturnAccelerating });\n // keep memory bounded reasonably\n if (conjunctionsRef.current.length > 400) conjunctionsRef.current.shift();\n }\n lastAngleDiffRef.current = d;\n }, [angles, time, w, h, zoom]);\n\n // Draw\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n canvas.width = w * devicePixelRatio;\n canvas.height = h * devicePixelRatio;\n canvas.style.width = `${w}px`;\n canvas.style.height = `${h}px`;\n const ctx = canvas.getContext(\"2d\");\n ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);\n\n // background\n ctx.fillStyle = \"#0b1020\";\n ctx.fillRect(0, 0, w, h);\n\n const cx = w / 2;\n const cy = h / 2;\n const scale = zoom;\n\n // Sun\n drawStar(ctx, cx, cy, Math.max(5, R_SUN * scale), \"#f8d66d\");\n\n // Orbits\n ctx.beginPath();\n ctx.arc(cx, cy, R_JUPITER * scale, 0, Math.PI * 2);\n ctx.strokeStyle = \"#666\";\n ctx.stroke();\n ctx.beginPath();\n ctx.arc(cx, cy, R_SATURN * scale, 0, Math.PI * 2);\n ctx.strokeStyle = \"#888\";\n ctx.stroke();\n\n // Planet positions\n const xJ = cx + R_JUPITER * scale * Math.cos(angles.thetaJ);\n const yJ = cy + R_JUPITER * scale * Math.sin(angles.thetaJ);\n const xS = cx + R_SATURN * scale * Math.cos(angles.thetaS);\n const yS = cy + R_SATURN * scale * Math.sin(angles.thetaS);\n\n ctx.beginPath();\n ctx.arc(xJ, yJ, 5, 0, Math.PI * 2);\n ctx.fillStyle = \"#9dd1ff\";\n ctx.fill();\n\n ctx.beginPath();\n ctx.arc(xS, yS, 5, 0, Math.PI * 2);\n ctx.fillStyle = \"#ffd29d\";\n ctx.fill();\n\n // Relative vector\n if (showRelativeVector) {\n ctx.beginPath();\n ctx.moveTo(xS, yS);\n ctx.lineTo(xJ, yJ);\n ctx.strokeStyle = \"#c084fc\";\n ctx.stroke();\n }\n\n // Conjunction markers with long persistence and labels\n if (showConjunctions) {\n // extend persistence window beyond visible span (e.g., 3×)\n const persistence = Math.max(span * 3, 120);\n ctx.font = \"11px Inter, system-ui, sans-serif\";\n ctx.textAlign = \"center\";\n for (const c of conjunctionsRef.current) {\n const age = Math.abs(c.t - time);\n if (age > persistence) continue;\n // color by Saturn's acceleration state at that conjunction\n const baseColor = c.saturnAccelAtConj ? \"#fbbf24\" /* amber: accelerating */ : \"#a78bfa\" /* violet: decelerating */;\n const alpha = Math.max(0.12, 1 - age / persistence);\n\n // marker circle\n ctx.beginPath();\n ctx.arc(c.x, c.y, 5, 0, Math.PI * 2);\n ctx.fillStyle = baseColor;\n ctx.globalAlpha = alpha;\n ctx.fill();\n ctx.globalAlpha = 1;\n ctx.lineWidth = 1.25;\n ctx.strokeStyle = `rgba(203,213,225,${alpha})`;\n ctx.stroke();\n\n // numeric label 1,2,3,... slightly above the dot\n ctx.fillStyle = \"#e2e8f0\";\n ctx.strokeStyle = \"#0b1020\";\n ctx.lineWidth = 3;\n ctx.strokeText(String(c.id), c.x, c.y - 8);\n ctx.fillText(String(c.id), c.x, c.y - 8);\n }\n }\n\n // HUD: counters and acceleration info\n ctx.fillStyle = \"#cbd5e1\";\n ctx.font = \"13px Inter, system-ui, sans-serif\";\n ctx.textAlign = \"left\";\n ctx.fillText(`Elapsed Time: ${time.toFixed(2)} years`, 16, 24);\n const accel = angles.saturnAccelerating ? \"Saturn accelerating (perihelion‑side)\" : \"Saturn decelerating (aphelion‑side)\";\n ctx.fillText(`Saturn phase: ${accel}`, 16, 44);\n }, [angles, w, h, time, span, showConjunctions, showRelativeVector, zoom]);\n\n return (\n

\n \n \n \n \n

\n\n

Playback speed (years/sec)

{yearsPerSecond.toFixed(2)}

\n setYearsPerSecond(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n

\n\n

\n \n setShowConjunctions(e.target.checked)} />\n Show conjunction markers\n \n \n setShowRelativeVector(e.target.checked)} />\n Show Jupiter–Saturn vector\n \n \n setZoom(parseFloat(e.target.value))} />\n Zoom ({zoom.toFixed(0)} px/AU)\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","1728076536624205282","traceTime",1789574029381]