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; }