31:T92a,md`This notebook reworks my [Periodic Planar Three-Body Orbits](https://observablehq.com/@rreusser/periodic-planar-three-body-orbits) notebook with a bit of an odd goal: to animate periodic planar three-body orbits using pure HTML and CSS, without any JavaScript, and without fully enumerating every point along the paths. The method is straightforward though a bit tedious. We integrate an orbit with fixed temporal spacing, assign the x and y components of each point along the trajectory to real and imaginary components in the complex plane, and compute the Discrete Fourier Transform (DFT). Then we threshold the frequency components, represent each frequency component as a rotating complex phasor, and convert to CSS transforms! For a delightful illustration of the method, see Mike Bostock's [Fourier Series - Zoom](https://observablehq.com/@mbostock/fourier-series-zoom) notebook in which he illustrates drawing a portait using the sum of complex phasors. The most challenging aspect was converting the phasors to CSS, but in the end I was able to represent them as a chain of transforms in the style \`transform(\${re}px, \${im}px) rotate(\${f}deg)\` where \`re\` and \`im\` are precisely the DFT components, and the frequency \`f\` is the component's frequency relative to the sum total of all parent rotations, so that the rotational speed of the component is correct. *(Thanks, [Fabian Iwand](https://observablehq.com/@mootari) for digging up the [CSS transform interpolation specification](https://drafts.csswg.org/css-transforms/#interpolation-of-transforms) and confirming that parallel lists of transforms are matched up and interpolated one transform at a time!)* Realistically, complex orbits require quite a few frequency components and actually end up quite large, but you can get a lovely figure-eight in just a little over two kilobytes. Particular tools I've used are Mikola Lysenko's timeless [ndarray](https://github.com/scijs/ndarray) and [ndarray-fft](https://github.com/scijs/ndarray-fft) modules, as well as [plotly.js](https://github.com/plotly/plotly.js)—in particular the \`scatter-gl\` trace type since the performance is a significant improvement over SVG once you get up in the neighborhood of a few thousand points. The end result is below, followed by the orbit integration and frequency filtering. `32:Td0d,viewof threeBodyHTML = { mutable transformCount = 0; let range = 0; trajectory.forEach(({ x, y }) => { for (let i = 0; i < n; i++) { range = Math.max(range, x[i], y[i]); } }); const css = []; for (let i = 0; i < filteredTrajectoryFFT.length; i++) { const fft = filteredTrajectoryFFT[i]; const n = fft[0].length; const nfft = Math.floor((n + 1) / 2); const froms = []; const tos = []; function unitize(value, units) { return parseFloat(value) === 0 ? value : `${value}${units}`; } let accumRotation = 0; function assemble(intfreq, i) { const f = freq[i]; const re = fft[0][i]; const im = fft[1][i]; const r2 = re * re + im * im; const radius = (size * 0.4) / range; const fmt = precision === 0 ? "%.0f" : `%.${precision}g`; const x = sprintf(fmt, parseFloat((re * radius).toFixed(precision))); const y = sprintf(fmt, parseFloat((im * radius).toFixed(precision))); if (Math.hypot(parseFloat(x), parseFloat(y)) === 0) return; if (r2 < threshold * threshold) return; const rotDiff = intfreq - accumRotation; accumRotation += rotDiff; function translate(x, y) { x = unitize(x, "px"); y = unitize(y, "px"); if (x === "0") return `translatey(${y})`; if (y === "0") return `translatex(${x})`; return `translate(${x},${y})`; } const tr = translate(x, y); froms.push(`rotate(0)${tr}`); tos.push(`rotate(${rotDiff}turn)${tr}`); } // Note: Can we do these in a better order to minimize the relative rotation // between each component? for (let j = nfft - 1; j > 0; j--) { assemble(-j, n - j); } for (let j = 0; j < nfft; j++) { assemble(j, j); } mutable transformCount += froms.length; css.push([froms.join(""), tos.join("")]); } const rad = initialConditions.m .map((m, i) => { if (m === 1) return ""; const r = (radius * Math.sqrt(m) + 0.5).toFixed(0); return `.threebody-o>div:nth-child(${ i + 1 }):after{width:${r}px;height:${r}px}\n`; }) .filter((x) => x) .join(""); const code = `

`; let ret; // Code rendering seems laggy when it gets too large if (code.length < 50000) { ret = md`\`\`\`html\n${code}\`\`\``; } else { const el = DOM.element("code"); el.textContent = code; ret = html`

${el}

`; } ret.style.overflow = "scroll"; ret.value = code; return ret; }33:T4ad,function planarThreeBodyDerivative(yp, y, t) { let dx, dy, r3, fx, fy; let m0 = initialConditions.m[0]; let m1 = initialConditions.m[1]; let m2 = initialConditions.m[2]; // The first derivative of position is stored in the state vector, // so its computation is nothing more than copying part of the // state into the result. (yp[0] = y[2]), (yp[1] = y[3]); (yp[4] = y[6]), (yp[5] = y[7]); (yp[8] = y[10]), (yp[9] = y[11]); // The rest of the function computes the first derivative of // velocity, i.e. the acceleration. // Attraction between 0-1 dx = y[4] - y[0]; dy = y[5] - y[1]; r3 = Math.pow(dx * dx + dy * dy, 1.5); (dx /= r3), (dy /= r3); yp[2] = dx * m1; yp[3] = dy * m1; yp[6] = -dx * m0; yp[7] = -dy * m0; // Attraction between 0-2 dx = y[8] - y[0]; dy = y[9] - y[1]; r3 = Math.pow(dx * dx + dy * dy, 1.5); (dx /= r3), (dy /= r3); yp[2] += dx * m2; yp[3] += dy * m2; yp[10] = -dx * m0; yp[11] = -dy * m0; // Attraction between 1-2 dx = y[8] - y[4]; dy = y[9] - y[5]; r3 = Math.pow(dx * dx + dy * dy, 1.5); (dx /= r3), (dy /= r3); yp[6] += dx * m2; yp[7] += dy * m2; yp[10] -= dx * m1; yp[11] -= dy * m1; }34:T404,{ plot( graphDivs[2], [ ...trajectoryFFTMag .map((orbit, i) => { return { type: "scattergl", x: freq, y: orbit, mode: "markers", showlegend: false, marker: { color: trajectoryFFTMask[i].map((m) => m ? [colorA, colorB, colorC][i] : "#bbb" ) } }; }) .flat(), { type: "scattergl", x: [-Math.PI / dt, Math.PI / dt], y: [threshold, threshold], mode: "lines", line: { color: "#888", dash: "dot" }, showlegend: false } ], { xaxis: { range: [-Math.PI / dt, Math.PI / dt] }, yaxis: { type: "log" }, height: 375 } ); return html`

${graphDivs[2]}

The frequency components. Positive frequencies represent counterclockwise rotations, negative represent clockwise.

•••