31:T4c3,# Force-simulated Solar System This shows a force-simulated version of the solar system. The orbital trajectories are derived purely from the configuration of distances and masses of all the bodies. It is rendered true-to-scale, which shows how vast the empty space really is in between the bodies. The simulation is ran using the [d3-force](https://github.com/d3/d3-force) simulation engine with the gravity-like [d3-force-magnetic](https://github.com/vasturiano/d3-force-magnetic) (inverse square law) attraction force. Each body is given an initial tangential velocity, equal to its [orbital speed](https://en.wikipedia.org/wiki/Orbital_speed) around the central sun, calculated as `√(GM/d)`. See also [force-simulated orbit trajectories](https://observablehq.com/@vasturiano/orbital-trajectory). Use the `Lock on` radio buttons to select the central pivoting body. The `Size distortion` slider lets you exaggerate the size of the planetary bodies linearly, so they can be visible. These options are for rendering purposes only and do not affect the mechanics of motion. Zoom-in/out using the scroll-wheel. Zooming in reduces the simulation speed for the visualization purposes, as closer bodies orbit faster. 32:T6a7,{ forceSim.on('tick', () => { const TAU = 2*Math.PI, F = 1e8; // Scale factor, to prevent bug of (scaled) arcs with r<0.002 from disappearing const ctx = canvas.getContext('2d'); ctx.restore(); ctx.save(); // reset transforms ctx.clearRect(0, 0, width, height); // Wipe canvas // 0,0 at canvas center ctx.translate(width/2, height/2); // Apply zoom if (zoomLevel) { ctx.scale(zoomLevel/F, zoomLevel/F); } const nodes = forceSim.nodes(); // Lock on body if (lockOnIdx) { const lockOn = nodes[+lockOnIdx]; ctx.translate(-lockOn.x*F, -lockOn.y*F); } for (let i=0; i TRAIL_LENGTH) node.trail.shift(); } }) }33:T523,nodes = { return parseBodies(solarSystem); function parseBodies(bodies, parentMass = 0, posOffset = [0,0], velocityOffset = [0,0]) { return [].concat(...bodies.map(body => { const ang = (body.phase || (Math.random() * 360)) * Math.PI/180, // Random init angle if not specified (to prevent aligned init forces from distorting orbits) x = posOffset[0] + au(body.distance) * Math.sin(ang), y = posOffset[1] - au(body.distance) * Math.cos(ang), relVelocity = (body.distance ? Math.sqrt(pxG * parentMass / au(body.distance)): 0) * (body.factorV || 1), // orbital velocity: sqrt(GM/d) vx = velocityOffset[0] + relVelocity * Math.cos(ang), vy = velocityOffset[1] + relVelocity * Math.sin(ang); return [{ name: body.name, symbol: body.symbol || null, color: body.color || 'darkgrey', r: au(body.r || Math.cbrt(body.mass)), mass: body.mass, // mass in solar masses x: x, // radius, distance & velocity in AUs y: y, vx: vx, vy: vy, trail: [] // Store previous positions }, ...parseBodies(body.satellites || [], body.mass, [x,y], [vx,vy]) ] })); } }34:[{"id":"4222cb61a8b202c11bbaf025fe1055166da0507061447df1525c4fa662a69b815b404e7bc4c2b0fe3607fd4e2f0673256aeeb329d4f1ef0f2dd96eee1a63585b","href":"https://static.observableusercontent.com/files/4222cb61a8b202c11bbaf025fe1055166da0507061447df1525c4fa662a69b815b404e7bc4c2b0fe3607fd4e2f0673256aeeb329d4f1ef0f2dd96eee1a63585b","name":"solar-system.json","type":"application/json","lastModified":1675962011275.469,"size":1429}] 2f:{"title":"Force-simulated Solar System","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"viewof lockOnIdx = radio({\n title: 'Lock on',\n options: nodes.map((d, idx) => ({\n value: idx,\n label: html`${d.symbol?`${d.symbol} `:''}${d.name}`\n })),\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"

\n ${canvas}\n

\n ${Math.round(au.invert(100) / zoomLevel * 1000) / 1000} AU\n \n (scroll to zoom)\n

","pinned":false,"hidden":false,"mode":"html"},{"id":73,"value":"viewof bodyDistortion = slider({\n min: 1, \n max: 2000, \n step: 1,\n value: 1200,\n format: v => `${v}x`,\n title: 'Size distortion'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"canvas = DOM.canvas(width, height)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"forceSim = d3.forceSimulation()\n .alphaDecay(0)\n .velocityDecay(0)\n .force('gravity', d3.forceMagnetic()\n .id(d => d.id)\n .charge(node => node.mass)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"{\n forceSim\n .nodes(nodes)\n .force('gravity').strength(pxG);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"mutable zoomLevel = (canvas, 1) // reset zoom when canvas is resized","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"zoom = { \n let prevZoomLevel = 1;\n \n return zoomable()(canvas)\n .canvasEl(canvas)\n .scaleExtent([1, 1e6])\n .onChange(tr => { \n const newZoomLevel = mutable zoomLevel = tr.k;\n\n const changeRatio = prevZoomLevel/newZoomLevel;\n const sqrtChangeRatio = Math.sqrt(changeRatio);\n prevZoomLevel = newZoomLevel;\n \n // Slow down motion on zoom-in\n forceSim.stop();\n forceSim.force('gravity').strength(forceSim.force('gravity').strength()()*changeRatio);\n forceSim.nodes().forEach(d => {\n d.vx *= sqrtChangeRatio;\n d.vy *= sqrtChangeRatio;\n });\n forceSim.restart(); \n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"au = d3.scaleLinear() // Astronomical unit\n .domain([0, maxDistance * 2.1])\n .range([0, Math.min(width, height)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"pxG = G * Math.pow(au(1), 3) // in cube of AUs","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"**Data**","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"maxDistance = d3.max(solarSystem.map(d => d3.max(d.satellites.map(s => d.distance + s.distance))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"solarSystem = FileAttachment(\"solar-system.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"**Settings**","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"G = 1.5e-3 // Controls overall simulation speed","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"TRAIL_LENGTH = 250 // # simulation samples","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"TRAIL_MAX_ALPHA = 0.5 // trail opacity upper limit","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"TRAIL_THICKNESS = 0.08 // relative to body's diameter","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"d3 = require('d3@7', 'd3-force-magnetic')","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"zoomable = require('d3-zoomable')","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"import {slider, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}