31:[] 2f:{"title":"Gravity Lines (May 2022)","cells":[{"id":0,"value":"md`# Gravity Lines (May 2022)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"md`A simulation of particles under the force of gravity.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":508,"value":"## Rendered","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":477,"value":"polylines = particle_path_definitions.map(({ points }) => {\n return htl.svg``;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":513,"value":"## Setup","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"particleMass = 1","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":67,"value":"timeSteps = d3.range(numTimeSteps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"start = ({ x: 20, y: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"planetRadius = radiusFromMass(planetMass)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":52,"value":"planetArea = planetMass / density","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"density = width > 700 ? width * 1e-5 : width * 1e-4","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"## Gravity","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":442,"value":"## Components","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":560,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"Matter = (await import(\"https://cdn.skypack.dev/matter-js\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}