31:T440,md`The visualisation above shows one frame of the animation. Labels were added to the final video in AfterEffects, so this diagram has none. **Jupiter** is in red, **the Earth** in blue, **the asteroids** in grey, and **Lucy** in white. The controls below let you start the animation, or you can use the slider to pick or scrub through frames of the animation. You can also control the _frame of reference_. By default, the animation runs in the [_inertial_ frame of reference](https://en.wikipedia.org/wiki/Inertial_frame_of_reference), which shows all of the planets and asteroids orbiting the sun. You can switch it to a _rotational_ frame of reference, which holds Jupiter in place. This is the frame of reference used for the print graphic. If you use the “Start generation” button, the animation will start, but rather slowly. A few minutes after it finished, you will be prompted to download a zip file of every frame in the video.`32:T5e6,{ const sz = 500; const factor = size / sz; const svg = d3.create("svg").attr("width", sz).attr("height", sz); const g = svg.append("g"); // .attr("transform", `translate(${size / 2}, ${size / 2})`); g.append("circle") .classed("sun", true) .attr("cx", sz / 2) .attr("cy", sz / 2) .attr("r", 6) .attr("fill", colours.sun); g.selectAll(".object") .data(objects) .join("circle") .classed("object", true) .attr("r", 3) .attr("cx", (d) => scale(d[1][time][`x_${frame}`]) / factor) .attr("cy", (d) => scale(d[1][time][`y_${frame}`]) / factor); g.selectAll(".label") .data(objects) .join("text") .classed("label", true) .attr("text-anchor", "end") .attr("x", (d) => scale(d[1][time][`x_${frame}`]) / factor) .attr("y", (d) => scale(d[1][time][`y_${frame}`]) / factor) .text((d) => d[0]); g.selectAll(".trace") .data(objects) .join("path") .classed("trace", true) .attr("fill", "none") .attr("stroke", "black") .attr("d", (d) => { const path = d[1] .slice(1, time) .map((p) => [p[`x_${frame}`], p[`y_${frame}`]]) .map((p) => `L${scale(p[0]) / factor},${scale(p[1]) / factor}`) .join(" "); const firstPoint = d[1][0]; const firstString = [firstPoint[`x_${frame}`], firstPoint[`y_${frame}`]]; return ( `M${scale(firstString[0]) / factor},${ scale(firstString[1]) / factor } ` + path ); }); return svg.node(); }33:T440,drawObject = function (ctx, key, colour, r, time = 0) { const data = objects.get(key); const now = data[time]; const trail = data.slice(Math.max(0, time - 60), time); const first = trail[0] || data[0]; const fullTrail = data.slice(0, Math.max(0, time - 60)); const firstFull = data[0]; ctx.beginPath(); ctx.strokeStyle = d3.color(colour).darker(2); ctx.moveTo( scale(firstFull[`x_${frame}`]) + sidePadding, scale(firstFull[`y_${frame}`]) ); fullTrail.forEach((pt) => ctx.lineTo(scale(pt[`x_${frame}`]) + sidePadding, scale(pt[`y_${frame}`])) ); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = colour; ctx.lineWidth = 2; ctx.moveTo( scale(first[`x_${frame}`]) + sidePadding, scale(first[`y_${frame}`]) ); trail.forEach((pt) => ctx.lineTo(scale(pt[`x_${frame}`]) + sidePadding, scale(pt[`y_${frame}`])) ); ctx.stroke(); ctx.beginPath(); ctx.ellipse( scale(now[`x_${frame}`]) + sidePadding, scale(now[`y_${frame}`]), r, r, 0, 0, Math.PI * 2 ); ctx.fillStyle = colour; ctx.fill(); }34:[{"id":"ed6d12fd76741b4fd361301daa1a78331f9e0076d2965173dd070db2b8cc280f8ca81aa3c3763d6d1cc18e9870bf3a348ce1fff5424ce27311d56c93c054c7e7","href":"https://static.observableusercontent.com/files/ed6d12fd76741b4fd361301daa1a78331f9e0076d2965173dd070db2b8cc280f8ca81aa3c3763d6d1cc18e9870bf3a348ce1fff5424ce27311d56c93c054c7e7","name":"trajectories.csv","type":"text/csv","lastModified":1633598970059.749,"size":1152879}] 2f:{"title":"Lucy mission animation","cells":[{"id":0,"value":"# Lucy mission animation\n\nThis notebook contains the code for generating the animated diagram of NASA’s Lucy probe, which will visit many of the “Trojan asteroids”, a pair of clusters of asteroids at the [Lagrange points](https://solarsystem.nasa.gov/resources/754/what-is-a-lagrange-point/) of Jupiter’s orbit. You can read more about Lucy’s mission and see the complete animation in [our article](https://www.economist.com/science-and-technology/2021/10/12/a-probe-intended-to-study-the-trojan-asteroids-takes-off).","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"chart = {\n const canvas = d3\n .create(\"canvas\")\n .attr(\"height\", size)\n .attr(\"width\", size + sidePadding * 2)\n .style(\"width\", `${size / 2 + sidePadding}px`)\n .style(\"height\", `${size / 2}px`);\n const ctx = canvas.node().getContext(\"2d\");\n\n return canvas.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"viewof dlButton = Inputs.button(\n [\n [\"Start animation\", (value) => 1],\n [\"Start generation\", (value) => 2],\n [\"Stop\", (value) => 0]\n ],\n {}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof time = Inputs.range([0, 999], {\n step: 1,\n value: n\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof frame = Inputs.radio(\n new Map([\n [\"Inertial\", \"in\"],\n [\"Rotational (Jupiter)\", \"ro\"]\n ]),\n {\n label: \"Select a frame of reference\",\n value: \"in\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"We used the SVG version of the chart (below) as a prototype, and also as a guide to make sure we correctly labeled all of the various bodies in the video version.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"## How the animation works\n\nBelow here, these explanations get more technical.\n\nThe chart is built using D3 and canvas. Each frame is rendered by the `renderFrame` function below, with a helper function `drawObject` that draws each orbiting object and its trail.\n\nThis function is poorly optimised—you will notice the animation here slows down as you reach the end, because the trails become progressively more complicated to render. But it doesn’t matter: we pre-rendered each frame to export to video, so the final project doesn’t stutter. Optimising the function would have been tricky, so it’s good we didn’t have to do it.","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"renderFrame = function (ctx, t) {\n ctx.fillStyle = \"black\";\n ctx.fillRect(0, 0, size + sidePadding * 2, size);\n\n // the sun!\n ctx.beginPath();\n ctx.ellipse(size / 2 + sidePadding, size / 2, 20, 20, 0, 0, Math.PI * 2);\n ctx.fillStyle = colours.sun;\n ctx.fill();\n\n // others\n [\n \"Donaldjohanson\",\n \"Eurybates\",\n \"Leucus\",\n \"Orus\",\n \"Patroclus\",\n \"Polymele\"\n ].map((k) => drawObject(ctx, k, colours.asteroids, 6, t));\n\n // the earth!\n drawObject(ctx, \"Earth\", colours.earth, 8, t);\n\n // Jupiter!\n drawObject(ctx, \"Jupiter\", colours.jupiter, 12, t);\n\n // LUCY\n drawObject(ctx, \"Lucy\", colours.lucy, 4, t);\n\n ctx.fillStyle = \"white\";\n const fontSize = 28;\n ctx.font = `${fontSize * 2}px Econ Sans, Source Serif Pro`;\n ctx.textAlign = \"end\";\n ctx.fillText(\n timeFmt(objects.get(\"Earth\")[t].date),\n size + sidePadding * 2 - 50,\n fontSize * 2\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"There aren’t separate scales for `x` and `y` here because they would both be the same (distance in AU from the sun).","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"scale = d3\n .scaleLinear()\n .domain([0, 6])\n .range([size / 2, size])","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"The `n` function runs the animation—when the page is animating, it returns the frame number. This function also handles exporting all the frames (if you press “Start download” above). It uses the [`JSZip`](https://stuk.github.io/jszip/) library to stuff each frame from the canvas into a zip file—David Walsh outlines this approach [on his blog](https://davidwalsh.name/javascript-zip). Then it uses the [`FileSaver`](https://www.npmjs.com/package/file-saver) library to download the zip file.","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"n = {\n if (!dlButton) {\n return 0;\n }\n const zip = dlButton === 2 && new JSZip();\n const img = dlButton === 2 && zip.folder(\"images\");\n const ctx = chart.getContext(\"2d\");\n\n for (let i = 0; i < 1000; ++i) {\n const n = await Promises.delay(1, i);\n renderFrame(ctx, n);\n\n if (dlButton === 2) {\n const data = chart.toDataURL(\"image/png\");\n img.file(`${n}.png`, data.substr(data.indexOf(\",\") + 1), {\n base64: true\n });\n }\n yield n;\n }\n\n if (dlButton === 2) {\n zip.generateAsync({ type: \"blob\" }).then(function (content) {\n // const fileStream = streamSaver.createWriteStream(\"lucy.zip\", {});\n\n console.log(\"ok, here it is...?\");\n FileSaver.saveAs(content, \"lucy.zip\");\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"active = {\n time;\n const ctx = chart.getContext(\"2d\");\n renderFrame(ctx, time);\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"colours = ({\n sun: \"#FB9851\",\n jupiter: \"#E3120B\",\n earth: \"#475ED1\",\n asteroids: \"#B3B3B3\",\n lucy: \"white\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"sidePadding = ((size * 16) / 9 - size) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"size = 1080","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"timeFmt = d3.timeFormat(\"%b %-d %Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"objects = d3.group(trajectories, (d) => d.obj)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"trajectories = FileAttachment(\"trajectories.csv\")\n .csv()\n .then((d) => d.map(d3.autoType))","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"FileSaver = require(\"https://bundle.run/file-saver@2.0.5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"streamSaver = require(\"streamsaver\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"JSZip = require(\"jszip@3.7.1/dist/jszip.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"Thanks very much to Kel Elkins at NASA and Katherine Kretke at the Southwest Research Institute for providing the trajectory data to draw up the video.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}