31:T9b3,md` Ever looked at a satellite ground track on map (like [this one showing the path of the ISS](https://spotthestation.nasa.gov/tracking_map.cfm)) and been confused by the odd, wavelike shape of the path? Satellites don't steer erratically back and forth over the globe like they might appear to on a ground track map. Doing so would require a tremendous amount of fuel (and lifting that fuel up into space would require [yet more fuel!](https://www.nasa.gov/mission_pages/station/expeditions/expedition30/tryanny.html)). In fact, they generally fly in circular orbits that require almost no steering at all to maintain. The oscillating tracks they leave on maps are the result of two facts: that cylindrical map projections make straight lines appear curved, and that while the satellite is flying in a perfect circle, the Earth is rotating under it. Below is an animated simulation of the Suomi NPP satellite orbiting the Earth. Suomi is an Earth-observing satellite that was launched in 2011 and helped produce the famous [nighttime views of Earth from space](https://earthobservatory.nasa.gov/Features/IntotheBlack). It is being shown here in its true orbit, and its motion is calculated based on its altitude and the mass of the Earth, using [Newton's equation for gravity](https://en.wikipedia.org/wiki/Newton%27s_law_of_universal_gravitation). The simulation is running at 500x real time; in reality Suomi takes about 101.5 minutes to complete an orbit. As Suomi passes over the Earth, a red line is drawn to show its path. As the planet rotates, this line moves away from the current flight path of Suomi, so that by the time the satellite comes back around, it is passing over a new part of the globe. Below the 3D visualization is a 2D visualization of exactly the same ground track, projected in _plate carrée_ (a cylindrical projection). The ground track now appears wave-shaped, due to the distortion of the projection. Notice that the satellite appears to move faster as it nears the poles in this view; in reality its speed is constant, but distances have been distorted on the 2D map. Try adjusting the sliders to change the orbit of the satellite. You'll see the ground track change in real time on both the 3D and 2D visualizations. If you'd like a challenge, see if you can figure out the necessary parameters to put the satellite in geosynchronous orbit (where the satellite is always over the same point on the Earth, and the red line becomes a red dot). `32:T47d,map = { let canvas = this; if (!canvas) { canvas = DOM.context2d(width, width/2).canvas; } let context = canvas.getContext("2d"); const path = d3.geoPath() .projection(projection) .context(context); context.drawImage(naturalEarth, 0, 0, width, width/2); let line = groundTrack.slice(); const lineWidth = 1.25 + (width / 1200); if (d3.geoDistance(line[0], line[line.length - 1]) < 0.05) { // special case: geosynchronous orbit context.strokeStyle = 'rgb(255, 0, 0)'; context.lineWidth = 2 * lineWidth; context.beginPath(); path(d3.geoCircle().center(line[0]).radius(0.05)()); context.stroke(); } else { let opacity = 1.0; let decay = opacity / line.length; context.lineWidth = lineWidth; while (line.length > 1) { let start = line[0], end = line[1]; context.strokeStyle = `rgba(255, 0, 0, ${opacity})`; let segment = { type: 'LineString', coordinates: [start, end], }; context.beginPath(), path(segment), context.stroke(); opacity -= decay; line.shift(); } } return canvas; }33:T457,satellite = { let satellite = this; if (!satellite) { //satellite = new THREE.Mesh(); // satellite.geometry = new THREE.SphereGeometry(0.02, 16, 16); // satellite.material = new THREE.PointsMaterial({ size: 0.1, color: 0xff00ff }); const objLoader = new THREE.OBJLoader(); const mtlLoader = new THREE.MTLLoader(); const gistUrl = "https://gist.githubusercontent.com/jake-low/ae6f79de55ca9e4612957158a1637ab0/raw/439e9c2986d9ed5a7eba66921b6c1458bf75d455/"; objLoader.setPath(gistUrl); mtlLoader.setPath(gistUrl); mtlLoader.setResourcePath(gistUrl); const materials = await new Promise((resolve, reject) => mtlLoader.load("NPP.mtl", resolve, () => {}, reject) ); materials.preload(); objLoader.setMaterials(materials); satellite = await new Promise((resolve, reject) => objLoader.load("NPP.obj", resolve, () => {}, reject) ); satellite.scale.setScalar(0.02); satellite.rotation.x = -Math.PI / 2; } satellite.position.x = orbitRadiusInEarthRadii; return satellite; }34:T7ee,groundTrack = { const numPoints = 100, timeBetweenPoints = -300; while (true) { const profile = Math.random() > 0.99; if (profile) { console.time("groundTrack"); } const points = []; // get cartesian coordinates of satellite in orbital reference frame let currentPosition = satellite.getWorldPosition(); let orbitNormal = orbit.localToWorld(new THREE.Vector3(0, 1, 0)); for (let i = 0; i < numPoints; i++) { // convert to spherical coordinates let timeOffsetPosition = currentPosition.clone(); // rotate the position about the normal vector to the orbital plane, to // account for the movement of the satellite between the current time and // the offset time. timeOffsetPosition.applyAxisAngle( orbitNormal, satelliteAngularVelocity * i * timeBetweenPoints); // convert from orbital frame to Earth frame (which is rotating about its Y axis) let timeOffsetEarthFramePosition = earth.worldToLocal(timeOffsetPosition); // correct for the amout of time Earth has/will have rotated during timeOffset timeOffsetEarthFramePosition.applyAxisAngle( new THREE.Vector3(0, 1, 0), -earthAngularVelocity * i * timeBetweenPoints); // convert back to spherical one more time so we can get theta and phi let sphericalTimeOffsetEarthFramePosition = new THREE.Spherical(); sphericalTimeOffsetEarthFramePosition.setFromVector3(timeOffsetEarthFramePosition); sphericalTimeOffsetEarthFramePosition.makeSafe(); // convert to degrees let theta = sphericalTimeOffsetEarthFramePosition.theta * 180 / Math.PI, phi = sphericalTimeOffsetEarthFramePosition.phi * 180 / Math.PI; // convert theta and phi to longitude and latitude let longitude = (theta - 90), latitude = (90 - phi); points.push([longitude, latitude]); } if (profile) { console.timeEnd("groundTrack"); } yield points; } }35:T60e,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, format, submit, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }36:[] 2f:{"title":"Satellite ground track visualizer","cells":[{"id":0,"value":"md`# Satellite ground track visualizer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1826,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"globe = { \n while (true) {\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof satelliteInclination = slider({\n min: -90,\n max: 90,\n value: -81.3,\n format: value => `${value}°`,\n description: \"Orbital inclination in degrees; 0° is equatorial\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof satelliteAltitude = slider({\n min: 300 * 1000,\n max: 35793 * 1000,\n value: 834 * 1000,\n step: 1000,\n format: value => `${Math.round(value / 1000)} km`,\n description: \"Orbital altitude in kilometers above mean sea level\"\n}) // meters above Earth","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"viewof timeScale = slider({\n min: 1,\n max: 1000,\n value: 500,\n step: 1,\n format: value => `${value}x`,\n description: \"Simulation speed as a multiple of real time\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1875,"value":"md`\nCredits:\n- Earth basemap: [Natural Earth](https://www.naturalearthdata.com)\n- Suomi NPP model from [NASA 3D Resources](https://github.com/nasa/NASA-3D-Resources)\n- built using [d3.js](https://d3js.org/) and [three.js](https://threejs.org/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1484,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"md`### Three.js scene stuff`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"scene = {\n let scene = this;\n \n if (!scene) {\n scene = new THREE.Scene();\n scene.background = new THREE.Color('#f5f5f5');\n scene.add(earth, orbit, light);\n }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true})\n \n renderer.setSize(width, width / 2);\n renderer.setPixelRatio(devicePixelRatio);\n \n invalidation.then(() => renderer.dispose());\n \n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"controls = {\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.minDistance = 3;\n controls.maxDistance = 20;\n \n const redraw = () => renderer.render(scene, camera);\n \n controls.addEventListener(\"change\", redraw);\n \n invalidation.then(() => {\n controls.removeEventListener(\"change\", redraw);\n controls.dispose();\n });\n \n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"camera = {\n const camera = new THREE.PerspectiveCamera(30, 2, 0.1, 60);\n camera.position.set(5, 1, 2);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"//light = new THREE.AmbientLight('#fff')\nlight = {\n const light = new THREE.Group();\n \n const ambient = new THREE.AmbientLight(\"#888\")\n const directional = new THREE.DirectionalLight(\"#aaa\")\n directional.position.x = 10;\n \n light.add(ambient, directional)\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"earth = {\n let earth = this;\n \n if (!earth) {\n earth = new THREE.Mesh();\n earth.geometry = new THREE.SphereBufferGeometry(1, 40, 40);\n earth.rotation.y = Math.PI;\n }\n \n return earth;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"orbit = {\n let orbit = this;\n \n if (!orbit) {\n orbit = new THREE.Group(); \n orbit.add(track, satellite);\n }\n \n orbit.rotation.x = satelliteInclination * Math.PI / 180;\n \n return orbit;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"track = {\n let track = this; \n\n if (!track) {\n track = new THREE.Line();\n\n track.geometry = new THREE.CircleGeometry(1, 80);\n track.geometry.vertices.shift();\n track.geometry.vertices.push(track.geometry.vertices[0]);\n track.geometry.rotateX(Math.PI / 2); // rotate geometry so default is equatorial orbit\n\n track.material = new THREE.LineBasicMaterial({ color: 0x0000ff });\n }\n \n track.scale.setScalar(orbitRadiusInEarthRadii);\n\n return track;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"texture = {\n let texture = this;\n \n if (!texture) {\n texture = new THREE.CanvasTexture(map);\n earth.material = new THREE.MeshLambertMaterial({ map: texture });\n } else {\n texture.needsUpdate = true;\n }\n \n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"md`### Physics simulation stuff`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"G = 6.67191e-11 // m^3 kg^-1 s^-2","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"earthMass = 5.9721986e24 // kilograms","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"earthRadius = 6371 * 1000 // meters","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"earthAngularVelocity = (2 * Math.PI) / (23.934461223 /* sidereal day */ * 60 * 60) // radians per second","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"satelliteVelocity = Math.sqrt(G * earthMass / (earthRadius + satelliteAltitude)) // meters per second","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"satelliteAngularVelocity = satelliteVelocity / (earthRadius + satelliteAltitude) // radians per second","pinned":false,"hidden":false,"mode":"ojs"},{"id":917,"value":"orbitRadiusInEarthRadii = (earthRadius + satelliteAltitude) / earthRadius","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"simulate = {\n let lastUpdated = performance.now();\n \n while (true) {\n await Promises.tick(1000 / 60);\n const currentTime = performance.now();\n \n const simulatedTimeDelta = (currentTime - lastUpdated) * timeScale / 1000;\n\n // simulate rotation of the Earth\n earth.rotation.y += earthAngularVelocity * simulatedTimeDelta;\n \n // rotate satellite\n orbit.rotation.y += satelliteAngularVelocity * simulatedTimeDelta;\n \n lastUpdated = currentTime;\n yield;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1604,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1862,"value":"md`### Map imagery and projection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1752,"value":"naturalEarth = d3.image(\n \"https://gist.githubusercontent.com/jake-low/d519e00853b15e9cec391c3dab58e77f/raw/6e796038e4f34524059997f8e1f1c42ea289d805/ne1-small.png\",\n {crossOrigin: \"anonymous\"})\n// {\n// const image = new Image;\n// image.crossOrigin = \"anonymous\";\n// image.src = \"https://gist.githubusercontent.com/jake-low/d519e00853b15e9cec391c3dab58e77f/raw/6e796038e4f34524059997f8e1f1c42ea289d805/ne1-small.png\";\n// image.onload = () => resolve(image);\n// image.onerror = reject;\n// });","pinned":false,"hidden":false,"mode":"ojs"},{"id":1758,"value":"projection = d3.geoEquirectangular()\n .fitSize([width, width/2], { type: 'Sphere' })\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"md`### Ground track calculation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"md`### Miscellaneous`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"md`\nSlider inputs taken from [@jashkenas/inputs](/@jashkenas/inputs) and modified very slightly to support richer formatting.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, format, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n return input({\n type: \"range\", title, description, submit, format,\n attributes: {min, max, step, value},\n getValue: input => Math.round(input.valueAsNumber * precision) / precision\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1794,"value":"stylesheet = html`\n(restyle inputs so they take up less vertical space on mobile)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"md`\nDependencies: d3.js and Three.js\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.97/build/three.min.js\");\n await require(\"three@0.97/examples/js/controls/OrbitControls.js\").catch(() => {});\n await require(\"three@0.97/examples/js/loaders/OBJLoader.js\").catch(() => {});\n await require(\"three@0.97/examples/js/loaders/MTLLoader.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}