2b:null 2c:["$","title",null,{"children":"3D Celestial Body-Centric Orbits | Lao | Observable"}] 31:Tff45,viz = { // Configuration const highlight = { table: {crosshair: true, path: false}, mouse: {crosshair: true, path: false}, centering: {crosshair: true, path: false} }; const maxWidth = null; const circleRadius = 0.04; const cameraSmoothing = 0.1; const transitionDuration = 7500; const fadeDuration = 1000; const transitionEase = d3.easeCubicInOut; const doubleClickMemory = 1000; // Star rendering configuration const starConfig = { sphereRadiusMultiplier: 20, minStarSize: 1.5, maxStarSize: 4, colorThreshold: 0.8, sizeGrowthThreshold: 0.4, dimStarColor: 0x0a0e27, brightStarColor: 0xffffff, // Motion blur settings motionBlurThreshold: 0.05, // Minimum camera rotation (radians) to trigger motion blur motionBlurMultiplier: .5, // Length multiplier for motion blur lines (0.1-1.0 recommended) maxStreakLength: null, // Maximum streak length in world units (null = no limit) magFalloff: .001, // Exponential falloff factor for line brightness (higher = faster dimming) magDim: 2.5 // Base magnitude multiplier for lines (lower = brighter lines) }; // State variables let currentSystem = data[0]; let centerBodyIndex = 0; let graphData = []; let animationTime = 0; let isPlaying = false; let lastFrameTime = Date.now(); let needsRender = true; let cameraMoving = false; let cameraTimeout = null; let hoveredBodyIndex = -1; let hoverSource = null; let defaultCameraPosition = new THREE.Vector3(); let cameraWasAtDefault = true; let lastIntersectedBodyIndex = -1; let lastIntersectedTime = 0; let mouseOverCanvas = false; let activeTransitions = []; let targetCenterIndex = 0; let transitionProgress = []; let activeFadeTransitions = []; let fadeProgress = []; // Camera tracking for motion blur let prevCameraPosition = new THREE.Vector3(); let prevCameraQuaternion = new THREE.Quaternion(); let cameraRotationDelta = 0; const spriteOffset = 0.02; const circlePoints = 24; // UI Container const container = html`

`; // Styles const styleEl = html``; if (maxWidth !== null) { container.style.maxWidth = `${maxWidth + 310}px`; } container.appendChild(styleEl); // Create UI elements IN ORDER const chartGroup = html`

`; const canvas = html`

`; const centricLabel = html`

`; const dateLabel = html`

`; const slidersGroup = html`

`; const systemTableGroup = html`

`; const scrubberContainer = html`

`; const speedContainer = html`

Speed

`; const pathLengthContainer = html`

Length

`; const pointsContainer = html`

Points

`; const starsContainer = html`

Stars

`; const systemSelect = html`

`; const bodyTableDiv = html`

`; // Append elements chartGroup.appendChild(canvas); chartGroup.appendChild(centricLabel); chartGroup.appendChild(dateLabel); slidersGroup.appendChild(scrubberContainer); slidersGroup.appendChild(speedContainer); slidersGroup.appendChild(pathLengthContainer); slidersGroup.appendChild(pointsContainer); slidersGroup.appendChild(starsContainer); systemTableGroup.appendChild(systemSelect); systemTableGroup.appendChild(bodyTableDiv); container.appendChild(chartGroup); container.appendChild(slidersGroup); container.appendChild(systemTableGroup); // Get UI elements const systemSelectInput = container.querySelector("#systemSelect"); const pathLengthSlider = container.querySelector("#pathLengthSlider"); const pathLengthValue = container.querySelector("#pathLengthValue"); const speedSlider = container.querySelector("#speedSlider"); const speedValue = container.querySelector("#speedValue"); const pointsSlider = container.querySelector("#pointsSlider"); const pointsInput = container.querySelector("#pointsInput"); const scrubber = container.querySelector("#scrubber"); const dateDisplay = container.querySelector("#dateDisplay"); const playPauseBtn = container.querySelector("#playPauseBtn"); const showStarsCheckbox = container.querySelector("#showStarsCheckbox"); function calculateCanvasSize() { const containerWidth = chartGroup.offsetWidth || 600; let canvasWidth = containerWidth; if (maxWidth !== null && canvasWidth > maxWidth) { canvasWidth = maxWidth; } let canvasHeight = Math.min(700, window.innerHeight - 100); if (maxWidth !== null) { canvasHeight = canvasWidth; } return { width: canvasWidth, height: canvasHeight }; } // Initialize Three.js const scene = new THREE.Scene(); scene.background = new THREE.Color(0x0a0e27); // STARFIELD CODE let starSphereRadius = null; let starPoints = null; let starLines = null; let starBasePositions = null; let starColors = null; let starSizes = null; let starMagnitudes = null; let starMagRange = { min: 0, max: 0 }; function createStarField(trajectoryRange) { if (!trajectoryRange || trajectoryRange === 0) { return; } starSphereRadius = trajectoryRange * starConfig.sphereRadiusMultiplier; const positions = []; const colors = []; if (typeof starData !== 'undefined' && starData && starData.length > 0) { const minMag = Math.min(...starData.map(s => +s.mag)); const maxMag = Math.max(...starData.map(s => +s.mag)); // Store magnitude range for later use starMagRange.min = minMag; starMagRange.max = maxMag; const bgColor = new THREE.Color(starConfig.dimStarColor); const brightColor = new THREE.Color(starConfig.brightStarColor); const sizes = []; const magnitudes = []; let validStars = 0; starData.forEach((star, index) => { const ra = +star.ra; const dec = +star.dec; const mag = +star.mag; if (isNaN(ra) || isNaN(dec) || isNaN(mag)) { return; } // RA is in HOURS (0-24), Dec is in DEGREES (-90 to +90) const raRad = (ra * 15 * Math.PI) / 180; const decRad = (dec * Math.PI) / 180; const x = starSphereRadius * Math.cos(decRad) * Math.cos(raRad); const y = starSphereRadius * Math.cos(decRad) * Math.sin(raRad); const z = starSphereRadius * Math.sin(decRad); positions.push(x, y, z); magnitudes.push(mag); // Calculate brightness (lower magnitude = brighter) const normalizedMag = (mag - minMag) / (maxMag - minMag); const brightness = Math.pow(1 - normalizedMag, 2); // Determine color based on colorThreshold let color; if (brightness <= starConfig.colorThreshold) { const colorBrightness = brightness / starConfig.colorThreshold; color = bgColor.clone().lerp(brightColor, colorBrightness); } else { color = brightColor.clone(); } // Determine size based on sizeGrowthThreshold let size; if (brightness <= starConfig.sizeGrowthThreshold) { size = starConfig.minStarSize; } else { const sizeRange = starConfig.maxStarSize - starConfig.minStarSize; const sizeBrightness = (brightness - starConfig.sizeGrowthThreshold) / (1 - starConfig.sizeGrowthThreshold); size = starConfig.minStarSize + sizeBrightness * sizeRange; } colors.push(color.r, color.g, color.b); sizes.push(size); validStars++; }); starSizes = sizes; starMagnitudes = new Float32Array(magnitudes); } else { const numTestStars = 1000; const sizes = []; for (let i = 0; i < numTestStars; i++) { const phi = Math.acos(1 - 2 * (i + 0.5) / numTestStars); const theta = Math.PI * (1 + Math.sqrt(5)) * i; const x = starSphereRadius * Math.sin(phi) * Math.cos(theta); const y = starSphereRadius * Math.sin(phi) * Math.sin(theta); const z = starSphereRadius * Math.cos(phi); positions.push(x, y, z); colors.push(1.0, 1.0, 1.0); sizes.push(2.0); } starSizes = sizes; } if (positions.length === 0) { return; } // Store base positions and colors starBasePositions = new Float32Array(positions); starColors = new Float32Array(colors); // Create Points geometry const pointsGeometry = new THREE.BufferGeometry(); pointsGeometry.setAttribute('position', new THREE.BufferAttribute(starBasePositions.slice(), 3)); pointsGeometry.setAttribute('color', new THREE.BufferAttribute(starColors.slice(), 3)); const hasSizeAttribute = starSizes && starSizes.length > 0; if (hasSizeAttribute) { pointsGeometry.setAttribute('size', new THREE.Float32BufferAttribute(starSizes, 1)); const starVertexShader = ` attribute float size; attribute vec3 color; varying vec3 vColor; void main() { vColor = color; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = size; gl_Position = projectionMatrix * mvPosition; } `; const starFragmentShader = ` varying vec3 vColor; void main() { vec2 center = gl_PointCoord - vec2(0.5, 0.5); float dist = length(center); if (dist > 0.5) discard; gl_FragColor = vec4(vColor, 1.0); } `; const pointsMaterial = new THREE.ShaderMaterial({ vertexShader: starVertexShader, fragmentShader: starFragmentShader, transparent: false, depthTest: false, depthWrite: false }); starPoints = new THREE.Points(pointsGeometry, pointsMaterial); } else { const pointsMaterial = new THREE.PointsMaterial({ size: 2.0, vertexColors: true, sizeAttenuation: false, transparent: false, opacity: 1.0, depthTest: false, depthWrite: false }); starPoints = new THREE.Points(pointsGeometry, pointsMaterial); } starPoints.renderOrder = -1; scene.add(starPoints); // Create LineSegments geometry (initially hidden) const linesGeometry = new THREE.BufferGeometry(); const linePositions = new Float32Array(positions.length * 2); // 2 points per line const lineColors = new Float32Array(colors.length * 2); // 2 colors per line (duplicate for each vertex) // Initialize line colors with original star colors for (let i = 0; i < colors.length; i++) { lineColors[i * 2] = colors[i]; lineColors[i * 2 + 1] = colors[i]; } linesGeometry.setAttribute('position', new THREE.BufferAttribute(linePositions, 3)); linesGeometry.setAttribute('color', new THREE.BufferAttribute(lineColors, 3)); const linesMaterial = new THREE.LineBasicMaterial({ vertexColors: true, transparent: false, depthTest: false, depthWrite: false }); starLines = new THREE.LineSegments(linesGeometry, linesMaterial); starLines.renderOrder = -1; starLines.visible = false; scene.add(starLines); } function updateStarMotionBlur() { if (!starPoints || !starLines || !starBasePositions) { return; } // Calculate camera rotation delta const currentQuat = camera.quaternion.clone(); cameraRotationDelta = currentQuat.angleTo(prevCameraQuaternion); // Always show points when enabled starPoints.visible = showStarsCheckbox.checked; // Switch between points and lines based on rotation speed const useMotionBlur = cameraRotationDelta > starConfig.motionBlurThreshold; if (useMotionBlur && showStarsCheckbox.checked) { // Show lines on top of points for motion blur effect starLines.visible = true; // Calculate motion blur direction in screen space const linePositions = starLines.geometry.attributes.position.array; const lineColors = starLines.geometry.attributes.color.array; // Create rotation axis from camera movement const prevDir = new THREE.Vector3().subVectors(controls.target, prevCameraPosition).normalize(); const currDir = new THREE.Vector3().subVectors(controls.target, camera.position).normalize(); const rotationAxis = new THREE.Vector3().crossVectors(prevDir, currDir).normalize(); // If no significant rotation axis, use camera up vector if (rotationAxis.lengthSq() < 0.0001) { rotationAxis.copy(camera.up); } // Calculate base streak length (arc length = angle * radius) let baseStreakLength = cameraRotationDelta * starSphereRadius * starConfig.motionBlurMultiplier; // Apply max streak length if configured if (starConfig.maxStreakLength !== null && baseStreakLength > starConfig.maxStreakLength) { baseStreakLength = starConfig.maxStreakLength; } // Prepare for magnitude-based color calculation const bgColor = new THREE.Color(starConfig.dimStarColor); const brightColor = new THREE.Color(starConfig.brightStarColor); const hasMagnitudes = starMagnitudes && starMagnitudes.length > 0; for (let i = 0; i < starBasePositions.length / 3; i++) { const starPos = new THREE.Vector3( starBasePositions[i * 3], starBasePositions[i * 3 + 1], starBasePositions[i * 3 + 2] ); // Calculate perpendicular direction for this star const starToCamera = new THREE.Vector3().subVectors(starPos, camera.position).normalize(); const perpendicular = new THREE.Vector3().crossVectors(rotationAxis, starToCamera).normalize(); // Create the streak offset const offset = perpendicular.multiplyScalar(baseStreakLength * 0.5); // Start point (trailing edge) linePositions[i * 6] = starPos.x - offset.x; linePositions[i * 6 + 1] = starPos.y - offset.y; linePositions[i * 6 + 2] = starPos.z - offset.z; // End point (leading edge) linePositions[i * 6 + 3] = starPos.x + offset.x; linePositions[i * 6 + 4] = starPos.y + offset.y; linePositions[i * 6 + 5] = starPos.z + offset.z; // Calculate line color based on magnitude with exponential falloff let lineColor; if (hasMagnitudes) { // Get original magnitude and apply base dimming const mag = starMagnitudes[i] * starConfig.magDim; // Apply exponential falloff: mag * e^(falloff * cameraRotation) // Higher rotation = higher adjusted magnitude = dimmer star const adjustedMag = mag * Math.exp(starConfig.magFalloff * cameraRotationDelta); // Clamp adjusted magnitude to a reasonable range const clampedAdjustedMag = Math.min(adjustedMag, starMagRange.max + 10); // Normalize the adjusted magnitude const normalizedMag = (clampedAdjustedMag - starMagRange.min) / (starMagRange.max - starMagRange.min); const clampedNormalizedMag = Math.max(0, Math.min(1, normalizedMag)); // Calculate brightness (lower magnitude = brighter) const brightness = Math.pow(1 - clampedNormalizedMag, 2); // Determine color based on colorThreshold if (brightness <= starConfig.colorThreshold) { const colorBrightness = brightness / starConfig.colorThreshold; lineColor = bgColor.clone().lerp(brightColor, colorBrightness); } else { lineColor = brightColor.clone(); } } else { // Fallback to original star color if no magnitude data lineColor = new THREE.Color( starColors[i * 3], starColors[i * 3 + 1], starColors[i * 3 + 2] ); } // Both ends of the line get the same color lineColors[i * 6] = lineColor.r; lineColors[i * 6 + 1] = lineColor.g; lineColors[i * 6 + 2] = lineColor.b; lineColors[i * 6 + 3] = lineColor.r; lineColors[i * 6 + 4] = lineColor.g; lineColors[i * 6 + 5] = lineColor.b; } starLines.geometry.attributes.position.needsUpdate = true; starLines.geometry.attributes.color.needsUpdate = true; } else { // Hide lines when not moving starLines.visible = false; } // Update previous camera state prevCameraPosition.copy(camera.position); prevCameraQuaternion.copy(camera.quaternion); } const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.sortObjects = true; let canvasSize = calculateCanvasSize(); renderer.setSize(canvasSize.width, canvasSize.height); renderer.setPixelRatio(window.devicePixelRatio); const camera = new THREE.PerspectiveCamera( 45, canvasSize.width / canvasSize.height, 1, 1e16 ); const controls = new THREE.TrackballControls(camera, renderer.domElement); controls.staticMoving = false; controls.dynamicDampingFactor = cameraSmoothing; controls.rotateSpeed = 2.0; controls.zoomSpeed = 1.2; controls.noRotate = false; controls.noZoom = false; controls.noPan = true; controls.screen.left = 0; controls.screen.top = 0; controls.screen.width = canvasSize.width; controls.screen.height = canvasSize.height; controls.addEventListener('change', () => { needsRender = true; cameraMoving = true; if (defaultCameraPosition.length() > 0) { const distance = camera.position.distanceTo(defaultCameraPosition); cameraWasAtDefault = distance < 1; } if (cameraTimeout) clearTimeout(cameraTimeout); cameraTimeout = setTimeout(() => { cameraMoving = false; }, 100); }); const bodyLines = []; const bodySprites = []; let bodyTableInputs = []; let hoverLineX = null; let hoverLineY = null; let hoverLineXNeg = null; let hoverLineYNeg = null; const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); const vertexShader = ` attribute float alpha; varying float vAlpha; void main() { vAlpha = alpha; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` uniform vec3 color; varying float vAlpha; void main() { gl_FragColor = vec4(color, vAlpha); } `; function createHoverLines() { if (hoverLineX) { hoverLineX.geometry.dispose(); hoverLineX.material.dispose(); scene.remove(hoverLineX); } if (hoverLineY) { hoverLineY.geometry.dispose(); hoverLineY.material.dispose(); scene.remove(hoverLineY); } if (hoverLineXNeg) { hoverLineXNeg.geometry.dispose(); hoverLineXNeg.material.dispose(); scene.remove(hoverLineXNeg); } if (hoverLineYNeg) { hoverLineYNeg.geometry.dispose(); hoverLineYNeg.material.dispose(); scene.remove(hoverLineYNeg); } const geometryXPos = new THREE.BufferGeometry(); const positionsXPos = new Float32Array([0, 0, 0, 1, 0, 0]); geometryXPos.setAttribute('position', new THREE.BufferAttribute(positionsXPos, 3)); const materialXPos = new THREE.LineBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.6 }); hoverLineX = new THREE.Line(geometryXPos, materialXPos); hoverLineX.visible = false; scene.add(hoverLineX); const geometryXNeg = new THREE.BufferGeometry(); const positionsXNeg = new Float32Array([0, 0, 0, -1, 0, 0]); geometryXNeg.setAttribute('position', new THREE.BufferAttribute(positionsXNeg, 3)); const materialXNeg = new THREE.LineBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.6 }); hoverLineXNeg = new THREE.Line(geometryXNeg, materialXNeg); hoverLineXNeg.visible = false; scene.add(hoverLineXNeg); const geometryYPos = new THREE.BufferGeometry(); const positionsYPos = new Float32Array([0, 0, 0, 0, 1, 0]); geometryYPos.setAttribute('position', new THREE.BufferAttribute(positionsYPos, 3)); const materialYPos = new THREE.LineBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.6 }); hoverLineY = new THREE.Line(geometryYPos, materialYPos); hoverLineY.visible = false; scene.add(hoverLineY); const geometryYNeg = new THREE.BufferGeometry(); const positionsYNeg = new Float32Array([0, 0, 0, 0, -1, 0]); geometryYNeg.setAttribute('position', new THREE.BufferAttribute(positionsYNeg, 3)); const materialYNeg = new THREE.LineBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.6 }); hoverLineYNeg = new THREE.Line(geometryYNeg, materialYNeg); hoverLineYNeg.visible = false; scene.add(hoverLineYNeg); } function updateHoverLines() { const inCenteringTransition = activeTransitions.length > 0 && highlight.centering.crosshair; let effectiveHoveredIndex = -1; if (inCenteringTransition) { effectiveHoveredIndex = targetCenterIndex; } else if (hoveredBodyIndex !== -1) { const shouldShowCrosshair = hoverSource === 'table' ? highlight.table.crosshair : hoverSource === 'mouse' ? highlight.mouse.crosshair : false; if (shouldShowCrosshair) { effectiveHoveredIndex = hoveredBodyIndex; } } if (effectiveHoveredIndex === -1 || !graphData[effectiveHoveredIndex].shouldGraph) { if (hoverLineX) hoverLineX.visible = false; if (hoverLineY) hoverLineY.visible = false; if (hoverLineXNeg) hoverLineXNeg.visible = false; if (hoverLineYNeg) hoverLineYNeg.visible = false; return; } const hoveredPlane = bodySprites.find(s => s.userData.bodyIndex === effectiveHoveredIndex); if (!hoveredPlane || !hoveredPlane.userData.basePosition) { if (hoverLineX) hoverLineX.visible = false; if (hoverLineY) hoverLineY.visible = false; if (hoverLineXNeg) hoverLineXNeg.visible = false; if (hoverLineYNeg) hoverLineYNeg.visible = false; return; } try { const body = graphData[effectiveHoveredIndex]; const planetPos = hoveredPlane.userData.basePosition; const distanceToCamera = camera.position.distanceTo(planetPos); const lineLength = distanceToCamera * 2; const planetColor = new THREE.Color(body.color); const cameraDirection = new THREE.Vector3(); camera.getWorldDirection(cameraDirection); const screenRight = new THREE.Vector3(); screenRight.crossVectors(cameraDirection, camera.up).normalize(); const screenUp = new THREE.Vector3(); screenUp.crossVectors(screenRight, cameraDirection).normalize(); if (hoverLineX) { const positions = hoverLineX.geometry.attributes.position.array; const endPos = planetPos.clone().add(screenRight.clone().multiplyScalar(lineLength)); positions[0] = planetPos.x; positions[1] = planetPos.y; positions[2] = planetPos.z; positions[3] = endPos.x; positions[4] = endPos.y; positions[5] = endPos.z; hoverLineX.geometry.attributes.position.needsUpdate = true; hoverLineX.material.color.copy(planetColor); hoverLineX.visible = true; } if (hoverLineXNeg) { const positions = hoverLineXNeg.geometry.attributes.position.array; const endPos = planetPos.clone().add(screenRight.clone().multiplyScalar(-lineLength)); positions[0] = planetPos.x; positions[1] = planetPos.y; positions[2] = planetPos.z; positions[3] = endPos.x; positions[4] = endPos.y; positions[5] = endPos.z; hoverLineXNeg.geometry.attributes.position.needsUpdate = true; hoverLineXNeg.material.color.copy(planetColor); hoverLineXNeg.visible = true; } if (hoverLineY) { const positions = hoverLineY.geometry.attributes.position.array; const endPos = planetPos.clone().add(screenUp.clone().multiplyScalar(lineLength)); positions[0] = planetPos.x; positions[1] = planetPos.y; positions[2] = planetPos.z; positions[3] = endPos.x; positions[4] = endPos.y; positions[5] = endPos.z; hoverLineY.geometry.attributes.position.needsUpdate = true; hoverLineY.material.color.copy(planetColor); hoverLineY.visible = true; } if (hoverLineYNeg) { const positions = hoverLineYNeg.geometry.attributes.position.array; const endPos = planetPos.clone().add(screenUp.clone().multiplyScalar(-lineLength)); positions[0] = planetPos.x; positions[1] = planetPos.y; positions[2] = planetPos.z; positions[3] = endPos.x; positions[4] = endPos.y; positions[5] = endPos.z; hoverLineYNeg.geometry.attributes.position.needsUpdate = true; hoverLineYNeg.material.color.copy(planetColor); hoverLineYNeg.visible = true; } } catch (e) { if (hoverLineX) hoverLineX.visible = false; if (hoverLineY) hoverLineY.visible = false; if (hoverLineXNeg) hoverLineXNeg.visible = false; if (hoverLineYNeg) hoverLineYNeg.visible = false; } } function checkIntersections() { if (!mouseOverCanvas) { return; } raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(bodySprites); let newHoveredIndex = -1; if (intersects.length > 0) { for (const intersect of intersects) { const bodyIndex = intersect.object.userData.bodyIndex; if (graphData[bodyIndex] && graphData[bodyIndex].shouldGraph) { newHoveredIndex = bodyIndex; lastIntersectedBodyIndex = bodyIndex; lastIntersectedTime = Date.now(); break; } } } if (newHoveredIndex !== hoveredBodyIndex) { if (hoveredBodyIndex !== -1 && bodyTableInputs[hoveredBodyIndex]) { const oldRow = bodyTableInputs[hoveredBodyIndex].radio.closest('tr'); if (oldRow) oldRow.style.backgroundColor = ''; } hoveredBodyIndex = newHoveredIndex; hoverSource = newHoveredIndex !== -1 ? 'mouse' : null; if (hoveredBodyIndex !== -1 && bodyTableInputs[hoveredBodyIndex]) { const newRow = bodyTableInputs[hoveredBodyIndex].radio.closest('tr'); if (newRow) newRow.style.backgroundColor = '#FFFFCC'; } needsRender = true; } } function updatePathLengthDisplay() { const days = Math.pow(10, parseFloat(pathLengthSlider.value)); pathLengthValue.textContent = days.toFixed(0) + 'd'; } function updateSpeedDisplay() { const speed = Math.pow(10, parseFloat(speedSlider.value)); speedValue.textContent = speed.toFixed(1) + 'd/s'; } function updatePointsDisplay() { const points = Math.pow(10, parseFloat(pointsSlider.value)); pointsInput.value = Math.round(points); } function safeInterpolate(jd, bodyData) { if (jd <= bodyData[0][0]) { return bodyData[0]; } if (jd >= bodyData[bodyData.length - 1][0]) { return bodyData[bodyData.length - 1]; } return interpolate(jd, bodyData); } function startCenterTransition(newCenterIndex) { const now = Date.now(); activeTransitions = activeTransitions.filter(t => now - t.startTime < transitionDuration); activeTransitions.push({ oldCenterIndex: targetCenterIndex, newCenterIndex: newCenterIndex, startTime: now, duration: transitionDuration }); targetCenterIndex = newCenterIndex; updateCentricLabel(); needsRender = true; } function startFadeTransition(bodyIndex, fadeOut) { const now = Date.now(); activeFadeTransitions = activeFadeTransitions.filter(t => t.bodyIndex !== bodyIndex); if (!fadeOut) { graphData[bodyIndex].shouldGraph = true; if (bodyTableInputs[bodyIndex]) { bodyTableInputs[bodyIndex].checkbox.checked = true; } } activeFadeTransitions.push({ bodyIndex: bodyIndex, startTime: now, duration: fadeDuration, fadeOut: fadeOut }); needsRender = true; } function updateTransitionProgress() { const now = Date.now(); activeTransitions = activeTransitions.filter(t => now - t.startTime < transitionDuration); transitionProgress = activeTransitions.map(transition => { const elapsed = now - transition.startTime; const t = Math.min(elapsed / transition.duration, 1.0); return { oldCenterIndex: transition.oldCenterIndex, newCenterIndex: transition.newCenterIndex, easedT: transitionEase(t) }; }); if (activeTransitions.length === 0 && transitionProgress.length === 0 && centerBodyIndex !== targetCenterIndex) { centerBodyIndex = targetCenterIndex; calculateGraphData(); } } function updateFadeProgress() { const now = Date.now(); fadeProgress = []; const completedFades = []; activeFadeTransitions = activeFadeTransitions.filter(fade => { const elapsed = now - fade.startTime; if (elapsed >= fade.duration) { completedFades.push(fade); return false; } const t = Math.min(elapsed / fade.duration, 1.0); const easedT = transitionEase(t); const opacity = fade.fadeOut ? 1.0 - easedT : easedT; fadeProgress.push({ bodyIndex: fade.bodyIndex, opacity: opacity }); return true; }); completedFades.forEach(fade => { if (fade.fadeOut) { graphData[fade.bodyIndex].shouldGraph = false; if (bodyTableInputs[fade.bodyIndex]) { bodyTableInputs[fade.bodyIndex].checkbox.checked = false; } } }); } function getFadeOpacity(bodyIndex) { const fade = fadeProgress.find(f => f.bodyIndex === bodyIndex); return fade ? fade.opacity : 1.0; } function isFading(bodyIndex) { return fadeProgress.some(f => f.bodyIndex === bodyIndex); } function getTweenedCenter(jd) { if (transitionProgress.length === 0) { return null; } let currentCenter = null; for (let i = 0; i < transitionProgress.length; i++) { const progress = transitionProgress[i]; const oldBody = currentSystem.system[progress.oldCenterIndex]; const newBody = currentSystem.system[progress.newCenterIndex]; const oldPos = safeInterpolate(jd, oldBody.data); const newPos = safeInterpolate(jd, newBody.data); const startPos = currentCenter || oldPos; currentCenter = [ jd, startPos[1] + (newPos[1] - startPos[1]) * progress.easedT, startPos[2] + (newPos[2] - startPos[2]) * progress.easedT, startPos[3] + (newPos[3] - startPos[3]) * progress.easedT, startPos[4] + (newPos[4] - startPos[4]) * progress.easedT, startPos[5] + (newPos[5] - startPos[5]) * progress.easedT, startPos[6] + (newPos[6] - startPos[6]) * progress.easedT ]; } return currentCenter; } function getDateRange() { let minStart = -Infinity; let maxEnd = Infinity; currentSystem.system.forEach(body => { const bodyStart = body.data[0][0]; const bodyEnd = body.data[body.data.length - 1][0]; minStart = Math.max(minStart, bodyStart); maxEnd = Math.min(maxEnd, bodyEnd); }); return { min: minStart, max: maxEnd }; } function updateScrubberRange() { const range = getDateRange(); scrubber.min = range.min; scrubber.max = range.max; scrubber.value = range.min; animationTime = range.min; updateDateDisplay(); } function updateDateDisplay() { const JD = animationTime; const a = Math.floor(JD + 0.5); const b = a + 1537; const c = Math.floor((b - 122.1) / 365.25); const d = Math.floor(365.25 * c); const e = Math.floor((b - d) / 30.6001); const day = b - d - Math.floor(30.6001 * e); const month = e - (e < 14 ? 1 : 13); const year = c - (month > 2 ? 4716 : 4715); const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const yearStr = year.toString().padStart(4, '0'); const monthStr = monthNames[month - 1]; const dayStr = day.toString().padStart(2, '0'); const dateStr = yearStr + ' ' + monthStr + ' ' + dayStr; dateDisplay.textContent = dateStr; dateLabel.textContent = dateStr; } function updateCentricLabel() { const centerBody = currentSystem.system[targetCenterIndex]; const bodyInfo = bodies[centerBody.name]; if (bodyInfo) { centricLabel.textContent = bodyInfo.centric || ""; centricLabel.style.color = bodyInfo.color; } } function applySystemSettings(systemOption) { const settings = systems[systemOption]; if (!settings) return; speedSlider.min = settings.speed.min; speedSlider.max = settings.speed.max; speedSlider.value = settings.speed.value; updateSpeedDisplay(); pathLengthSlider.min = settings.length.min; pathLengthSlider.max = settings.length.max; pathLengthSlider.value = settings.length.value; updatePathLengthDisplay(); pointsSlider.min = settings.points.min; pointsSlider.max = settings.points.max; pointsSlider.value = settings.points.value; updatePointsDisplay(); const range = getDateRange(); animationTime = range.min + (range.max - range.min) * (settings.scrubberPercent / 100); scrubber.value = animationTime; updateDateDisplay(); isPlaying = settings.play; playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play'; if (isPlaying) { lastFrameTime = Date.now(); needsRender = true; } } function applyUncheckedBodies(systemOption) { const settings = systems[systemOption]; if (!settings) return; const uncheckedSet = new Set(settings.unchecked); currentSystem.system.forEach((body, index) => { const shouldCheck = !uncheckedSet.has(body.name); if (bodyTableInputs[index]) { bodyTableInputs[index].checkbox.checked = shouldCheck; } }); } function createBodyTable() { bodyTableDiv.innerHTML = ''; bodyTableInputs = []; const table = html`

Center	Graph	Name	Color	Symbol

`; bodyTableDiv.appendChild(table); const tbody = table.querySelector("#bodyTableBody"); currentSystem.system.forEach((body, index) => { const row = html` ${body.name} `; tbody.appendChild(row); const inputs = { radio: row.querySelector('input[type="radio"]'), checkbox: row.querySelector('.graphCheck'), color: row.querySelector('.colorInput'), symbol: row.querySelector('.symbolInput'), bodyName: body.name }; bodyTableInputs.push(inputs); const centerCell = row.querySelector('.centerCell'); centerCell.addEventListener('click', (e) => { if (e.target === inputs.radio) return; inputs.radio.checked = true; startCenterTransition(index); needsRender = true; }); const graphCell = row.querySelector('.graphCell'); graphCell.addEventListener('click', (e) => { if (e.target === inputs.checkbox) return; inputs.checkbox.checked = !inputs.checkbox.checked; const fadeOut = !inputs.checkbox.checked; startFadeTransition(index, fadeOut); needsRender = true; }); const nameCell = row.querySelector('.nameCell'); nameCell.addEventListener('click', () => { inputs.radio.checked = true; startCenterTransition(index); needsRender = true; }); row.addEventListener('mouseenter', () => { hoveredBodyIndex = index; hoverSource = 'table'; row.style.backgroundColor = '#FFFFCC'; needsRender = true; }); row.addEventListener('mouseleave', () => { hoveredBodyIndex = -1; hoverSource = null; row.style.backgroundColor = ''; needsRender = true; }); inputs.radio.addEventListener('change', () => { startCenterTransition(index); needsRender = true; }); inputs.checkbox.addEventListener('change', () => { const fadeOut = !inputs.checkbox.checked; startFadeTransition(index, fadeOut); needsRender = true; }); inputs.color.addEventListener('input', (e) => { if (bodies[body.name]) { bodies[body.name].color = e.target.value; } graphData[index].color = e.target.value; const line = bodyLines.find(l => l.userData.bodyIndex === index); if (line && line.material.uniforms) { line.material.uniforms.color.value.set(e.target.value); } updateSprites(); needsRender = true; }); inputs.symbol.addEventListener('change', (e) => { if (bodies[body.name]) { bodies[body.name].symbol = e.target.value; } graphData[index].symbol = e.target.value; updateSprites(); needsRender = true; }); }); } function calculateGraphData() { graphData = currentSystem.system.map((body, bodyIndex) => { const centerBody = currentSystem.system[centerBodyIndex]; let translatedData; if (body.data.length !== centerBody.data.length) { if (body.data.length > centerBody.data.length) { translatedData = body.data.map((point) => { const jd = point[0]; const centerPoint = safeInterpolate(jd, centerBody.data); return [ point[0], point[1] - centerPoint[1], point[2] - centerPoint[2], point[3] - centerPoint[3], point[4] - centerPoint[4], point[5] - centerPoint[5], point[6] - centerPoint[6] ]; }); } else { translatedData = centerBody.data.map((centerPoint) => { const jd = centerPoint[0]; const bodyPoint = safeInterpolate(jd, body.data); return [ centerPoint[0], bodyPoint[1] - centerPoint[1], bodyPoint[2] - centerPoint[2], bodyPoint[3] - centerPoint[3], bodyPoint[4] - centerPoint[4], bodyPoint[5] - centerPoint[5], bodyPoint[6] - centerPoint[6] ]; }); } } else { translatedData = body.data.map((point, i) => { const centerPoint = centerBody.data[i]; return [ point[0], point[1] - centerPoint[1], point[2] - centerPoint[2], point[3] - centerPoint[3], point[4] - centerPoint[4], point[5] - centerPoint[5], point[6] - centerPoint[6] ]; }); } const shouldGraph = bodyTableInputs[bodyIndex]?.checkbox.checked ?? true; return { name: body.name, data: translatedData, color: bodies[body.name]?.color || '#FFFFFF', symbol: bodies[body.name]?.symbol || '●', shouldGraph: shouldGraph }; }); } function calculateTrajectoryRange() { let maxRange = 0; graphData.forEach((body, index) => { if (!body.shouldGraph) return; body.data.forEach(point => { const r = Math.sqrt(point[1] ** 2 + point[2] ** 2); if (r > maxRange) maxRange = r; }); }); return maxRange; } function updateCamera() { const range = calculateTrajectoryRange(); console.log("DEBUG: updateCamera - trajectory range = " + range); if (range === 0) return; if (starPoints) { starPoints.geometry.dispose(); starPoints.material.dispose(); scene.remove(starPoints); starPoints = null; } if (starLines) { starLines.geometry.dispose(); starLines.material.dispose(); scene.remove(starLines); starLines = null; } createStarField(range); if (starPoints) { starPoints.visible = showStarsCheckbox.checked; } if (starLines) { starLines.visible = false; // Lines only show when moving } const distance = range * 2.5; camera.position.set(0, 0, distance); camera.lookAt(0, 0, 0); camera.near = distance / 1000; camera.far = starSphereRadius * 3; camera.updateProjectionMatrix(); controls.target.set(0, 0, 0); controls.maxDistance = distance * 5; controls.update(); // Initialize camera tracking prevCameraPosition.copy(camera.position); prevCameraQuaternion.copy(camera.quaternion); console.log("DEBUG: Camera position: " + camera.position.x + ", " + camera.position.y + ", " + camera.position.z); console.log("DEBUG: Camera near: " + camera.near + ", far: " + camera.far); console.log("DEBUG: Star sphere at radius: " + starSphereRadius); defaultCameraPosition.copy(camera.position); cameraWasAtDefault = true; } function createSpriteTexture(color, symbol, size) { size = size || 64; const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const ctx = canvas.getContext('2d'); ctx.fillStyle = color; ctx.fillRect(0, 0, size, size); const rgb = parseInt(color.slice(1), 16); const r = (rgb >> 16) & 255; const g = (rgb >> 8) & 255; const b = rgb & 255; const luminance = 0.299 * r + 0.587 * g + 0.114 * b; const textColor = luminance > 128 ? '#000000' : '#FFFFFF'; ctx.fillStyle = textColor; ctx.font = (size * 0.5) + 'px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(symbol, size / 2, size / 2); const texture = new THREE.CanvasTexture(canvas); texture.needsUpdate = true; return texture; } function createTransparentSpriteTexture(color, symbol, size) { size = size || 64; const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, size, size); ctx.fillStyle = color; ctx.beginPath(); ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2); ctx.fill(); const rgb = parseInt(color.slice(1), 16); const r = (rgb >> 16) & 255; const g = (rgb >> 8) & 255; const b = rgb & 255; const luminance = 0.299 * r + 0.587 * g + 0.114 * b; const textColor = luminance > 128 ? '#000000' : '#FFFFFF'; ctx.fillStyle = textColor; ctx.font = (size * 0.5) + 'px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(symbol, size / 2, size / 2); const texture = new THREE.CanvasTexture(canvas); texture.needsUpdate = true; return texture; } function createCircleGeometry() { const segments = circlePoints; const geometry = new THREE.BufferGeometry(); const vertices = []; const uvs = []; const indices = []; vertices.push(0, 0, 0); uvs.push(0.5, 0.5); for (let i = 0; i <= segments; i++) { const angle = (i / segments) * Math.PI * 2; vertices.push(Math.cos(angle) * 0.5, Math.sin(angle) * 0.5, 0); uvs.push(Math.cos(angle) * 0.5 + 0.5, Math.sin(angle) * 0.5 + 0.5); } for (let i = 1; i <= segments; i++) { indices.push(0, i, i + 1); } geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2)); geometry.setIndex(indices); return geometry; } function updateScene() { bodyLines.forEach(line => { line.geometry.dispose(); line.material.dispose(); scene.remove(line); }); bodySprites.forEach(plane => { if (plane.material.map) { plane.material.map.dispose(); } plane.material.dispose(); plane.geometry.dispose(); scene.remove(plane); }); bodyLines.length = 0; bodySprites.length = 0; graphData.forEach((body, index) => { const numPoints = parseInt(pointsInput.value); const positions = new Float32Array(numPoints * 3); const alphas = new Float32Array(numPoints); const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('alpha', new THREE.BufferAttribute(alphas, 1)); const material = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(body.color) } }, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true, depthWrite: false, depthTest: true }); const line = new THREE.Line(geometry, material); line.userData = { bodyIndex: index }; scene.add(line); bodyLines.push(line); const texture = createSpriteTexture(body.color, body.symbol, 64); const diskGeometry = createCircleGeometry(); const diskMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: false, depthTest: true, depthWrite: true, side: THREE.DoubleSide }); const plane = new THREE.Mesh(diskGeometry, diskMaterial); plane.scale.set(1, 1, 1); plane.userData = { bodyIndex: index, lastSymbol: body.symbol, lastColor: body.color, usingTransparentTexture: false }; scene.add(plane); bodySprites.push(plane); }); } function updatePaths() { const pathLengthDays = Math.pow(10, parseFloat(pathLengthSlider.value)); const numPoints = parseInt(pointsInput.value); const inCenteringTransition = activeTransitions.length > 0 && highlight.centering.path; bodyLines.forEach((line, lineIndex) => { const bodyIndex = line.userData.bodyIndex; const body = graphData[bodyIndex]; const fadeOpacity = getFadeOpacity(bodyIndex); const bodyIsFading = isFading(bodyIndex); if (!bodyIsFading && !body.shouldGraph) { return; } const geometry = line.geometry; const positions = geometry.attributes.position.array; const alphas = geometry.attributes.alpha.array; const startJD = Math.max(animationTime - pathLengthDays, currentSystem.system[bodyIndex].data[0][0]); const endJD = animationTime; const deltaJD = (endJD - startJD) / (numPoints - 1); const isCenteringBody = inCenteringTransition && bodyIndex === targetCenterIndex; const isHovered = hoveredBodyIndex === bodyIndex; const shouldHighlightPath = hoverSource === 'table' ? highlight.table.path : hoverSource === 'mouse' ? highlight.mouse.path : false; for (let i = 0; i < numPoints; i++) { const jd = startJD + i * deltaJD; try { const bodyPos = safeInterpolate(jd, currentSystem.system[bodyIndex].data); const tweenedCenter = getTweenedCenter(jd); let relativePos; if (tweenedCenter) { relativePos = [ jd, bodyPos[1] - tweenedCenter[1], bodyPos[2] - tweenedCenter[2], bodyPos[3] - tweenedCenter[3], bodyPos[4] - tweenedCenter[4], bodyPos[5] - tweenedCenter[5], bodyPos[6] - tweenedCenter[6] ]; } else { relativePos = safeInterpolate(jd, body.data); } positions[i * 3] = relativePos[1]; positions[i * 3 + 1] = relativePos[2]; positions[i * 3 + 2] = relativePos[3]; const baseAlpha = (isCenteringBody || (isHovered && shouldHighlightPath)) ? 1.0 : i / (numPoints - 1); alphas[i] = baseAlpha * fadeOpacity; } catch (e) { positions[i * 3] = 0; positions[i * 3 + 1] = 0; positions[i * 3 + 2] = 0; alphas[i] = 0; } } geometry.attributes.position.needsUpdate = true; geometry.attributes.alpha.needsUpdate = true; }); } function updateSprites() { bodySprites.forEach((plane, spriteIndex) => { const bodyIndex = plane.userData.bodyIndex; const body = graphData[bodyIndex]; const fadeOpacity = getFadeOpacity(bodyIndex); const bodyIsFading = isFading(bodyIndex); if (!bodyIsFading && !body.shouldGraph) { plane.visible = false; return; } plane.visible = true; if (bodyIsFading) { if (!plane.userData.usingTransparentTexture) { const transparentTexture = createTransparentSpriteTexture(body.color, body.symbol, 64); if (plane.material.map) { plane.material.map.dispose(); } plane.material.map = transparentTexture; plane.material.needsUpdate = true; plane.userData.usingTransparentTexture = true; } plane.material.transparent = true; plane.material.depthWrite = false; plane.material.opacity = fadeOpacity; } else { if (plane.userData.usingTransparentTexture) { const opaqueTexture = createSpriteTexture(body.color, body.symbol, 64); if (plane.material.map) { plane.material.map.dispose(); } plane.material.map = opaqueTexture; plane.material.needsUpdate = true; plane.userData.usingTransparentTexture = false; plane.userData.lastSymbol = body.symbol; plane.userData.lastColor = body.color; } plane.material.transparent = false; plane.material.depthWrite = true; plane.material.opacity = 1.0; } try { const bodyPos = safeInterpolate(animationTime, currentSystem.system[bodyIndex].data); const tweenedCenter = getTweenedCenter(animationTime); let relativePos; if (tweenedCenter) { relativePos = [ animationTime, bodyPos[1] - tweenedCenter[1], bodyPos[2] - tweenedCenter[2], bodyPos[3] - tweenedCenter[3] ]; } else { relativePos = safeInterpolate(animationTime, body.data); } const basePosition = new THREE.Vector3(relativePos[1], relativePos[2], relativePos[3]); plane.userData.basePosition = basePosition.clone(); const distanceToCamera = camera.position.distanceTo(basePosition); const offsetDir = new THREE.Vector3(); offsetDir.subVectors(camera.position, basePosition).normalize(); const offset = offsetDir.multiplyScalar(distanceToCamera * spriteOffset); const finalPosition = basePosition.clone().add(offset); plane.position.copy(finalPosition); const scaleFactor = distanceToCamera * circleRadius; plane.scale.set(scaleFactor, scaleFactor, 1); plane.quaternion.copy(camera.quaternion); if (!bodyIsFading && (!plane.userData.lastSymbol || plane.userData.lastSymbol !== body.symbol || !plane.userData.lastColor || plane.userData.lastColor !== body.color)) { const texture = createSpriteTexture(body.color, body.symbol, 64); if (plane.material.map) { plane.material.map.dispose(); } plane.material.map = texture; plane.material.needsUpdate = true; plane.userData.lastSymbol = body.symbol; plane.userData.lastColor = body.color; } } catch (e) { plane.visible = false; } }); } function animate() { requestAnimationFrame(animate); updateTransitionProgress(); updateFadeProgress(); controls.update(); if (starPoints || starLines) { updateStarMotionBlur(); if (starPoints) { starPoints.position.copy(camera.position); } if (starLines) { starLines.position.copy(camera.position); } } checkIntersections(); if (isPlaying) { const now = Date.now(); const deltaTime = (now - lastFrameTime) / 1000; lastFrameTime = now; const speed = Math.pow(10, parseFloat(speedSlider.value)); animationTime += speed * deltaTime; const range = getDateRange(); if (animationTime > range.max) { animationTime = range.min; } if (animationTime < range.min) { animationTime = range.min; } scrubber.value = animationTime; updateDateDisplay(); needsRender = true; } if (activeTransitions.length > 0 || activeFadeTransitions.length > 0) { needsRender = true; } if (isPlaying || needsRender) { updatePaths(); } updateSprites(); updateHoverLines(); if (needsRender || cameraMoving) { renderer.render(scene, camera); if (!isPlaying && !cameraMoving && activeTransitions.length === 0 && activeFadeTransitions.length === 0) { needsRender = false; } } } systemSelectInput.addEventListener('change', (e) => { currentSystem = data.find(d => d.option === e.target.value); centerBodyIndex = 0; targetCenterIndex = 0; activeTransitions = []; lastIntersectedBodyIndex = -1; lastIntersectedTime = 0; createBodyTable(); applyUncheckedBodies(e.target.value); calculateGraphData(); updateScrubberRange(); applySystemSettings(e.target.value); updateCamera(); updateScene(); updatePaths(); updateSprites(); createHoverLines(); updateCentricLabel(); needsRender = true; }); pathLengthSlider.addEventListener('input', () => { updatePathLengthDisplay(); needsRender = true; }); speedSlider.addEventListener('input', updateSpeedDisplay); pointsSlider.addEventListener('input', () => { updatePointsDisplay(); updateScene(); needsRender = true; }); pointsInput.addEventListener('change', (e) => { const value = parseInt(e.target.value); if (value >= 100) { if (value <= 10000) { pointsSlider.value = Math.log10(value); } updateScene(); needsRender = true; } }); scrubber.addEventListener('input', (e) => { const range = getDateRange(); animationTime = Math.max(range.min, Math.min(range.max, parseFloat(e.target.value))); scrubber.value = animationTime; updateDateDisplay(); needsRender = true; }); playPauseBtn.addEventListener('click', () => { isPlaying = !isPlaying; playPauseBtn.textContent = isPlaying ? 'Pause' : 'Play'; if (isPlaying) { lastFrameTime = Date.now(); needsRender = true; } }); showStarsCheckbox.addEventListener('change', () => { if (starPoints) { starPoints.visible = showStarsCheckbox.checked; } if (starLines) { // Lines only visible if checkbox is on AND camera is moving starLines.visible = showStarsCheckbox.checked && cameraRotationDelta > starConfig.motionBlurThreshold; } needsRender = true; }); const resizeObserver = new ResizeObserver(() => { const newSize = calculateCanvasSize(); camera.aspect = newSize.width / newSize.height; camera.updateProjectionMatrix(); renderer.setSize(newSize.width, newSize.height); controls.screen.width = newSize.width; controls.screen.height = newSize.height; controls.handleResize(); needsRender = true; }); resizeObserver.observe(chartGroup); window.addEventListener('resize', () => { const newSize = calculateCanvasSize(); camera.aspect = newSize.width / newSize.height; camera.updateProjectionMatrix(); renderer.setSize(newSize.width, newSize.height); controls.screen.width = newSize.width; controls.screen.height = newSize.height; controls.handleResize(); needsRender = true; }); canvas.addEventListener('mousemove', (event) => { const rect = canvas.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; }); canvas.addEventListener('mouseenter', () => { mouseOverCanvas = true; }); canvas.addEventListener('mouseleave', () => { mouseOverCanvas = false; if (hoveredBodyIndex !== -1) { if (bodyTableInputs[hoveredBodyIndex]) { const row = bodyTableInputs[hoveredBodyIndex].radio.closest('tr'); if (row) row.style.backgroundColor = ''; } hoveredBodyIndex = -1; hoverSource = null; needsRender = true; } lastIntersectedBodyIndex = -1; lastIntersectedTime = 0; }); canvas.addEventListener('dblclick', (event) => { const now = Date.now(); const timeSinceIntersection = now - lastIntersectedTime; if (timeSinceIntersection <= doubleClickMemory && lastIntersectedBodyIndex !== -1 && graphData[lastIntersectedBodyIndex] && graphData[lastIntersectedBodyIndex].shouldGraph) { const bodyIndex = lastIntersectedBodyIndex; if (bodyTableInputs[bodyIndex]) { bodyTableInputs[bodyIndex].radio.checked = true; } startCenterTransition(bodyIndex); } }); targetCenterIndex = centerBodyIndex; updatePathLengthDisplay(); updateSpeedDisplay(); updatePointsDisplay(); createBodyTable(); updateScrubberRange(); applyUncheckedBodies(currentSystem.option); calculateGraphData(); applySystemSettings(currentSystem.option); updateCamera(); updateScene(); updatePaths(); updateSprites(); createHoverLines(); updateCentricLabel(); needsRender = true; animate(); return container; }32:T634,function interpolate(jd, data) { if (data.length < 2) throw new Error("Need at least two data points"); // Assume evenly spaced Julian dates const dt = data[1][0] - data[0][0]; const totalDays = (jd - data[0][0]) / dt; const i = Math.floor(totalDays); if (i < 0 || i >= data.length - 1) throw new RangeError("Julian date outside available data range"); const p0 = data[i]; const p1 = data[i + 1]; // Time normalization const s = (jd - p0[0]) / (p1[0] - p0[0]); // Convert dt from days to seconds for velocity scaling const secondsPerDay = 86400; const dtSec = (p1[0] - p0[0]) * secondsPerDay; // Hermite basis functions const h00 = 2 * s ** 3 - 3 * s ** 2 + 1; const h10 = s ** 3 - 2 * s ** 2 + s; const h01 = -2 * s ** 3 + 3 * s ** 2; const h11 = s ** 3 - s ** 2; const dh00 = (6 * s ** 2 - 6 * s) / dtSec; const dh10 = (3 * s ** 2 - 4 * s + 1) / dtSec; const dh01 = (-6 * s ** 2 + 6 * s) / dtSec; const dh11 = (3 * s ** 2 - 2 * s) / dtSec; const interp = (a0, a1, v0, v1) => h00 * a0 + h10 * dtSec * v0 + h01 * a1 + h11 * dtSec * v1; const dInterp = (a0, a1, v0, v1) => dh00 * a0 + dh10 * dtSec * v0 + dh01 * a1 + dh11 * dtSec * v1; // Indices: 1=x, 2=y, 3=z, 4=vx, 5=vy, 6=vz const x = interp(p0[1], p1[1], p0[4], p1[4]); const y = interp(p0[2], p1[2], p0[5], p1[5]); const z = interp(p0[3], p1[3], p0[6], p1[6]); const vx = dInterp(p0[1], p1[1], p0[4], p1[4]); const vy = dInterp(p0[2], p1[2], p0[5], p1[5]); const vz = dInterp(p0[3], p1[3], p0[6], p1[6]); return [jd, x, y, z, vx, vy, vz]; } 33:Ta57,systems = ({ "Rocky planets": { scrubberPercent: 10, speed: { min: 0, max: 4, value: .75 }, length: { min: 0, max: 6, value: 4 }, points: { min: 2, max: 5, value: 4 }, unchecked: [], play: true }, "All planets": { scrubberPercent: 10, speed: { min: 1, max: 5, value: 3 }, length: { min: 0, max: 6, value: 6 }, points: { min: 2, max: 5, value: 3.75 }, unchecked: [], play: true }, "All planets and dwarf planets": { scrubberPercent: 10, speed: { min: 2, max: 5, value: 4 }, length: { min: 0, max: 6, value: 6 }, points: { min: 2, max: 5, value: 3.75 }, unchecked: ["Ceres"], play: true }, // "Earth and moon": { // scrubberPercent: 10, // speed: { min: 0, max: 5, value: 4 }, // length: { min: 0, max: 5, value: 3.5 }, // points: { min: 2, max: 5, value: 4 }, // unchecked: [], // play: true // }, "Earth and moon": { scrubberPercent: 10, speed: { min: 0, max: 5, value: 1.5 }, length: { min: 0, max: 3.5, value: 2 }, points: { min: 2, max: 5, value: 4 }, unchecked: [], play: true }, "Mars moons": { scrubberPercent: 10, speed: { min: -2, max: 3, value: -0.5 }, length: { min: 0, max: 5, value: 1.5 }, points: { min: 2, max: 5, value: 4 }, unchecked: [], play: true }, "Jupiter moons": { scrubberPercent: 10, speed: { min: -2, max: 3, value: 0.5 }, length: { min: 0, max: 5, value: 1.25 }, points: { min: 2, max: 4, value: 3.5 }, unchecked: [], play: true }, // "Jupiter moons": { // scrubberPercent: 10, // speed: { min: -2, max: 3, value: 0.5 }, // length: { min: 0, max: 5, value: 4 }, // points: { min: 2, max: 4, value: 3.5 }, // unchecked: [], // play: true // }, "Saturn moons": { scrubberPercent: 10, speed: { min: -2, max: 3, value: 0 }, length: { min: 0, max: 5, value: .5 }, points: { min: 2, max: 4, value: 3 }, unchecked: [], play: true }, "Uranus moons": { scrubberPercent: 10, speed: { min: -1, max: 3, value: -.5 }, length: { min: 0, max: 5, value: 2 }, points: { min: 2, max: 4, value: 4 }, unchecked: [], play: true }, "Neptune moons": { scrubberPercent: 10, speed: { min: -2, max: 4, value: -.5 }, length: { min: 0, max: 5, value: 1.5 }, points: { min: 2, max: 4, value: 3.75 }, unchecked: [], play: true }, "Pluto moons": { scrubberPercent: 10, speed: { min: -2, max: 3, value: 1 }, length: { min: 0, max: 5, value: 2.5 }, points: { min: 2, max: 4, value: 3 }, unchecked: [], play: true } })34:T1ac3,bodies = ({ // Star "Sun": { color: "#FFD84B", symbol: "☉", radius: 696000, centric: "Heliocentric" }, // Inner Planets "Mercury": { color: "#404f63", symbol: "☿", radius: 2439.7, centric: "Hermocentric" }, "Venus": { color: "#DBD4C4", symbol: "♀", radius: 6051.8, centric: "Cytherean" }, "Earth": { color: "#4a90e2", symbol: "⊕", radius: 6371, centric: "Geocentric" }, "Mars": { color: "#c87041", symbol: "♂", radius: 3389.5, centric: "Areocentric" }, // Gas Giants "Jupiter": { color: "#D6A25E", symbol: "♃", radius: 69911, centric: "Jovicentric" }, "Saturn": { color: "#DBCA94", symbol: "♄", radius: 58232, centric: "Kronocentric" }, "Uranus": { color: "#a5dce4", symbol: "♅", radius: 25362, centric: "Uranocentric" }, "Neptune": { color: "#2943c7", symbol: "♆", radius: 24622, centric: "Neptocentric" }, // Dwarf Planets "Ceres": { color: "#B8B8B8", symbol: "⚳", radius: 473, centric: "Cerocentric" }, "Pluto": { color: "#D2BCA3", symbol: "♇", radius: 1188.3, centric: "Plutocentric" }, "Eris": { color: "#E6E6E6", symbol: "⯰", radius: 1163, centric: "Eridian" }, "Haumea": { color: "#D0D0D0", symbol: "Ha", radius: 816, centric: "Haumean" }, "Makemake": { color: "#CBB091", symbol: "⯳", radius: 715, centric: "Makemakean" }, // Earth's Moon "Moon": { color: "#CFCFCF", symbol: "☾", radius: 1737.4, centric: "Selenocentric" }, // Mars Moons "Phobos": { color: "#967967", symbol: "Ph", radius: 11.3, centric: "Phobocentric" }, "Deimos": { color: "#D5CCAF", symbol: "De", radius: 6.2, centric: "Deimocentric" }, // Jupiter Moons "Io": { color: "#FFD54F", symbol: "Io", radius: 1821.6, centric: "Iocentric" }, "Europa": { color: "#E6D2A0", symbol: "Eu", radius: 1560.8, centric: "Europan" }, "Ganymede": { color: "#A6A6A6", symbol: "Ga", radius: 2634.1, centric: "Ganymedean" }, "Callisto": { color: "#75695E", symbol: "Ca", radius: 2410.3, centric: "Callistoan" }, "Amalthea": { color: "#C86B4B", symbol: "Am", radius: 83.5, centric: "Amalthean" }, "Himalia": { color: "#8F8A7C", symbol: "Hi", radius: 85, centric: "Himalian" }, "Elara": { color: "#9C8F77", symbol: "El", radius: 43, centric: "Elaran" }, "Pasiphae": { color: "#7B6E5D", symbol: "Pa", radius: 30, centric: "Pasiphaean" }, "Sinope": { color: "#8A6C55", symbol: "Si", radius: 19, centric: "Sinopean" }, "Lysithea": { color: "#A0836C", symbol: "Ly", radius: 18, centric: "Lysithean" }, "Carme": { color: "#7E5944", symbol: "Cr", radius: 23, centric: "Carmean" }, "Ananke": { color: "#6C5443", symbol: "An", radius: 14, centric: "Anankean" }, "Leda": { color: "#B59F85", symbol: "Le", radius: 10, centric: "Ledaean" }, "Thebe": { color: "#B98368", symbol: "Th", radius: 49.3, centric: "Thebean" }, "Adrastea": { color: "#C9A785", symbol: "Ad", radius: 8.2, centric: "Adrastean" }, "Metis": { color: "#A57964", symbol: "Me", radius: 21.5, centric: "Metian" }, // Saturn Moons "Mimas": { color: "#DCDCDC", symbol: "Mi", radius: 198.2, centric: "Mimantean" }, "Enceladus": { color: "#F5FAFF", symbol: "En", radius: 252.1, centric: "Enceladean" }, "Tethys": { color: "#E4E9F0", symbol: "Te", radius: 531.1, centric: "Tethyan" }, "Dione": { color: "#D0D5D9", symbol: "Di", radius: 561.4, centric: "Dionean" }, "Rhea": { color: "#C2C7CC", symbol: "Rh", radius: 763.8, centric: "Rhean" }, "Titan": { color: "#F1DD87", symbol: "Ti", radius: 2574.7, centric: "Titanian" }, "Hyperion": { color: "#D19E75", symbol: "Hy", radius: 135, centric: "Hyperionian" }, "Iapetus": { color: "#7A7069", symbol: "Ia", radius: 734.5, centric: "Iapetian" }, "Phoebe": { color: "#5C5C5C", symbol: "Pb", radius: 106.5, centric: "Phoebean" }, "Janus": { color: "#B3ABA2", symbol: "Ja", radius: 89.5, centric: "Janusian" }, "Epimetheus": { color: "#C0B8B0", symbol: "Ep", radius: 58.1, centric: "Epimethean" }, "Helene": { color: "#D6CDC3", symbol: "He", radius: 17.6, centric: "Helenian" }, "Telesto": { color: "#C7BAAE", symbol: "Tl", radius: 12.4, centric: "Telestoan" }, "Calypso": { color: "#DCC8AF", symbol: "Cy", radius: 10.7, centric: "Calypsoan" }, "Atlas": { color: "#E2D4C3", symbol: "At", radius: 15.1, centric: "Atlantean" }, "Prometheus": { color: "#B8A68C", symbol: "Pm", radius: 43.1, centric: "Promethean" }, "Pandora": { color: "#A89380", symbol: "Pn", radius: 40.7, centric: "Pandoran" }, "Pan": { color: "#F0E3C0", symbol: "Pn", radius: 14.1, centric: "Panian" }, // Uranus Moons "Ariel": { color: "#C4E1E5", symbol: "Ar", radius: 578.9, centric: "Arielian" }, "Umbriel": { color: "#6F6B70", symbol: "Um", radius: 584.7, centric: "Umbrielian" }, "Titania": { color: "#A4B2C0", symbol: "Tn", radius: 788.4, centric: "Titanian" }, "Oberon": { color: "#8C8F9C", symbol: "Ob", radius: 761.4, centric: "Oberonian" }, "Miranda": { color: "#E5ECEE", symbol: "Mr", radius: 235.8, centric: "Mirandan" }, "Cordelia": { color: "#B2BDC2", symbol: "Co", radius: 20.1, centric: "Cordelian" }, "Ophelia": { color: "#BFC7CC", symbol: "Op", radius: 21.4, centric: "Ophelian" }, "Bianca": { color: "#C9D3D8", symbol: "Bi", radius: 25.7, centric: "Biancan" }, "Cressida": { color: "#9BA9B0", symbol: "Cs", radius: 39.8, centric: "Cressidan" }, "Desdemona": { color: "#AEB8BE", symbol: "Dd", radius: 32, centric: "Desdemonan" }, "Juliet": { color: "#B8C2C8", symbol: "Ju", radius: 46.8, centric: "Julietian" }, "Portia": { color: "#9BA5AA", symbol: "Po", radius: 67.6, centric: "Portian" }, "Rosalind": { color: "#C2CACE", symbol: "Ro", radius: 36, centric: "Rosalindan" }, "Belinda": { color: "#AEB7BC", symbol: "Be", radius: 45, centric: "Belindan" }, "Puck": { color: "#82898E", symbol: "Pu", radius: 81, centric: "Puckian" }, // Neptune Moons "Triton": { color: "#E1B7B3", symbol: "Tr", radius: 1353.4, centric: "Tritonian" }, "Nereid": { color: "#B4B8C2", symbol: "Ne", radius: 170, centric: "Nereidian" }, "Naiad": { color: "#A7B4C4", symbol: "Na", radius: 33, centric: "Naiadian" }, "Thalassa": { color: "#9BA8B7", symbol: "Ta", radius: 41, centric: "Thalassan" }, "Despina": { color: "#B0BDC8", symbol: "Dp", radius: 75, centric: "Despinan" }, "Galatea": { color: "#C3CDD5", symbol: "Gt", radius: 88, centric: "Galatean" }, "Larissa": { color: "#AEB8C0", symbol: "La", radius: 97, centric: "Larissan" }, "Proteus": { color: "#88929A", symbol: "Pt", radius: 210, centric: "Protean" }, // Pluto Moons "Charon": { color: "#C0AFA5", symbol: "Ch", radius: 606, centric: "Charonian" }, "Nix": { color: "#E5D7C6", symbol: "Ni", radius: 23, centric: "Nixian" }, "Hydra": { color: "#C3C9D4", symbol: "Hd", radius: 30.5, centric: "Hydran" }, "Kerberos": { color: "#B4B4B4", symbol: "Ke", radius: 9, centric: "Kerberonian" }, "Styx": { color: "#CFCFCF", symbol: "St", radius: 8, centric: "Stygian" } })35:T14a8,styles = html``36:T144a,celestialBodies = ({ sun: { id: "10", name: "Sun" }, planets: [ { id: "199", name: "Mercury" }, { id: "299", name: "Venus" }, { id: "399", name: "Earth" }, { id: "499", name: "Mars" }, { id: "599", name: "Jupiter" }, { id: "699", name: "Saturn" }, { id: "799", name: "Uranus" }, { id: "899", name: "Neptune" } ], dwarfPlanets: [ { id: "1", name: "Ceres" }, { id: "999", name: "Pluto" }, { id: "136108", name: "Haumea" }, { id: "136472", name: "Makemake" }, { id: "136199", name: "Eris" } ], satellites: [ // Earth { id: "301", name: "Moon", parent: "Earth" }, // Mars { id: "401", name: "Phobos", parent: "Mars" }, { id: "402", name: "Deimos", parent: "Mars" }, // Jupiter (major moons) { id: "501", name: "Io", parent: "Jupiter" }, { id: "502", name: "Europa", parent: "Jupiter" }, { id: "503", name: "Ganymede", parent: "Jupiter" }, { id: "504", name: "Callisto", parent: "Jupiter" }, { id: "505", name: "Amalthea", parent: "Jupiter" }, { id: "506", name: "Himalia", parent: "Jupiter" }, { id: "507", name: "Elara", parent: "Jupiter" }, { id: "508", name: "Pasiphae", parent: "Jupiter" }, { id: "509", name: "Sinope", parent: "Jupiter" }, { id: "510", name: "Lysithea", parent: "Jupiter" }, { id: "511", name: "Carme", parent: "Jupiter" }, { id: "512", name: "Ananke", parent: "Jupiter" }, { id: "513", name: "Leda", parent: "Jupiter" }, { id: "514", name: "Thebe", parent: "Jupiter" }, { id: "515", name: "Adrastea", parent: "Jupiter" }, { id: "516", name: "Metis", parent: "Jupiter" }, // Saturn (major moons) { id: "601", name: "Mimas", parent: "Saturn" }, { id: "602", name: "Enceladus", parent: "Saturn" }, { id: "603", name: "Tethys", parent: "Saturn" }, { id: "604", name: "Dione", parent: "Saturn" }, { id: "605", name: "Rhea", parent: "Saturn" }, { id: "606", name: "Titan", parent: "Saturn" }, { id: "607", name: "Hyperion", parent: "Saturn" }, { id: "608", name: "Iapetus", parent: "Saturn" }, { id: "609", name: "Phoebe", parent: "Saturn" }, { id: "610", name: "Janus", parent: "Saturn" }, { id: "611", name: "Epimetheus", parent: "Saturn" }, { id: "612", name: "Helene", parent: "Saturn" }, { id: "613", name: "Telesto", parent: "Saturn" }, { id: "614", name: "Calypso", parent: "Saturn" }, { id: "615", name: "Atlas", parent: "Saturn" }, { id: "616", name: "Prometheus", parent: "Saturn" }, { id: "617", name: "Pandora", parent: "Saturn" }, { id: "618", name: "Pan", parent: "Saturn" }, // Uranus (major moons) { id: "701", name: "Ariel", parent: "Uranus" }, { id: "702", name: "Umbriel", parent: "Uranus" }, { id: "703", name: "Titania", parent: "Uranus" }, { id: "704", name: "Oberon", parent: "Uranus" }, { id: "705", name: "Miranda", parent: "Uranus" }, { id: "706", name: "Cordelia", parent: "Uranus" }, { id: "707", name: "Ophelia", parent: "Uranus" }, { id: "708", name: "Bianca", parent: "Uranus" }, { id: "709", name: "Cressida", parent: "Uranus" }, { id: "710", name: "Desdemona", parent: "Uranus" }, { id: "711", name: "Juliet", parent: "Uranus" }, { id: "712", name: "Portia", parent: "Uranus" }, { id: "713", name: "Rosalind", parent: "Uranus" }, { id: "714", name: "Belinda", parent: "Uranus" }, { id: "715", name: "Puck", parent: "Uranus" }, // Neptune (major moons) { id: "801", name: "Triton", parent: "Neptune" }, { id: "802", name: "Nereid", parent: "Neptune" }, { id: "803", name: "Naiad", parent: "Neptune" }, { id: "804", name: "Thalassa", parent: "Neptune" }, { id: "805", name: "Despina", parent: "Neptune" }, { id: "806", name: "Galatea", parent: "Neptune" }, { id: "807", name: "Larissa", parent: "Neptune" }, { id: "808", name: "Proteus", parent: "Neptune" }, // // Pluto system { id: "901", name: "Charon", parent: "Pluto" }, { id: "902", name: "Nix", parent: "Pluto" }, { id: "903", name: "Hydra", parent: "Pluto" }, { id: "904", name: "Kerberos", parent: "Pluto" }, { id: "905", name: "Styx", parent: "Pluto" } ], }) // comets: [ // { id: "90000001", name: "1P/Halley" }, // { id: "90000002", name: "2P/Encke" }, // { id: "90000009", name: "9P/Tempel 1" }, // { id: "90000019", name: "19P/Borrelly" }, // { id: "90000021", name: "21P/Giacobini-Zinner" }, // { id: "90000026", name: "26P/Grigg-Skjellerup" }, // { id: "90000046", name: "46P/Wirtanen" }, // { id: "90000067", name: "67P/Churyumov-Gerasimenko" }, // { id: "90000073", name: "73P/Schwassmann-Wachmann 3" }, // { id: "90000081", name: "81P/Wild 2" }, // { id: "90000103", name: "103P/Hartley 2" }, // { id: "1003228", name: "C/1995 O1 (Hale-Bopp)" }, // { id: "1003252", name: "C/1996 B2 (Hyakutake)" }, // { id: "90002020", name: "C/2020 F3 (NEOWISE)" }, // { id: "90001862", name: "C/1862 N1 (Schmidt)" }, // { id: "90001969", name: "C/1969 Y1 (Bennett)" }, // { id: "90001973", name: "C/1973 E1 (Kohoutek)" } // ]37:T438c,viewof downloadConfig = { const container = html`

Start Date

End Date

Step Size

Steps

Data Points

`; // Get DOM elements const startDateInput = container.querySelector('[name="startDate"]'); const endDateInput = container.querySelector('[name="endDate"]'); const stepSizeSelect = container.querySelector('[name="stepSize"]'); const stepsDisplay = container.querySelector('[name="stepsDisplay"]'); const dataPointsDisplay = container.querySelector('[name="dataPointsDisplay"]'); const treeContainer = container.querySelector('[name="treeContainer"]'); const downloadButton = container.querySelector('[name="downloadButton"]'); const progressContainer = container.querySelector('[name="progressContainer"]'); const progressBar = container.querySelector('[name="progressBar"]'); const progressText = container.querySelector('[name="progressText"]'); const resultContainer = container.querySelector('[name="resultContainer"]'); const resultText = container.querySelector('[name="resultText"]'); // ── Hierarchical checkbox tree ────────────────────────────────── // Track every individual body checkbox: Map const bodyCheckboxes = new Map(); // Pretty labels for top-level keys const categoryLabels = { sun: "Sun", planets: "Planets", dwarfPlanets: "Dwarf Planets", satellites: "Satellites" }; // Helper: create a checkbox + label row // isLeaf: true adds an invisible spacer matching the ▾/▸ toggle width function makeRow(text, opts = {}) { const { bold, indent, fontSize, count, isLeaf } = Object.assign( { bold: false, indent: 0, fontSize: 13, count: null, isLeaf: false }, opts ); const row = document.createElement('label'); row.style.cssText = `display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; user-select: none; padding: 1px 0; margin-left: ${indent}px;`; if (isLeaf) { const spacer = document.createElement('span'); spacer.style.cssText = 'width: 16px; margin-right: 4px; flex-shrink: 0;'; row.appendChild(spacer); } const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = true; cb.style.cssText = 'flex-shrink: 0; cursor: pointer; margin: 0;'; const span = document.createElement('span'); span.style.cssText = `font-size: ${fontSize}px; color: #333; font-weight: ${bold ? 700 : 400};`; span.textContent = text; row.appendChild(cb); row.appendChild(span); if (count !== null) { const c = document.createElement('span'); c.style.cssText = 'font-size: 11px; color: #999;'; c.textContent = `(${count})`; row.appendChild(c); } return { row, cb }; } // Helper: wire a parent checkbox to an array of child checkboxes // Track parent→children relationships for recursive cascade const childrenOf = new Map(); // checkbox → [child checkboxes] const parentOf = new Map(); // checkbox → parent checkbox function wireParent(parentCb, childCbs) { childrenOf.set(parentCb, childCbs); childCbs.forEach(c => parentOf.set(c, parentCb)); // Parent click → cascade down parentCb.addEventListener('change', () => { setCascadeDown(parentCb, parentCb.checked); onInputChange(); }); // Child click → bubble up childCbs.forEach(c => { c.addEventListener('change', () => { bubbleUp(parentCb, childCbs); onInputChange(); }); }); } // Recursively set all descendants to checked/unchecked function setCascadeDown(parentCb, checked) { const kids = childrenOf.get(parentCb); if (!kids) return; kids.forEach(c => { c.checked = checked; c.indeterminate = false; setCascadeDown(c, checked); // recurse into grandchildren }); } // Update parent state based on children, then recurse upward function bubbleUp(parentCb, childCbs) { const total = childCbs.length; const checked = childCbs.filter(x => x.checked || x.indeterminate).length; const fullyChecked = childCbs.filter(x => x.checked && !x.indeterminate).length; parentCb.checked = checked > 0; parentCb.indeterminate = checked > 0 && fullyChecked < total; // Continue bubbling up if this parent also has a parent const grandparent = parentOf.get(parentCb); if (grandparent) { const siblings = childrenOf.get(grandparent); if (siblings) bubbleUp(grandparent, siblings); } } // Helper: collapsible section with ▾/▸ toggle function makeCollapsible(headerRow, content, startOpen = false) { const wrapper = document.createElement('div'); const toggle = document.createElement('span'); toggle.textContent = startOpen ? '▾' : '▸'; toggle.style.cssText = 'cursor: pointer; font-size: 16px; color: #666; margin-right: 4px; user-select: none; width: 16px; display: inline-block; text-align: center;'; headerRow.row.insertBefore(toggle, headerRow.row.firstChild); if (!startOpen) content.style.display = 'none'; let open = startOpen; toggle.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); open = !open; content.style.display = open ? '' : 'none'; toggle.textContent = open ? '▾' : '▸'; }); wrapper.appendChild(headerRow.row); wrapper.appendChild(content); return wrapper; } // ── Build tree ────────────────────────────────────────────────── Object.keys(celestialBodies).forEach(type => { const raw = celestialBodies[type]; const items = Array.isArray(raw) ? raw : [raw]; const label = categoryLabels[type] || type; // Sun: single item, no expand/collapse needed if (type === 'sun') { const { row, cb } = makeRow(label, { bold: true, fontSize: 13 }); bodyCheckboxes.set(items[0].id, { checkbox: cb, body: items[0] }); cb.addEventListener('change', onInputChange); row.style.marginBottom = '2px'; treeContainer.appendChild(row); return; } // Satellites: two-level hierarchy grouped by parent planet if (type === 'satellites') { const byParent = new Map(); items.forEach(sat => { const p = sat.parent || 'Other'; if (!byParent.has(p)) byParent.set(p, []); byParent.get(p).push(sat); }); const topHeader = makeRow(label, { bold: true, fontSize: 13, count: items.length }); const topContent = document.createElement('div'); topContent.style.cssText = 'margin-left: 14px;'; const subGroupCbs = []; byParent.forEach((sats, parentName) => { const subHeader = makeRow(parentName, { bold: true, fontSize: 12, count: sats.length }); const subContent = document.createElement('div'); subContent.style.cssText = 'display: flex; flex-direction: column; gap: 1px; margin-left: 28px;'; const subCbs = []; sats.forEach(sat => { const { row, cb } = makeRow(sat.name, { fontSize: 12, isLeaf: true }); bodyCheckboxes.set(sat.id, { checkbox: cb, body: sat }); subCbs.push(cb); subContent.appendChild(row); }); wireParent(subHeader.cb, subCbs); subGroupCbs.push(subHeader.cb); topContent.appendChild(makeCollapsible(subHeader, subContent, false)); }); wireParent(topHeader.cb, subGroupCbs); treeContainer.appendChild(makeCollapsible(topHeader, topContent, false)); return; } // Planets / Dwarf Planets: flat list under a group header const header = makeRow(label, { bold: true, fontSize: 13, count: items.length }); const content = document.createElement('div'); content.style.cssText = 'display: flex; flex-direction: column; gap: 1px; margin-left: 14px;'; const childCbs = []; items.forEach(body => { const { row, cb } = makeRow(body.name, { fontSize: 12, isLeaf: true }); bodyCheckboxes.set(body.id, { checkbox: cb, body: body }); childCbs.push(cb); content.appendChild(row); }); wireParent(header.cb, childCbs); treeContainer.appendChild(makeCollapsible(header, content)); }); // ── Data point calculation ────────────────────────────────────── function calculateDataPoints() { const start = new Date(startDateInput.value); const end = new Date(endDateInput.value); const stepSize = stepSizeSelect.value; const diffMs = end - start; const diffHours = diffMs / (1000 * 60 * 60); let stepHours; if (stepSize.includes('h')) { stepHours = parseFloat(stepSize); } else if (stepSize.includes('d')) { stepHours = parseFloat(stepSize) * 24; } else if (stepSize.includes('mo')) { stepHours = parseFloat(stepSize) * 24 * 30; } const steps = Math.floor(diffHours / stepHours) + 1; stepsDisplay.textContent = steps.toLocaleString(); let bodyCount = 0; bodyCheckboxes.forEach(({ checkbox }) => { if (checkbox.checked) bodyCount++; }); const totalDataPoints = steps * bodyCount; dataPointsDisplay.textContent = totalDataPoints.toLocaleString(); } calculateDataPoints(); // Button hover downloadButton.addEventListener('mouseenter', () => { downloadButton.style.background = '#218838'; }); downloadButton.addEventListener('mouseleave', () => { downloadButton.style.background = '#28a745'; }); // Config tracking let lastDownloadedConfig = null; function getSelectedIds() { const ids = []; bodyCheckboxes.forEach(({ checkbox }, id) => { if (checkbox.checked) ids.push(id); }); return ids.sort().join(','); } function getCurrentConfig() { return { startDate: startDateInput.value, endDate: endDateInput.value, stepSize: stepSizeSelect.value, selectedIds: getSelectedIds() }; } function hasConfigChanged() { if (!lastDownloadedConfig) return false; const current = getCurrentConfig(); return current.startDate !== lastDownloadedConfig.startDate || current.endDate !== lastDownloadedConfig.endDate || current.stepSize !== lastDownloadedConfig.stepSize || current.selectedIds !== lastDownloadedConfig.selectedIds; } function updateButtonVisibility() { if (!lastDownloadedConfig) { downloadButton.style.display = 'block'; } else if (hasConfigChanged()) { downloadButton.style.display = 'block'; } else { downloadButton.style.display = 'none'; } } function onInputChange() { calculateDataPoints(); updateButtonVisibility(); } startDateInput.addEventListener('change', onInputChange); endDateInput.addEventListener('change', onInputChange); stepSizeSelect.addEventListener('change', onInputChange); // ── Download ──────────────────────────────────────────────────── async function performDownload() { downloadButton.style.display = 'none'; progressContainer.style.display = 'block'; resultContainer.style.display = 'none'; const results = []; const errors = []; const selectedBodies = []; bodyCheckboxes.forEach(({ checkbox, body }) => { if (checkbox.checked) selectedBodies.push(body); }); const total = selectedBodies.length; let completed = 0; for (const body of selectedBodies) { try { const percent = Math.round((completed + 1) / total * 100); progressBar.style.width = `${percent}%`; progressText.textContent = `${body.name} (${completed + 1}/${total})`; const response = await queryHorizons( body.id, body.name, startDateInput.value, endDateInput.value, stepSizeSelect.value ); const parsed = parseHorizonsData(response); if (parsed.error) { errors.push({ body: body.name, id: body.id, error: parsed.error }); } else { results.push(parsed); } completed++; await new Promise(resolve => setTimeout(resolve, 500)); } catch (error) { errors.push({ body: body.name, id: body.id, error: error.message }); } } const totalDataPoints = results.reduce((sum, r) => sum + r.count, 0); const downloadedData = { results: results, errors: errors, summary: { total: total, successful: results.length, failed: errors.length, totalDataPoints: totalDataPoints, dateRange: { start: formatDateForHorizons(startDateInput.value), end: formatDateForHorizons(endDateInput.value) }, stepSize: stepSizeSelect.value } }; progressContainer.style.display = 'none'; resultContainer.style.display = 'block'; downloadButton.style.display = 'block'; resultText.textContent = `Downloaded ${results.length} bodies with ${totalDataPoints.toLocaleString()} total data points`; container.value = { startDate: startDateInput.value, endDate: endDateInput.value, stepSize: stepSizeSelect.value, selectedBodies: selectedBodies, data: downloadedData }; container.dispatchEvent(new CustomEvent('input')); } downloadButton.addEventListener('click', () => { lastDownloadedConfig = getCurrentConfig(); performDownload(); }); // Initial value container.value = { startDate: startDateInput.value, endDate: endDateInput.value, stepSize: stepSizeSelect.value, selectedBodies: [], data: null }; return container; }38:T6ef,downloadedData = { const downloadedData = downloadConfig.data if (!downloadedData || !downloadedData.results) return null; // Helper function to round numbers to reduce JSON file size // Position: round to nearest km (removes sub-km precision) // Velocity: round to 0.001 km/s (1 m/s precision) // Julian Date: round to 0.000001 days (~0.086 seconds precision) const roundPos = (val) => Math.round(val); const roundVel = (val) => Math.round(val * 1000) / 1000; const roundJD = (val) => Math.round(val * 1000000) / 1000000; // Helper function to find which class a body belongs to const getBodyClass = (bodyId) => { // Check if it's the sun if (celestialBodies.sun.id === bodyId) return 'sun'; // Check planets if (celestialBodies.planets.some(p => p.id === bodyId)) return 'planets'; // Check satellites if (celestialBodies.satellites.some(s => s.id === bodyId)) return 'satellites'; return 'unknown'; }; // Create an array format for easy searching and filtering const formatted = downloadedData.results.map(body => ({ name: body.bodyName, id: body.bodyId, //class: getBodyClass(body.bodyId), startDate: downloadedData.summary.dateRange.start, endDate: downloadedData.summary.dateRange.end, // Store data as compact arrays: [julianDate, x, y, z, vx, vy, vz] // This format is efficient for: // 1. Binary search to find closest time points // 2. Extracting position/velocity vectors for interpolation data: body.data.map(point => [ roundJD(point.julianDate), roundPos(point.x), roundPos(point.y), roundPos(point.z), roundVel(point.vx), roundVel(point.vy), roundVel(point.vz) ]) })); return formatted; }39:T5c1,queryHorizons = async (bodyId, bodyName, start, end, step) => { const baseUrl = "https://ssd.jpl.nasa.gov/api/horizons.api"; // Wrap step value in quotes for the API const formattedStep = `'${step}'`; const params = new URLSearchParams({ format: "text", COMMAND: bodyId, OBJ_DATA: "NO", MAKE_EPHEM: "YES", EPHEM_TYPE: "VECTORS", CENTER: "@0", // Solar System Barycenter START_TIME: formatDateForHorizons(start), STOP_TIME: formatDateForHorizons(end), STEP_SIZE: formattedStep, OUT_UNITS: "KM-S", REF_PLANE: "ECLIPTIC", REF_SYSTEM: "J2000", VEC_CORR: "NONE", VEC_DELTA_T: "NO", VEC_TABLE: "3" }); // Build the target URL and encode it for the proxy const targetUrl = `${baseUrl}?${params}`; const url = `${corsProxy}${encodeURIComponent(targetUrl)}`; try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.text(); // Check if we got actual Horizons data vs a proxy error page if (!data.includes("JPL/HORIZONS") && !data.includes("$$SOE")) { throw new Error("Proxy returned non-Horizons content — proxy may be down"); } return { bodyId: bodyId, bodyName: bodyName, result: data }; } catch (error) { return { bodyId: bodyId, bodyName: bodyName, error: error.message }; } }3a:Ta25,parseHorizonsData = (response) => { if (response.error) { return { error: response.error }; } const lines = response.result.split('\n'); const data = []; let inData = false; let currentEntry = null; for (let i = 0; i < lines.length; i++) { const line = lines[i].trim(); // Start of ephemeris data if (line.includes('$$SOE')) { inData = true; continue; } // End of ephemeris data if (line.includes('$$EOE')) { break; } if (inData && line) { // Format is: // Line 1: JDTDB = A.D. YYYY-MMM-DD HH:MM:SS.SSSS TDB // Line 2: X = value Y = value Z = value // Line 3: VX= value VY= value VZ= value // Check if this is a date line (contains '=') if (line.includes('=') && line.includes('A.D.')) { // Parse date line const parts = line.split('='); if (parts.length >= 2) { const jd = parseFloat(parts[0].trim()); const dateStr = parts[1].trim(); currentEntry = { julianDate: jd, calendar: dateStr }; } } // Check if this is a position line (starts with X) else if (line.startsWith('X') && currentEntry) { // Parse: X = value Y = value Z = value const xMatch = line.match(/X\s*=\s*([-+]?[\d.]+E[-+]?\d+)/i); const yMatch = line.match(/Y\s*=\s*([-+]?[\d.]+E[-+]?\d+)/i); const zMatch = line.match(/Z\s*=\s*([-+]?[\d.]+E[-+]?\d+)/i); if (xMatch && yMatch && zMatch) { currentEntry.x = parseFloat(xMatch[1]); currentEntry.y = parseFloat(yMatch[1]); currentEntry.z = parseFloat(zMatch[1]); } } // Check if this is a velocity line (starts with VX) else if (line.startsWith('VX') && currentEntry) { // Parse: VX= value VY= value VZ= value const vxMatch = line.match(/VX\s*=\s*([-+]?[\d.]+E[-+]?\d+)/i); const vyMatch = line.match(/VY\s*=\s*([-+]?[\d.]+E[-+]?\d+)/i); const vzMatch = line.match(/VZ\s*=\s*([-+]?[\d.]+E[-+]?\d+)/i); if (vxMatch && vyMatch && vzMatch) { currentEntry.vx = parseFloat(vxMatch[1]); currentEntry.vy = parseFloat(vyMatch[1]); currentEntry.vz = parseFloat(vzMatch[1]); // Entry is complete, add to data array data.push(currentEntry); currentEntry = null; } } } } return { bodyId: response.bodyId, bodyName: response.bodyName, data: data, count: data.length }; }3b:[{"id":"77f7dd3d4647dec2c83fc369ccaf673be6d799aabbadc0a0a39a062bd524488ad83680c0a964a5fce7a49a315965ac290c719d300570f91c3882a02a99a60d52","href":"https://static.observableusercontent.com/files/77f7dd3d4647dec2c83fc369ccaf673be6d799aabbadc0a0a39a062bd524488ad83680c0a964a5fce7a49a315965ac290c719d300570f91c3882a02a99a60d52","name":"neptune_2020_2029.json","type":"application/json","lastModified":1762993481706.641,"size":47504225},{"id":"b9c1c6801b2a543dcb0fa279e161047e0d0f4b9e6355b8088e56ae0b111a718313cd264b98547242d61d034474084246e024ea29131976b7643f6aafc632da86","href":"https://static.observableusercontent.com/files/b9c1c6801b2a543dcb0fa279e161047e0d0f4b9e6355b8088e56ae0b111a718313cd264b98547242d61d034474084246e024ea29131976b7643f6aafc632da86","name":"saturn_2020_2030.json","type":"application/json","lastModified":1762990716701.621,"size":17483627},{"id":"f778241396d2ae8e8a34da3edad909671ad0bbd770646fb1d7eb0d01f5204ee4f757221237f9e9f7e4cb00191b86fa29aa1c10a79af6d50d0b8633ac6fafd32f","href":"https://static.observableusercontent.com/files/f778241396d2ae8e8a34da3edad909671ad0bbd770646fb1d7eb0d01f5204ee4f757221237f9e9f7e4cb00191b86fa29aa1c10a79af6d50d0b8633ac6fafd32f","name":"uranus_2025_2030.json","type":"application/json","lastModified":1762993100985.56,"size":45997660},{"id":"35cede22a41603fdbb9103b4ce23eb1a72a08ed5e7f95f7e5eee74541c0acf53be6f34024296d2c546829a240580e18bf7d178bd367a50066507b695620e4603","href":"https://static.observableusercontent.com/files/35cede22a41603fdbb9103b4ce23eb1a72a08ed5e7f95f7e5eee74541c0acf53be6f34024296d2c546829a240580e18bf7d178bd367a50066507b695620e4603","name":"mars_2020_2030@2.json","type":"application/json","lastModified":1762988550310.135,"size":17123375},{"id":"22f1fa7ba4b423aa4645782c0b97ce5e918464ea10c78aef718e8eb231dc0d2ddda4caead1f3841c5c8d2b71eae04c80ae7af7612ec65e6ba91492afeeab1295","href":"https://static.observableusercontent.com/files/22f1fa7ba4b423aa4645782c0b97ce5e918464ea10c78aef718e8eb231dc0d2ddda4caead1f3841c5c8d2b71eae04c80ae7af7612ec65e6ba91492afeeab1295","name":"pluto_2000_2100 (2).json","type":"application/json","lastModified":1763004032117.03,"size":14203956},{"id":"fa74ed93bba20c7d8681e999b2acb50b8305d24c3a3e0d234773f6de8d8380fad473e6314371eaabfd7b8ca61b282d097ab8d8ef5a805f499e08bc13f28e44ab","href":"https://static.observableusercontent.com/files/fa74ed93bba20c7d8681e999b2acb50b8305d24c3a3e0d234773f6de8d8380fad473e6314371eaabfd7b8ca61b282d097ab8d8ef5a805f499e08bc13f28e44ab","name":"jupiter_2020_2030@1.json","type":"application/json","lastModified":1763060649235.215,"size":25201989},{"id":"65c79aed2977d2e5c3d3d8c2732b731d8a8bef073d5d9abb61177e80e1df28201565cb0288c7e8ee8e19ebd0cab9eebde2199e36273915b18c2c8292a38489b4","href":"https://static.observableusercontent.com/files/65c79aed2977d2e5c3d3d8c2732b731d8a8bef073d5d9abb61177e80e1df28201565cb0288c7e8ee8e19ebd0cab9eebde2199e36273915b18c2c8292a38489b4","name":"planets_1900_2100.json","type":"application/json","lastModified":1763050948769.367,"size":31420382},{"id":"021436fd44189c77dd8445d4364ad9bc9e32f5c55be2e584085729d9350b00a73ab2c7975389a4c71c54812667fdaa7da96791a0f6b5278493b62c8bd32675a4","href":"https://static.observableusercontent.com/files/021436fd44189c77dd8445d4364ad9bc9e32f5c55be2e584085729d9350b00a73ab2c7975389a4c71c54812667fdaa7da96791a0f6b5278493b62c8bd32675a4","name":"earth_2000_2200@2.json","type":"application/json","lastModified":1763046492122.867,"size":8592268},{"id":"b1e9e6ee6311fc666954c14a47fa1299740d705f4e59619a4f91cfca86096f1e733c6e85765c93343bd07bdc63df647fe6ddaa0f6e676ac833118d69462c6d80","href":"https://static.observableusercontent.com/files/b1e9e6ee6311fc666954c14a47fa1299740d705f4e59619a4f91cfca86096f1e733c6e85765c93343bd07bdc63df647fe6ddaa0f6e676ac833118d69462c6d80","name":"hygdata_v41.csv","type":"text/csv","lastModified":1765220054532.04,"size":3075011}] 2f:{"id":"8b01545347057429","slug":null,"title":"3D Celestial Body-Centric Orbits","thumbnail":"6a3d8db679cd4aeae9bf1a87576d07080c9ee13b46210ec2befb296458e833d7","access_level":"public","create_time":"$D2025-11-05T21:09:44.953Z","update_time":"$D2026-03-25T15:09:48.738Z","view_time":null,"first_public_time":"$D2025-11-13T18:03:18.272Z","has_unpublished_edits":null,"fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":906,"publish_version":null,"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":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D Celestial Body-Centric Orbits","cells":[{"id":0,"value":"# 3D Celestial Body-Centric Orbits\n## Orrery spirographs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":401,"value":"Explore the solar system and moon systems. Choose which body the orbits are centered on to graph the orbits from that reference frame.\n\nBelow the chart is a JPL Horizon Systems downloader if you'd like to get your own data.\n\n- Double click a body or select radio button to center body\n- Left click and drag to rotate camera\n- Scroll / middle click and drag to zoom","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"I'm new to astronomy. If you have any ideas or suggestions, please drop a comment!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.128.0/build/three.min.js\");\n await require(\"three@0.128.0/examples/js/controls/TrackballControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"--------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"## JPL Horizons System Downloader","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":391,"value":"Add or comment out planet codes in the `celestrialBodies` array. Then select a date range and step size, and download. When finished, inspect the `downloadedData` to make sure the `data` property for each body does not have an empty array. When you are successful, download the JSON file by clicking the three dots to the right of the `downloadData` cell and `Download JSON`. You can upload up to 50MB files to an observable notebook so it loads with the cell.\n\nMake sure to pick the correct time step for the object you download. 1 week is good for planets, but moons require 1 day to 1 hour increments depending on how fast they are orbiting a planet. When centered on the primary body, if you see orbits that are spirograph stars instead of an ellipse, that means there were too few datapoints for the Chebyshev polynomial interpolation. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"### Downloader helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"formatDateForHorizons = (dateStr) => {\n // Handle both Date objects and date strings\n const date = dateStr instanceof Date ? dateStr : new Date(dateStr);\n const year = date.getFullYear();\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const day = String(date.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"corsProxy = \"https://horizons-proxy.ajsindri.workers.dev/?url=\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"formatForExport = (data) => {\n if (!data || !data.results) return null;\n \n // Create a combined dataset\n const combined = [];\n \n for (const body of data.results) {\n for (const point of body.data) {\n combined.push({\n bodyId: body.bodyId,\n bodyName: body.bodyName,\n julianDate: point.julianDate,\n calendar: point.calendar,\n x_km: point.x,\n y_km: point.y,\n z_km: point.z,\n vx_km_per_s: point.vx,\n vy_km_per_s: point.vy,\n vz_km_per_s: point.vz\n });\n }\n }\n \n return combined;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"## Preloaded Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"data = [\n {option:'Rocky planets', system:[...planets].splice(0,5) },\n {option:'All planets', system:[...planets].splice(0,9) },\n {option:'All planets and dwarf planets', system:planets },\n {option:'Earth and moon', system:earth },\n {option:'Mars moons', system:mars},\n {option:'Jupiter moons', system:jupiter},\n {option:'Saturn moons', system:saturn},\n {option:'Uranus moons', system:uranus},\n {option:'Neptune moons', system:neptune},\n {option:'Pluto moons', system:pluto},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"planets = FileAttachment(\"planets_1900_2100.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"earth = FileAttachment(\"earth_2000_2200@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"mars = FileAttachment(\"mars_2020_2030@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"jupiter = FileAttachment(\"jupiter_2020_2030@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"saturn = FileAttachment(\"saturn_2020_2030.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"uranus = FileAttachment(\"uranus_2025_2030.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"neptune = FileAttachment(\"neptune_2020_2029.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"pluto = FileAttachment(\"pluto_2000_2100 (2).json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"[HYG Star database](https://github.com/astronexus/HYG-Database/tree/main)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":642,"value":"starData = {\n const data = await FileAttachment(\"hygdata_v41.csv\").csv();\n \n // Filter out the sun and sort by magnitude (lower = brighter)\n const filtered = data\n .filter(d => d.mag > -20)\n .sort((a, b) => a.mag - b.mag)\n //.slice(0, 10000);\n \n console.log(\"Loaded \" + filtered.length + \" brightest stars\");\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"raDecToCartesian = function(ra, dec, radius) {\n // Convert degrees to radians\n const raRad = (ra * Math.PI) / 180;\n const decRad = (dec * Math.PI) / 180;\n \n // Convert to Cartesian coordinates\n const x = radius * Math.cos(decRad) * Math.cos(raRad);\n const y = radius * Math.sin(decRad);\n const z = -radius * Math.cos(decRad) * Math.sin(raRad);\n \n return { x, y, z };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"### TODO\n- Consider these computational alternatives to ephemeris data and calculate error\n - [VSOP87](https://github.com/gmiller123456/vsop87-multilang/)\n - [Astronomy Engine](https://github.com/cosinekitty/astronomy)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3b","stdlib":"1"}} 30:"$2f:body"