2c:null 2d:["$","title",null,{"children":"Earth Satellite Tracker | David Gieselman | Observable"}] 32:T1c9c, // // Satellite Animation — Version 2 // Earth-fixed and inertial viewing modes // // --------------------------------------------- // 1. Simulation settings // --------------------------------------------- let simulatedTimeMs = Date.now(); let simulationSpeed = 300; let isPlaying = true; let viewMode = "earth"; let lastTickMs = performance.now(); let previousGmst = satellite.gstime( new Date(simulatedTimeMs) ); // --------------------------------------------- // 2. Create control panel // --------------------------------------------- const animationPanel = document.createElement("div"); animationPanel.style.cssText = ` position: absolute; top: 12px; left: 12px; z-index: 10; padding: 12px; background: rgba(5, 12, 28, 0.90); color: white; border-radius: 8px; font: 13px system-ui, sans-serif; display: flex; flex-direction: column; gap: 10px; `; // First row: Playback controls const playbackRow = document.createElement("div"); playbackRow.style.cssText = ` display: flex; align-items: center; gap: 8px; `; const playButton = document.createElement("button"); playButton.textContent = "Pause"; const speedSelect = document.createElement("select"); for (const speed of [1, 10, 60, 300, 1000, 2000]) { const option = document.createElement("option"); option.value = speed; option.textContent = `${speed}x speed`; option.selected = speed === simulationSpeed; speedSelect.appendChild(option); } const resetButton = document.createElement("button"); resetButton.textContent = "Now"; playbackRow.append( playButton, speedSelect, resetButton ); // Second row: Reference frame selection const viewRow = document.createElement("div"); viewRow.style.cssText = ` display: flex; align-items: center; gap: 8px; `; const viewLabel = document.createElement("label"); viewLabel.textContent = "Reference frame:"; const viewSelect = document.createElement("select"); const viewOptions = [ ["earth", "Earth-fixed"], ["inertial", "Solar-system-fixed (ECI)"] ]; for (const [value, label] of viewOptions) { const option = document.createElement("option"); option.value = value; option.textContent = label; viewSelect.appendChild(option); } viewRow.append(viewLabel, viewSelect); // Clock const clockText = document.createElement("div"); clockText.style.cssText = ` font-family: monospace; font-size: 12px; `; animationPanel.append( playbackRow, viewRow, clockText ); globeContainer.style.position = "relative"; globeContainer.appendChild(animationPanel); // --------------------------------------------- // 3. Satellite position calculations // --------------------------------------------- function calculatePositionsAt(time) { const gmstNow = satellite.gstime(time); return satelliteRecords.flatMap(record => { const state = satellite.propagate( record.satrec, time ); if (!state?.position) { return []; } const geo = satellite.eciToGeodetic( state.position, gmstNow ); const lat = satellite.radiansToDegrees( geo.latitude ); const lng = satellite.radiansToDegrees( geo.longitude ); const altitudeKm = geo.height; if (![lat, lng, altitudeKm].every(Number.isFinite)) { return []; } return [{ name: record.name, noradId: record.noradId, lat, lng, altitudeKm, alt: altitudeKm / EARTH_RADIUS_KM }]; }); } // --------------------------------------------- // 4. Camera reference-frame calculations // --------------------------------------------- // Keep longitudes within [-180, 180) function wrapLongitude(lng) { return ((lng + 180) % 360 + 360) % 360 - 180; } // Rotate camera to compensate for Earth's spin function rotateInertialCamera(oldGmst, newGmst) { // Smallest signed difference between angles // Handles the 2PI -> 0 wraparound const difference = newGmst - oldGmst; const deltaRadians = Math.atan2( Math.sin(difference), Math.cos(difference) ); const deltaDegrees = satellite.radiansToDegrees( deltaRadians ); // Read the CURRENT camera position. // This preserves manual rotations and zoom. const currentView = world.pointOfView(); // Earth rotates eastward, so the camera's // Earth-relative longitude moves westward. world.pointOfView({ lat: currentView.lat, lng: wrapLongitude( currentView.lng - deltaDegrees ), altitude: currentView.altitude }, 0); } // --------------------------------------------- // 5. Update globe and camera // --------------------------------------------- function updateSatelliteGlobe() { const time = new Date(simulatedTimeMs); const currentGmst = satellite.gstime(time); // In inertial mode, compensate for Earth's // rotation by changing the camera longitude. if (viewMode === "inertial") { rotateInertialCamera( previousGmst, currentGmst ); } previousGmst = currentGmst; // Satellites always use Earth-fixed // geographic coordinates for Globe.GL const newPositions = calculatePositionsAt(time); world.particlesData([newPositions]); clockText.textContent = `Simulation UTC: ${time.toISOString()}`; } // --------------------------------------------- // 6. Animation loop // --------------------------------------------- function animationTick() { const now = performance.now(); // Cap elapsed time to avoid huge jumps // when returning to an inactive browser tab const elapsedRealMs = Math.min( Math.max(now - lastTickMs, 0), 250 ); lastTickMs = now; if (!isPlaying) { return; } simulatedTimeMs += elapsedRealMs * simulationSpeed; updateSatelliteGlobe(); } // 30 updates per second for smoother rotation const animationTimer = setInterval( animationTick, 33 ); // --------------------------------------------- // 7. Playback controls // --------------------------------------------- playButton.addEventListener("click", () => { isPlaying = !isPlaying; playButton.textContent = isPlaying ? "Pause" : "Play"; lastTickMs = performance.now(); }); speedSelect.addEventListener("change", () => { simulationSpeed = Number(speedSelect.value); }); // --------------------------------------------- // 8. Reference frame switching // --------------------------------------------- viewSelect.addEventListener("change", () => { viewMode = viewSelect.value; // Start from the current Earth orientation. // No sudden camera jump when switching modes. previousGmst = satellite.gstime( new Date(simulatedTimeMs) ); }); // --------------------------------------------- // 9. Reset simulation to current time // --------------------------------------------- resetButton.addEventListener("click", () => { simulatedTimeMs = Date.now(); // Also account for any time jump in // the selected viewing reference frame. updateSatelliteGlobe(); lastTickMs = performance.now(); }); // --------------------------------------------- // 10. Initialize // --------------------------------------------- updateSatelliteGlobe(); // --------------------------------------------- // 11. Observable cleanup // --------------------------------------------- invalidation.then(() => { clearInterval(animationTimer); animationPanel.remove(); }); 33:[] 30:{"id":"6697a36caa41e17a","slug":"earth-satellite-tracker","title":"Earth Satellite Tracker","thumbnail":"3df1a4999a83a817f93c3578a4236567e5bbc04e21cbf67d65dd2fa9434a7ed7","access_level":"public","create_time":"$D2026-10-13T19:17:45.131Z","update_time":"$D2026-10-13T19:33:42.620Z","view_time":null,"first_public_time":"$D2026-10-13T19:34:36.766Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0b077b36feace2f5","login":"david-gieselman","name":"David Gieselman","avatar_url":"https://avatars-next.observableusercontent.com/3a1605017c1f971b20234dfe86dcf2cd89de594bbe19959d243623fac80beee4","tier":"free_2026","bio":""},"version":34,"publish_version":34,"role":null,"authored":false,"authors":[{"type":"individual","id":"94171e73c32aaec9","login":"david-gieselman","name":"David Gieselman","avatar_url":"https://avatars-next.observableusercontent.com/3a1605017c1f971b20234dfe86dcf2cd89de594bbe19959d243623fac80beee4","tier":null,"bio":""}],"members":[{"type":"team","id":"0b077b36feace2f5","login":"david-gieselman","name":"David Gieselman","avatar_url":"https://avatars-next.observableusercontent.com/3a1605017c1f971b20234dfe86dcf2cd89de594bbe19959d243623fac80beee4","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Earth Satellite Tracker","cells":[{"id":1,"value":"\n# Earth Satellite Tracker\n\nAn interactive 3D visualization of real satellites orbiting Earth.\n\nData: CelesTrak\nCalculations: Satellite.js\nVisualization: Globe.GL\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"\nimport * as satellite from \"npm:satellite.js@7.1.0\";\n\ndisplay(\"Satellite.js loaded successfully!\");\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"\nimport Globe from \"npm:globe.gl@2.46.2\";\n\ndisplay(\"Globe.GL loaded successfully!\");\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"\nconst dataURL = \"https://celestrak.org/NORAD/elements/gp.php?GROUP=GPS-OPS&FORMAT=JSON\";\n\nconst response = await fetch(dataURL);\n\nif (!response.ok) {\n throw new Error(`HTTP Error: ${response.status}`);\n}\n\nconst ommData = await response.json();\n\ndisplay(`Loaded ${ommData.length} satellite records.`);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"\nconst satelliteRecords = ommData.map(d => ({\n name: d.OBJECT_NAME,\n noradId: d.NORAD_CAT_ID,\n satrec: satellite.json2satrec(d)\n}));\n\ndisplay(`Prepared ${satelliteRecords.length} satellite records.`);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"\nconst EARTH_RADIUS_KM = 6371;\nconst positionTime = new Date();\nconst gmst = satellite.gstime(positionTime);\n\nconst satellitePoints = satelliteRecords.flatMap(d => {\n const state = satellite.propagate(d.satrec, positionTime);\n\n if (!state?.position) {\n return [];\n }\n\n const pos = satellite.eciToGeodetic(\n state.position,\n gmst\n );\n\n const lat = satellite.radiansToDegrees(pos.latitude);\n const lng = satellite.radiansToDegrees(pos.longitude);\n const altitudeKm = pos.height;\n\n if (![lat, lng, altitudeKm].every(Number.isFinite)) {\n return [];\n }\n\n return [{\n name: d.name,\n noradId: d.noradId,\n lat: lat,\n lng: lng,\n altitudeKm: altitudeKm,\n alt: altitudeKm / EARTH_RADIUS_KM\n }];\n});\n\ndisplay(`Calculated ${satellitePoints.length} positions.`);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"\ndisplay({\n calculationTime: positionTime.toISOString(),\n totalRecords: satelliteRecords.length,\n validPositions: satellitePoints.length,\n exampleSatellite: satellitePoints[0]\n});\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"\nconst globeContainer = document.createElement(\"div\");\n\nglobeContainer.style.width = \"100%\";\nglobeContainer.style.height = \"650px\";\nglobeContainer.style.background = \"#000011\";\n\nconst world = new Globe(globeContainer)\n .width(Math.min(width, 1000))\n .height(650)\n\n // Earth\n .globeImageUrl(\n \"https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg\"\n )\n .backgroundColor(\"#000011\")\n .showAtmosphere(true)\n\n // Satellites\n .particlesData([satellitePoints])\n .particleLat(\"lat\")\n .particleLng(\"lng\")\n .particleAltitude(\"alt\")\n\n // Appearance\n .particlesColor(() => \"#60ffbb\")\n .particlesSize(4)\n .particlesSizeAttenuation(false)\n\n // Hover tooltip\n .particleLabel(d =>\n `${d.name} | ${d.altitudeKm.toFixed(0)} km`\n );\n\n// Camera position\nworld.pointOfView({\n lat: 20,\n lng: -155,\n altitude: 10\n});\n\n// Display the globe in Observable\ndisplay(globeContainer);\n\n// Cleanup when this cell is rerun\ninvalidation.then(() => {\n world.pauseAnimation();\n});\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"\ndisplay(html`\n

Satellite Tracking Information

Satellites: ${satellitePoints.length}

Dataset: GPS Operational

Calculated at:\n ${positionTime.toUTCString()}\n

Propagation: SGP4

Source: CelesTrak

\n`);\n","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 31:"$30:body"