31:T46b,# Simple Rotating reference plane For visualizing [Lagrange points](https://en.wikipedia.org/wiki/Lagrange_point), you need to have a rotating reference frame to be able to see them well. As I was trying to visualize them, it was difficult to tell what exactly it was supposed to look like with complicated orbits going on, so I put this example together with much more simple behaviors to help nail down the rotation. - The blue circle advances around the circle (r=1) at 1 degree per tick. - The purple circle does the same but at a rate of 1.1 degrees per tick. - The green circle is stationary at (0.75, 0.75) The rotating reference frame rotates at the same rate as the blue circle, meaning that the blue circle stays stationary in the rotated frame. You can see the purple circle advance towards the blue circle as its moving faster along the same path, which is less apparent in the normal frame. We also see the green circle appear to travel in a circle in the rotating frame. 32:Tcaf,{ let zoom = 1; let initialRanges = [-1.5, 1.5, -1.5, 1.5].map(x => x*zoom); let img_width = 300; let height = 300; let div = d3 .create('div') .style('width', `${img_width}px`) .style('height', `${height+10}px`); let container = div .append('div') .style('position', 'relative') .style('width', `${img_width}px`) .style('height', `${height}px`); let svg1 = container .append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let graph = createStandardGrid(initialRanges.slice(0, 2), initialRanges.slice(2, 4), {svg: svg1, width: img_width, height: height}); let svg2 = container .append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 300) .attr('width', img_width) .attr('height', height); let graph2 = createStandardGrid(initialRanges.slice(0, 2), initialRanges.slice(2, 4), {svg: svg2, width: img_width, height: height}); graph.svg.append('circle') .attr('r', graph.x(1) - graph.x(0)) .attr('cx', graph.x(0)) .attr('cy', graph.y(0)) .attr('stroke', 'gray') .attr('stroke-dasharray', '2 3') .attr('fill', 'none'); graph.svg.append('text') .attr('x', 10) .attr('y', 10) .attr('font-size', 11) .text('Normal') graph2.svg.append('text') .attr('x', 10) .attr('y', 10) .attr('font-size', 11) .text('Rotated by theta') graph2.svg.append('circle') .attr('r', graph.x(1) - graph.x(0)) .attr('cx', graph.x(0)) .attr('cy', graph.y(0)) .attr('stroke', 'gray') .attr('stroke-dasharray', '2 3') .attr('fill', 'none'); // Calculate theta for the point in time at the end. let r = 1; let rotFrame = (x, y, theta) => { return [ x * Math.cos(-1*theta) - y * Math.sin(-1*theta), x * Math.sin(-1*theta) + y * Math.cos(-1*theta) ] } let getXY = (r, theta) => { return [ r*Math.cos(theta), r*Math.sin(theta) ] } let [xc, yc] = getXY(r, theta1); let [xr, yr] = rotFrame(xc, yc, theta1); graph2.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(xr)) .attr('cy', graph.y(yr)) .attr('stroke', 'blue') .attr('fill', 'none'); graph.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(xc)) .attr('cy', graph.y(yc)) .attr('fill', 'blue'); let [xc2, yc2] = getXY(r, (theta1*1.1) - Math.PI/2); let [xr2, yr2] = rotFrame(xc2, yc2, theta1); graph.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(xc2)) .attr('cy', graph.y(yc2)) .attr('fill', 'purple'); graph2.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(xr2)) .attr('cy', graph.y(yr2)) .attr('stroke', 'purple') .attr('fill', 'none'); let x1 = 0.5; let y1 = 0.5; let [x1r, y1r] = rotFrame(x1, y1, theta1); graph.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(x1)) .attr('cy', graph.y(y1)) .attr('fill', 'green'); graph2.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(x1r)) .attr('cy', graph.y(y1r)) .attr('stroke', 'green') .attr('fill', 'none'); return div.node(); }33:T50a,{ let zoom = 1; let initialRanges = [-1, 2, -1, 2].map(x => x*zoom); let img_width = 300; let height = 300; let div = d3 .create('div') .style('width', `${img_width}px`) .style('height', `${height+10}px`); let container = div .append('div') .style('position', 'relative') .style('width', `${img_width}px`) .style('height', `${height}px`); let svg1 = container .append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let graph = createStandardGrid(initialRanges.slice(0, 2), initialRanges.slice(2, 4), {svg: svg1, width: img_width, height: height}); let [x1, y1] = [1.4, 1]; graph.svg.append('circle') .attr('r', 2) .attr('cx', graph.x(x1)) .attr('cy', graph.y(y1)) .attr('fill', 'gray'); drawVector(graph, [[0, 0], [x1, y1]], 'lightgray'); graph.svg.append('text') .attr('x', graph.x(x1)) .attr('y', graph.y(y1)) .attr('dx', 3) .attr('font-size', 11) .text(`(${x1}, ${y1})`); graph.svg.append('text') .attr('x', graph.x(0.5)) .attr('y', graph.y(0.2)) .attr('font-size', 11) .text(`atan2(${y1}, ${x1}) = ${(Math.atan2(y1, x1)).toLocaleString()}`); return div.node(); }34:T69b,generateF = (nodes, G) => { // nodes are the nodes exhibiting gravitational forces, generally celestial bodies // the s input below is supposed to be the values affecting each other, but since we're just doing fields, // s will always be the initial state. G = G || 1; const n = nodes.length; // Borrowed from https://observablehq.com/@mcmcclur/gravitation-and-the-n-body-problem let x_accel = (s, i, j) => { if (i == j) { return 0 }; let m2 = nodes[j].m; let x1 = s[i]; let y1 = s[i + n]; let x2 = s[j]; let y2 = s[j + n]; return (m2 * (x2 - x1)) / ((x2 - x1) ** 2 + (y2 - y1) ** 2) ** (3 / 2); }; let y_accel = (s, i, j) => { if (i == j) { return 0 }; let m2 = nodes[j].m; let x1 = s[i]; let y1 = s[i + n]; let x2 = s[j]; let y2 = s[j + n]; return (m2 * (y2 - y1)) / ((x2 - x1) ** 2 + (y2 - y1) ** 2) ** (3 / 2); }; let gr = (s, t) => { return s // These two copy the stored velocities in the state to return them. By lining it up this way, // we can rely on generic vector addition in the Runge-Kutta function to compute the next steps // approximations. So we line velocity up with postion, and acceleration up with velocity, then // scale and add in RK. .slice(2 * n, 3 * n) // copy vx's [0n: px, 1n: py, 2n: vx, 3n: vy] .concat(s.slice(3 * n, 4 * n)) // copy vy's ^ .concat(d3.range(n).map(i => { return G*d3.sum(d3.range(nodes.length).map((j) => x_accel(s, i, j))) })) .concat(d3.range(n).map(i => { return G*d3.sum(d3.range(nodes.length).map((j) => y_accel(s, i, j))) })); }; return gr }35:[] 2f:{"title":"Simple Rotating reference plane","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":727,"value":"viewof t = Inputs.range([0, 360], {label: \"time t\", value: 0})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"//viewof theta1 = Inputs.range([0, Math.PI*2], {label: \"theta\", value: 0})\ntheta1 = (t/360)*(Math.PI*2)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"## The Math\n\nIn order to achieve this, we first need a means of calculating ${tex`\\theta`}, then we need a function to translate from \"normal\" coordinates to coordinates rotated by ${tex`\\theta`}.\n\nIn this example, we are directly defining the angle that the blue circle travels, however in the situation I'm targeting, we'll be receiving an ${tex`(x, y)`} coordinate as a result of integrating over the gravitational forces. If we want to put a particular point as \"stationary\" in the rotating reference plane, we need its angle. To get that, we use `Math.atan2(y, x)`.\n\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"Then, in order to translate a point to the rotated frame, we rely on these functions (laid out in more detail on [Rotating Reference Frames](https://en.wikipedia.org/wiki/Rotating_reference_frame) on Wikipedia):","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"x_{rotated} = x\\cos(-\\theta) - y\\sin(-\\theta)\n\n\\newline\n\ny_{rotated} = x\\sin(-\\theta) + y\\cos(-\\theta)","pinned":false,"hidden":false,"mode":"tex"},{"id":814,"value":"Some things that _didn't_ work were:\n- Using `asin(y/r)` to get ${tex`\\theta`} -- This function only goes from ${tex`(-\\frac{\\pi}{2}, \\frac{\\pi}{2})`}, so as soon as you get into the negative x domain, things get weird.\n- Using a single theta when plotting a path over time. This will rotate the entire path, but what you want is a theta at each point. That makes the formulation on Wikipedia more accurate where it says ${tex`-\\theta(t)`} rather than a single ${tex`\\theta`} value.","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"import {createStandardGrid, drawVector, addArrowHead, vectorAdd, vectorScale, rk_step} from \"@pcarleton/range-kutta-supporting-functions@312\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"makeStateVec = (nodes) => {\n return nodes.map(n => n.x)\n .concat(nodes.map(n => n.y))\n .concat(nodes.map(n => n.vx))\n .concat(nodes.map(n => n.vy));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"d3 = require('d3@7.3.0')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}