2c:null 2d:["$","title",null,{"children":"Drawing a gravity field | Paul Carleton | Observable"}] 32:T663,{ let ranges = {x: [-100*scale, 100*scale], y: [-50*scale, 50*scale]}; let g1 = (6.674e-11); let m1 = 6.687e15; // mass of eros https://en.wikipedia.org/wiki/433_Eros let mMoon = 7.342e22; let unitDist = 1000; // in terms of meters, 1000 means 1 in the graphs scale is 1 km. let mRadius_m = 1737400; let mRadius_unit = mRadius_m / unitDist; let ggc1 = (g1*mMoon) / (unitDist**3); // ~4900 for the moon // return ggc1; let lhsc = ggc1; let graph = createStandardGrid(ranges.x, ranges.y); let scaleFactor = unitDist; let gr = (x, y) => { let magSq = x**2 + y**2; let rmag = Math.sqrt(magSq); let rhatx = scaleFactor* x / rmag; let rhaty = scaleFactor * y / rmag; let lhs = (-lhsc / magSq); return [ lhs * rhatx, lhs * rhaty ]; } let xstep = (ranges.x[1] - ranges.x[0])/20; let ystep = xstep; let thresh = 100; let vecs = []; for (let i = ranges.x[0]; i < ranges.x[1]; i += xstep) { for (let j = ranges.y[0]; j < ranges.y[1]; j += ystep) { let r = Math.sqrt(i**2 + j**2); if (r < mRadius_unit) { continue; } let gvr = gr(i, j); // if (Math.abs(gvr[0]) > thresh || Math.abs(gvr[1]) > thresh) { // continue; // } let vec = [ [i, j], vectorAdd([i, j], gvr) ]; vecs.push(vec); drawVector(graph, vec); } } graph.svg.append('circle') .attr('r', graph.x(mRadius_unit) - graph.x(0)) .attr('cx', graph.x(0)) .attr('cy', graph.y(0)) .attr('fill', 'none') .attr('stroke', 'blue'); return graph.svg.node(); }33:T498,### Using a canvas & svg To use the d3 demo, we need a canvas to draw the arrows. This gets a little bit funky since we're essentially stacking the canvas and SVG. This is also what Mark McClure does in [his n-body simulation](https://observablehq.com/@mcmcclur/gravitation-and-the-n-body-problem). The most challenging part I ran into with this was the difference in orientation between the SVG, the arrow example I was using, and the output of `Math.atan2`. In the world of math I'm used to, 0 radians points to the right. E.g the point on the unit circle at (1, 0), corresponds to 0 radians. However, the arrow I was re-using from the Vector Field demo creates an arrow pointing upwards. This means when we rotate that arrow, we'll get a different orientation. The second confusing part was how [`context.rotate`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate) works. It rotates clockwise, where in my typical radian thinking, positive radians means rotate counter-clockwise. To account for this, I adjusted the arrow to point right by default, then used a negative radian value to rotate the arrow to the correct orientation. 34:Tca5,{ const img_width = 600; const height = 300; let ranges = {x: [-100*scale, 100*scale], y: [-50*scale, 50*scale]}; 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 svg = container .append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let canvas = container .append('canvas') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let context = canvas.node().getContext('2d'); context.globalAlpha = 0.9; let graph = createStandardGrid(ranges.x, ranges.y, {svg}); // Draw moon border let unitDist = 1000; // in terms of meters, 1000 means 1 in the graphs scale is 1 km. let mRadius_m = 1737400; let mRadius_unit = mRadius_m / unitDist; graph.svg.append('circle') .attr('r', graph.x(mRadius_unit) - graph.x(0)) .attr('cx', graph.x(0)) .attr('cy', graph.y(0)) .attr('fill', 'none') .attr('stroke', 'blue'); // Calculate field let nodes = [ // Moon { x: 0, y: 0, //m: 7.342e22, m: 100, vx: 0, vy: 0 } ]; const G = 6.674e-11 / (unitDist ** 3); // Draw field const F = gravityField(nodes, G); let mMoon = 7.342e22; let ggc1 = (G*mMoon) / (unitDist**3); // ~4900 for the moon // return ggc1; let lhsc = ggc1; let gr2 = (x, y) => { let magSq = x**2 + y**2; let rmag = Math.sqrt(magSq); let rhatx = x / rmag; let rhaty = y / rmag; let lhs = (-lhsc / magSq); return { xpp: lhs * rhatx, ypp: lhs * rhaty }; } let xstep = (ranges.x[1] - ranges.x[0])/30; let ystep = (ranges.y[1] - ranges.y[0])/30;; // let thresh = 100; let s0 = makeStateVec(nodes); let accels = []; let vecs = []; for (let i = ranges.x[0]; i < ranges.x[1]; i += xstep) { for (let j = ranges.y[0]; j < ranges.y[1]; j += ystep) { let r = Math.sqrt(i**2 + j**2); if (r < mRadius_unit) { continue; } let gvr = F(i, j, s0); //let gvr = gr2(i, j); let mag = gvr.xpp**2 + gvr.ypp**2; let dirRad = Math.atan2(gvr.ypp, gvr.xpp); accels.push({x: i, y: j, mag, dirRad, ...gvr}); // let vec = [ // [i, j], // vectorAdd([i, j], vectorScale([gvr.xpp, gvr.ypp], sf)) // ]; // vecs.push(vec); // drawVector(graph, vec); } } let magScale = d3.scalePow([0, d3.max(accels, d => d.mag)], [0, 2]).exponent(0.33333); for (const {mag, dirRad, x, y} of accels) { context.save(); context.translate(graph.x(x), graph.y(y)); context.scale(magScale(mag), magScale(mag)); context.rotate(-1*dirRad); context.beginPath(); context.moveTo(-2, -2); context.lineTo(-2, 2); context.lineTo(8, 0); context.closePath(); context.fillStyle = 'blue'; context.fill(); context.restore(); } //return {vecs, accels}; return div.node(); }35:Tdd3,{ const img_width = 600; const height = 300; let ranges = {x: [-150, 150], y: [-50, 50]}; 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 svg = container .append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let canvas = container .append('canvas') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let context = canvas.node().getContext('2d'); context.globalAlpha = 0.9; let graph = createStandardGrid(ranges.x, ranges.y, {svg}); // Calculate field let nodes = [ // Moon { x: 100, y: 0, //m: 7.342e22, m: 10, vx: 0, vy: 0 }, // earth { x: -100, y: 0, //m: 7.342e22, m: 1000, vx: 0, vy: 0 } ]; graph.svg.append('circle') .attr('r', 8) .attr('cx', graph.x(nodes[1].x)) .attr('cy', graph.y(nodes[1].y)) .attr('fill', 'blue'); graph.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(nodes[0].x)) .attr('cy', graph.y(nodes[0].y)) .attr('fill', 'gray'); // const G = 6.674e-11 / (unitDist ** 3); // Draw field const F = gravityField(nodes, 1); // let mMoon = 7.342e22; // let ggc1 = (G*mMoon) / (unitDist**3); // ~4900 for the moon // return ggc1; // let lhsc = ggc1; // let gr2 = (x, y) => { // let magSq = x**2 + y**2; // let rmag = Math.sqrt(magSq); // let rhatx = x / rmag; // let rhaty = y / rmag; // let lhs = (-lhsc / magSq); // return { // xpp: lhs * rhatx, // ypp: lhs * rhaty // }; // } let xstep = (ranges.x[1] - ranges.x[0])/30; let ystep = (ranges.y[1] - ranges.y[0])/30;; // let thresh = 100; let s0 = makeStateVec(nodes); let accels = []; let vecs = []; for (let i = ranges.x[0]; i < ranges.x[1]; i += xstep) { for (let j = ranges.y[0]; j < ranges.y[1]; j += ystep) { // let r = Math.sqrt(i**2 + j**2); // if (r < mRadius_unit) { // continue; // } let gvr = F(i, j, s0); //let gvr = gr2(i, j); let mag = gvr.xpp**2 + gvr.ypp**2; let dirRad = Math.atan2(gvr.ypp, gvr.xpp); accels.push({x: i, y: j, mag, dirRad, ...gvr}); // let vec = [ // [i, j], // vectorAdd([i, j], vectorScale([gvr.xpp, gvr.ypp], sf)) // ]; // vecs.push(vec); // drawVector(graph, vec); } } let maxMag = d3.max(accels, d => d.mag); let smallMax = d3.sort(accels)[2].mag; let magScale = d3.scalePow([0, smallMax], [0, 1]).exponent(0.33333).clamp(true); var color = d3.scaleLinear() .domain([0, smallMax]) .range(["blue", "red"]); //let magScale = d3.scaleLog([0, smallMax], [0, 2]).clamp(true); for (const {mag, dirRad, x, y} of accels) { context.save(); context.translate(graph.x(x), graph.y(y)); context.scale(magScale(mag), magScale(mag)); context.rotate(-1*dirRad); context.beginPath(); context.moveTo(-2, -2); context.lineTo(-2, 2); context.lineTo(8, 0); context.closePath(); context.fillStyle = color(mag); context.fill(); context.restore(); } //return {vecs, accels}; return div.node(); }36:Tdd1,{ const img_width = 600; const height = 300; let ranges = {x: [60, 120], y: [-50, 50]}; 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 svg = container .append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let canvas = container .append('canvas') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let context = canvas.node().getContext('2d'); context.globalAlpha = 0.9; let graph = createStandardGrid(ranges.x, ranges.y, {svg}); // Calculate field let nodes = [ // Moon { x: 100, y: 0, //m: 7.342e22, m: 10, vx: 0, vy: 0 }, // earth { x: -100, y: 0, //m: 7.342e22, m: 1000, vx: 0, vy: 0 } ]; graph.svg.append('circle') .attr('r', 8) .attr('cx', graph.x(nodes[1].x)) .attr('cy', graph.y(nodes[1].y)) .attr('fill', 'blue'); graph.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(nodes[0].x)) .attr('cy', graph.y(nodes[0].y)) .attr('fill', 'gray'); // const G = 6.674e-11 / (unitDist ** 3); // Draw field const F = gravityField(nodes, 1); // let mMoon = 7.342e22; // let ggc1 = (G*mMoon) / (unitDist**3); // ~4900 for the moon // return ggc1; // let lhsc = ggc1; // let gr2 = (x, y) => { // let magSq = x**2 + y**2; // let rmag = Math.sqrt(magSq); // let rhatx = x / rmag; // let rhaty = y / rmag; // let lhs = (-lhsc / magSq); // return { // xpp: lhs * rhatx, // ypp: lhs * rhaty // }; // } let xstep = (ranges.x[1] - ranges.x[0])/30; let ystep = (ranges.y[1] - ranges.y[0])/30;; // let thresh = 100; let s0 = makeStateVec(nodes); let accels = []; let vecs = []; for (let i = ranges.x[0]; i < ranges.x[1]; i += xstep) { for (let j = ranges.y[0]; j < ranges.y[1]; j += ystep) { // let r = Math.sqrt(i**2 + j**2); // if (r < mRadius_unit) { // continue; // } let gvr = F(i, j, s0); //let gvr = gr2(i, j); let mag = gvr.xpp**2 + gvr.ypp**2; let dirRad = Math.atan2(gvr.ypp, gvr.xpp); accels.push({x: i, y: j, mag, dirRad, ...gvr}); // let vec = [ // [i, j], // vectorAdd([i, j], vectorScale([gvr.xpp, gvr.ypp], sf)) // ]; // vecs.push(vec); // drawVector(graph, vec); } } let maxMag = d3.max(accels, d => d.mag); let smallMax = d3.sort(accels)[2].mag; let magScale = d3.scalePow([0, smallMax], [0, 1]).exponent(0.33333).clamp(true); var color = d3.scaleLinear() .domain([0, smallMax]) .range(["blue", "red"]); //let magScale = d3.scaleLog([0, smallMax], [0, 2]).clamp(true); for (const {mag, dirRad, x, y} of accels) { context.save(); context.translate(graph.x(x), graph.y(y)); context.scale(magScale(mag), magScale(mag)); context.rotate(-1*dirRad); context.beginPath(); context.moveTo(-2, -2); context.lineTo(-2, 2); context.lineTo(8, 0); context.closePath(); context.fillStyle = color(mag); context.fill(); context.restore(); } //return {vecs, accels}; return div.node(); }37:Tdd0,{ const img_width = 600; const height = 300; let ranges = {x: [75, 85], y: [-20, 20]}; 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 svg = container .append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let canvas = container .append('canvas') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', img_width) .attr('height', height); let context = canvas.node().getContext('2d'); context.globalAlpha = 0.9; let graph = createStandardGrid(ranges.x, ranges.y, {svg}); // Calculate field let nodes = [ // Moon { x: 100, y: 0, //m: 7.342e22, m: 10, vx: 0, vy: 0 }, // earth { x: -100, y: 0, //m: 7.342e22, m: 1000, vx: 0, vy: 0 } ]; graph.svg.append('circle') .attr('r', 8) .attr('cx', graph.x(nodes[1].x)) .attr('cy', graph.y(nodes[1].y)) .attr('fill', 'blue'); graph.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(nodes[0].x)) .attr('cy', graph.y(nodes[0].y)) .attr('fill', 'gray'); // const G = 6.674e-11 / (unitDist ** 3); // Draw field const F = gravityField(nodes, 1); // let mMoon = 7.342e22; // let ggc1 = (G*mMoon) / (unitDist**3); // ~4900 for the moon // return ggc1; // let lhsc = ggc1; // let gr2 = (x, y) => { // let magSq = x**2 + y**2; // let rmag = Math.sqrt(magSq); // let rhatx = x / rmag; // let rhaty = y / rmag; // let lhs = (-lhsc / magSq); // return { // xpp: lhs * rhatx, // ypp: lhs * rhaty // }; // } let xstep = (ranges.x[1] - ranges.x[0])/30; let ystep = (ranges.y[1] - ranges.y[0])/30;; // let thresh = 100; let s0 = makeStateVec(nodes); let accels = []; let vecs = []; for (let i = ranges.x[0]; i < ranges.x[1]; i += xstep) { for (let j = ranges.y[0]; j < ranges.y[1]; j += ystep) { // let r = Math.sqrt(i**2 + j**2); // if (r < mRadius_unit) { // continue; // } let gvr = F(i, j, s0); //let gvr = gr2(i, j); let mag = gvr.xpp**2 + gvr.ypp**2; let dirRad = Math.atan2(gvr.ypp, gvr.xpp); accels.push({x: i, y: j, mag, dirRad, ...gvr}); // let vec = [ // [i, j], // vectorAdd([i, j], vectorScale([gvr.xpp, gvr.ypp], sf)) // ]; // vecs.push(vec); // drawVector(graph, vec); } } let maxMag = d3.max(accels, d => d.mag); let smallMax = d3.sort(accels)[2].mag; let magScale = d3.scalePow([0, smallMax], [0, 1]).exponent(0.33333).clamp(true); var color = d3.scaleLinear() .domain([0, smallMax]) .range(["blue", "red"]); //let magScale = d3.scaleLog([0, smallMax], [0, 2]).clamp(true); for (const {mag, dirRad, x, y} of accels) { context.save(); context.translate(graph.x(x), graph.y(y)); context.scale(magScale(mag), magScale(mag)); context.rotate(-1*dirRad); context.beginPath(); context.moveTo(-2, -2); context.lineTo(-2, 2); context.lineTo(8, 0); context.closePath(); context.fillStyle = color(mag); context.fill(); context.restore(); } //return {vecs, accels}; return div.node(); }38:T854,{ let ranges = {x: [75, 90], y: [-20, 20]}; let G = 1; // G is all relative to the masses and units, so we'll make it 1 here for convenience. // To simulate a earth/moon situation, we can make the masses the same relative to each other. let nodes = [ {x: -100, y: 0, vx: 0, vy: 0, m: 1000}, {x: 100, y: 0, vx: 0, vy: 0, m: 10} ]; const n = nodes.length; let graph = createStandardGrid(ranges.x, ranges.y); let s0 = nodes.map(n => n.x) .concat(nodes.map(n => n.y)) .concat(nodes.map(n => n.vx)) .concat(nodes.map(n => n.vy)); // Borrowed from https://observablehq.com/@mcmcclur/gravitation-and-the-n-body-problem let x_accel = (x1, y1, s, j) => { 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 = (x1, y1, s, j) => { 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 = (x, y, s) => { return { xpp: G*d3.sum(d3.range(nodes.length).map((i) => x_accel(x, y, s, i))), ypp: G*d3.sum(d3.range(nodes.length).map((i) => y_accel(x, y, s, i))), }; } let xstep = (ranges.x[1] - ranges.x[0])/30; let ystep = (ranges.y[1] - ranges.y[0])/30;; // let thresh = 100; let vecs = []; for (let i = ranges.x[0]; i < ranges.x[1]; i += xstep) { for (let j = ranges.y[0]; j < ranges.y[1]; j += ystep) { let gvr = gr(i, j, s0); let vec = [ [i, j], vectorAdd([i, j], vectorScale([gvr.xpp, gvr.ypp], scale2)) ]; vecs.push(vec); drawVector(graph, vec); } } graph.svg.append('circle') .attr('r', 8) .attr('cx', graph.x(nodes[0].x)) .attr('cy', graph.y(nodes[0].y)) .attr('fill', 'blue'); graph.svg.append('circle') .attr('r', 4) .attr('cx', graph.x(nodes[1].x)) .attr('cy', graph.y(nodes[1].y)) .attr('fill', 'gray'); return graph.svg.node(); }39:T4f1,gravityField = (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 = (x1, y1, s, j) => { let m2 = nodes[j].m; // In the n-body simulation, all the nodes are moving, but in this modified version // nothing is moving, we're just grabbing the point in time acceleration. // 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 = (x1, y1, s, j) => { 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 = (x, y, s) => { return { xpp: G*d3.sum(d3.range(nodes.length).map((i) => x_accel(x, y, s, i))), ypp: G*d3.sum(d3.range(nodes.length).map((i) => y_accel(x, y, s, i))), }; }; return gr }3a:[] 30:{"id":"60b02fd27010a13d","slug":"drawing-a-gravity-field","title":"Drawing a gravity field","thumbnail":"f96279a2ca99b4ebefa8f87c4c32672c96c4b5f4a8a72c6ecaef75ff5432bf24","access_level":"public","create_time":"$D2022-03-27T09:38:13.782Z","update_time":"$D2022-04-16T13:11:35.055Z","view_time":null,"first_public_time":"$D2022-04-16T13:09:16.328Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"96a931273b05814d","login":"pcarleton","name":"Paul Carleton","avatar_url":"https://avatars-next.observableusercontent.com/181dd35860c8e019ee45523ffb881d40a2e4b898b0def00618934d85ff63b64e","tier":"starter_2024"},"version":364,"publish_version":364,"role":null,"authored":false,"authors":[{"type":"individual","id":"caf8f40f87928ba4","login":"pcarleton","name":"Paul Carleton","avatar_url":"https://avatars-next.observableusercontent.com/181dd35860c8e019ee45523ffb881d40a2e4b898b0def00618934d85ff63b64e","tier":null}],"members":[{"type":"individual","id":"caf8f40f87928ba4","login":"pcarleton","name":"Paul Carleton","avatar_url":"https://avatars-next.observableusercontent.com/181dd35860c8e019ee45523ffb881d40a2e4b898b0def00618934d85ff63b64e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"fdfbac3a6ed3cd55","slug":"interplanetary-drivers-ed","title":"Interplanetary Driver's Ed","owner":{"id":"96a931273b05814d","login":"pcarleton","name":"Paul Carleton"}},"type":"notebook","body":{"titling":"auto","title":"Drawing a gravity field","cells":[{"id":0,"value":"# Drawing a gravity field\n\nWe'll start with a model of the moon. This has a scale factor of 1 = 1km.\n\nTODO: put in the gravity equations.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"viewof scale = Inputs.range([1, 200], {label: \"Zoom\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Drawing the arrows.\n\nThe challenge here is that the arrows don't tell us that much. We have 2 pieces of information: direction and magnitude. The units of the acceleration are m/s^2, which isn't the same as the 1 km scale of the distance, so we have leeway to make the magnitude something that gives more visual information.\n\nFor reference, gravity on the surface of the moon is ~ 1.67 m/s^2, so that's about the maximum we would expect.\n\nWind speed is a common vector field that's plotted that we can take some hints from:\n- [Tokyo Wind Speed](https://air.nullschool.net/) (mimicked [here](https://observablehq.com/@vinicius-mello/polya-vector-field))\n- [Vector Field d3 demo](https://observablehq.com/@d3/vector-field)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"## A more complicated system\n\nNow let's try with 2 bodies to see how the field changes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"Here we are zoomed in on the \"moon\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"And here's a closer look at the point of equilibrium, probably the most interesting point in this system.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"Here's a slight variation on our initial vector field where I scale a vector up pointing in the direction. It was a bit noisy, but kind of neat to play around with.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof scale2 = Inputs.range([1, 200], {label: \"Arrow scale\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"## Visualizing with particles\n\nAn interesting next step would be to visualize with particles like the [Tokyo Windspeed demo](https://air.nullschool.net/) or the [Polya vector field](https://observablehq.com/@vinicius-mello/polya-vector-field), but I haven't built that yet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"## Draw as contours\n\nI drew up a follow-up example with drawing contours here: https://observablehq.com/@pcarleton/working-with-d3-contours","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"## Calculating gravity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"ranges1 = {return {x: [-110, 110], y: [-20, 20]}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"nodes = [\n {x: -100, y: 0, vx: 0, vy: 0, m: 1000},\n {x: 100, y: 0, vx: 0, vy: 0, m: 10}\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {createStandardGrid, drawVector, addArrowHead, vectorAdd, vectorScale} from \"@pcarleton/range-kutta-supporting-functions@309\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"d3 = require('d3@7.3.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1"}} 31:"$30:body"