31:T8c4,viewof params = { const form = html``; form.value = { longitude: 0, latitude: 0, altitude: 11000, rotation: 0, tilt: 0, fieldOfView: 25 }; form.oninput = () => { form.oa.value = `${(form.value.longitude = form.a.valueAsNumber).toFixed( 2 )}°`; form.ob.value = `${(form.value.latitude = form.b.valueAsNumber).toFixed( 2 )}°`; form.oc.value = `${(form.value.altitude = Math.pow( 2, form.c.valueAsNumber )).toFixed(0)} km`; form.od.value = `${(form.value.rotation = form.d.valueAsNumber).toFixed( 0 )}°`; form.oe.value = `${(form.value.tilt = form.e.valueAsNumber).toFixed(0)}°`; form.of.value = `${(form.value.fieldOfView = form.f.valueAsNumber).toFixed( 0 )}°`; }; form.oninput(); return form; }32:[] 2f:{"title":"Tilting the Satellite","cells":[{"id":0,"value":"md`# Tilting the Satellite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`Mike Bostock's [Satellite Explorer](https://observablehq.com/@d3/satellite-explorer) provides a fun way to play with the raw parameters of the [General Perspective Projection](https://en.wikipedia.org/wiki/General_Perspective_projection), which can be used to construct a projection of the Earth similar to what would be captured by a photo from a satellite. However, varying the tilt angle in that notebook can result in some surprising effects. This is because the projection's parameters do not directly relate to the physical parameters of a satellite camera.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"md`In this notebook, we start from the physical position of a satellite and the properties of its camera, and derive the relevant projection parameters. As in [The View from Space](https://observablehq.com/@jjhembd/the-view-from-space), we define the satellite's position by its longitude, latitude, and altitude. But this time, to account for the orientation of the camera, we add rotation and tilt parameters, along with the angular [field of view](https://en.wikipedia.org/wiki/Field_of_view) in the Y direction.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"map = {\n const context = DOM.context2d(width, numPixelsY);\n const path = d3.geoPath(projection, context);\n context.fillStyle = \"#88d\";\n context.beginPath(), path(land), context.fill();\n //context.beginPath(), path(grid.minor), context.strokeStyle = \"#aaa\", context.globalAlpha = 0.4, context.stroke();\n context.beginPath(),\n path(grid.major),\n (context.strokeStyle = \"#ddf\"),\n (context.globalAlpha = 0.8),\n context.stroke();\n context.beginPath(),\n path(grid.horizon),\n (context.strokeStyle = \"#000\"),\n context.stroke();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`Unlike the raw projection, this example behaves as expected for small altitudes and large tilt angles. When the satellite is close to the surface, and its camera is oriented near 90° from vertical, we see a flattish horizon near the center of the display--just like we would see out the window of an airplane.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`## Computing projection parameters`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`The rotations of the projection can be directly obtained from the satellite's longitude and latitude and the camera's rotation. To obtain the projection's \"distance\", we must convert altitude to a proportional distance from the Earth's center:`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"snyderP = 1.0 + params.altitude / earthRadius;","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`The projection's scale and translation require a little more thought. Consider the following picture, which is modified from Figure 35 in Snyder's [Map Projections, A Working Manual](https://pubs.usgs.gov/pp/1395/report.pdf):`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`As the tilt angle increases, two things happen:\n1. The projection plane moves closer to the camera\n2. The center of the camera's view moves up the plane\n\nNote that the origin of the projection's y-axis remains at the intersection with the sphere, even though the camera is no longer pointing at that location. The map y-coordinate of the camera's center of view will be given by`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"dY = params.altitude * Math.sin(params.tilt / degrees);","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`The distance from the camera to the projection plane is`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"dZ = params.altitude * Math.cos(params.tilt / degrees);","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"md`We now derive the projection's scale by computing the y-range visible within the camera's field of view. Since we are working with real altitudes in kilometers, we must also scale by the radius of the Earth, as discussed in [The View from Space](https://observablehq.com/@jjhembd/the-view-from-space).`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"visibleYextent = 2 * dZ * Math.tan(0.5 * params.fieldOfView / degrees)","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"scale = earthRadius * numPixelsY / visibleYextent;","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`Finally, we compute the y-translation and construct our projection.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"yShift = dY * numPixelsY / visibleYextent;","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"projection = d3.geoSatellite()\n .scale(scale)\n .translate([width / 2, yShift + numPixelsY / 2])\n .rotate([-params.longitude, -params.latitude, params.rotation])\n .tilt(params.tilt)\n .distance(snyderP)\n .preclip(preclip)\n .precision(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## Clipping out-of-range points`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`Note that the projection is defined for all points on the globe, including:\n- Points on the other side of the Earth (or beyond the horizon), and\n- Points *behind* the camera! (for large tilt angles)\n\nThe math/geometry to remove these points could be pretty complicated... Thankfully Mike Bostock has already done it for us. We copy from [Satellite Explorer](https://observablehq.com/@d3/satellite-explorer), with the addition of one extra safety factor.`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"preclip = {\n const tilt = params.tilt / degrees;\n const alpha = Math.acos(snyderP * Math.cos(tilt) * 0.999);\n const clipDistance = geoClipCircle(Math.acos(1 / snyderP) - 1e-6);\n return alpha ? geoPipeline(\n clipDistance,\n geoRotatePhi(Math.PI + tilt),\n geoClipCircle(Math.PI - alpha - 1e-4), // Extra safety factor needed for large tilt values\n geoRotatePhi(-Math.PI - tilt)\n ) : clipDistance;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"function geoPipeline(...transforms) { // Move to Appendix?\n return sink => {\n for (let i = transforms.length - 1; i >= 0; --i) {\n sink = transforms[i](sink);\n }\n return sink;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"geoClipCircle = d3.geoClipCircle;","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"function geoRotatePhi(deltaPhi) {\n const cosDeltaPhi = Math.cos(deltaPhi);\n const sinDeltaPhi = Math.sin(deltaPhi);\n return sink => ({\n point(lambda, phi) {\n const cosPhi = Math.cos(phi);\n const x = Math.cos(lambda) * cosPhi;\n const y = Math.sin(lambda) * cosPhi;\n const z = Math.sin(phi);\n const k = z * cosDeltaPhi + x * sinDeltaPhi;\n sink.point(Math.atan2(y, x * cosDeltaPhi - z * sinDeltaPhi), Math.asin(k));\n },\n lineStart() { sink.lineStart(); },\n lineEnd() { sink.lineEnd(); },\n polygonStart() { sink.polygonStart(); },\n polygonEnd() { sink.polygonEnd(); },\n sphere() { sink.sphere(); }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## Appendix`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"earthRadius = 6371; // Spherical approximation: average radius in km","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"numPixelsY = width * 0.6;","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"degrees = 180 / Math.PI;","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"grid = ({\n major: d3.geoGraticule().step([15,15])(),\n minor: d3.geoGraticule().step([5,5])(),\n horizon: ({type: \"Sphere\"})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"land = Generators.observe(notify => {\n const mousedown = event => { event.target.form && notify(land110); };\n const mouseup = event => { event.target.form && notify(land50); };\n notify(land50);\n window.addEventListener(\"mousedown\", mousedown);\n window.addEventListener(\"mouseup\", mouseup);\n return () => {\n window.removeEventListener(\"mousedown\", mousedown);\n window.removeEventListener(\"mouseup\", mouseup);\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"land50 = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/50m.json\")\n .then(response => response.json())\n .then(world => topojson.feature(world, world.objects.land));","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"land110 = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json\")\n .then(response => response.json())\n .then(world => topojson.feature(world, world.objects.land));","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"d3 = require(\"d3-geo@1\", \"d3-geo-projection@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}

Satellite Position

Camera Properties