2c:null 2d:["$","title",null,{"children":"Gravity Lines (May 2022) | Paul Murray | Observable"}] 32:[] 30:{"id":"9a1411f4fb75d969","slug":"gravity-lines-may-2022","title":"Gravity Lines (May 2022)","thumbnail":"a85624e6e6abd3d0a6a1209b92139e411eee7fae66e8f1b931d0b48acbe0bbd2","access_level":"public","create_time":"$D2022-05-17T00:56:36.941Z","update_time":"$D2022-05-17T12:15:31.995Z","view_time":null,"first_public_time":"$D2022-05-17T01:38:58.137Z","has_unpublished_edits":null,"fork":{"id":"9c1f674ebb309a3b","slug":"gravity-lines","title":"Gravity Lines","owner":{"id":"77ca23d94884ea46","login":"plmrry","name":"Paul Murray"}},"stars":6,"starred":false,"owner":{"type":"team","id":"77ca23d94884ea46","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":"starter_2024"},"version":564,"publish_version":564,"role":null,"authored":false,"authors":[{"type":"individual","id":"88a33f32468b0503","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":null}],"members":[{"type":"individual","id":"88a33f32468b0503","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"de1e16533aad154c","slug":"portfolio","title":"Portfolio","owner":{"id":"77ca23d94884ea46","login":"plmrry","name":"Paul Murray"}},"type":"notebook","body":{"titling":"auto","title":"Gravity Lines (May 2022)","cells":[{"id":0,"value":"md`# Gravity Lines (May 2022)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`A simulation of particles under the force of gravity.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"

\n ${Point({\n xPercent: planet.position.x,\n yPercent: planet.position.y,\n r: planet.radius\n })}\n ${endpoints}\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"viewof numTimeSteps = Scrubber(d3.range(0, maxTime), {\n loop: true,\n autoplay: false,\n initial: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof planetMass = Inputs.range([1, 200], {\n label: \"Planet's mass\",\n value: 100,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof radiansSpread = Inputs.range([0.1, 0.7], {\n label: \"Initial particle spread\",\n value: 0.5,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"viewof maxTime = Inputs.range([100, 500], {\n value: 200,\n step: 1,\n label: \"Total time\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"viewof numParticles = Inputs.range([2, 20], {\n value: 20,\n step: 2,\n label: \"Number of particles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"## Rendered","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"endpoints = particle_path_definitions\n .filter((d) => d.last)\n .filter((d) => in_bounds(d.last))\n .map(({ last }) => {\n const { position: { x, y } = {} } = last || {};\n return Point({\n xPercent: x,\n yPercent: y,\n r: radiusFromMass(particleMass)\n });\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"polylines = particle_path_definitions.map(({ points }) => {\n return htl.svg``;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"particle_path_definitions = particle_path_data.map((array) => {\n const last = array[array.length - 1];\n const points = array\n .filter((d) => in_bounds(d))\n .map(({ position: { x, y } }) => `${x.toPrecision(4)},${y.toPrecision(4)}`)\n .join(` `);\n return { points, last };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"function in_bounds(d) {\n return (\n d.position.x > 0 &&\n d.position.y > 0 &&\n d.position.x < 100 &&\n d.position.y < 100\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"particle_path_data = initialParticles.map((initial) => {\n const particle_path = [];\n for (const current_time of timeSteps) {\n const previous = particle_path.at(-1) ?? initial;\n const dt = current_time - (previous.time || 0);\n const acceleration = gravity(previous, planet);\n const velocityDelta = Matter.Vector.mult(acceleration, dt);\n const velocity = Matter.Vector.add(previous.velocity, velocityDelta);\n const positionDelta = Matter.Vector.mult(velocity, dt);\n const position = Matter.Vector.add(previous.position, positionDelta);\n const next = {\n ...previous,\n time: current_time,\n position,\n velocity\n };\n particle_path.push(next);\n }\n return particle_path;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"initialParticles = {\n const radiansSpread_ = Math.PI * radiansSpread;\n const radiansScale = d3.scaleLinear(\n [0, numParticles - 1],\n [-radiansSpread_, +radiansSpread_]\n );\n return d3\n .range(numParticles)\n .map(index => {\n const radians = radiansScale(index);\n const x = Math.cos(radians);\n const y = Math.sin(radians);\n return { x, y };\n })\n .map(velocity => ({\n velocity,\n position: start,\n mass: particleMass\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"## Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"particleMass = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"planet = ({\n radius: planetRadius,\n mass: planetMass,\n position: { x: 60, y: 50 },\n velocity: { x: 0, y: 0 }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"timeSteps = d3.range(numTimeSteps)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"start = ({ x: 20, y: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"planetRadius = radiusFromMass(planetMass)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"function radiusFromMass(mass) {\n const area = mass / density;\n return (area / Math.PI) ** 0.5;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"planetArea = planetMass / density","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"density = width > 700 ? width * 1e-5 : width * 1e-4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"## Gravity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"function gravity(body_a, body_b) {\n const delta = Matter.Vector.sub(body_b.position, body_a.position);\n const normalized = Matter.Vector.normalise(delta);\n const distance = Matter.Vector.magnitude(delta);\n const distance_squared = distance ** 2;\n const magnitude = (body_a.mass * body_b.mass) / distance_squared;\n const force = Matter.Vector.mult(normalized, magnitude);\n return force;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"## Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"function Point(props) {\n const {\n xPercent,\n yPercent,\n left = `${xPercent}%`,\n top = `${yPercent}%`,\n r = 5\n } = props;\n return SVG({\n children: htl.svg``,\n style: `left: ${left}; top: ${top};`\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"function SVG({ children = undefined, style }) {\n const style_ = `\n display: block;\n position: absolute;\n overflow: visible;\n ${style ?? ``}\n `;\n return htl.html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"Matter = (await import(\"https://cdn.skypack.dev/matter-js\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"