30:T4bc,function add_bodies( engine, { satellites = [], planets = [], plans_all = [], aspect } = {} ) { const { world } = engine; const world_height = world_width / aspect; planets.forEach(([label, planet_x, planet_y, mass, radius = 5]) => { const planet = Matter.Bodies.circle( planet_x * world_width, planet_y * world_height, radius, { label: `planet`, mass, frictionAir: 0, isStatic: true, plugin: { gravity: true }, render: { style: `opacity: 0.3` }, collisionFilter: { mask: 0b0 } } ); Matter.Composite.add(world, planet); }); satellites.forEach(([label, satellite_x, satellite_y, mass]) => { const satellite = Matter.Bodies.circle( satellite_x * world_width, satellite_y * world_height, world_width * 0.01, { label, mass, friction: 0, frictionAir: 0, restitution: 0, plugin: { showInfo: true, beforeUpdate: () => { apply_plan(satellite, engine, plans_all); apply_gravity(satellite, engine); } } } ); Matter.Composite.add(world, satellite); }); }31:T66e,function apply_plan(body, engine, plans_all = []) { const { world, timing: { timestamp } } = engine; const next_timestamp = timestamp + ms_per_frame; // Find all plans between timestamp and timestamp+lastDelta const plans = plans_all .map(([timestamp, label, magnitude, angle]) => ({ timestamp, label, magnitude, angle })) .filter((d) => d.timestamp >= timestamp && d.timestamp <= next_timestamp); for (const plan_ of plans) { const { angle, magnitude } = plan_; const force = vector_from_angle(angle, magnitude); const flame_mass = body.mass * 0.5; const flame = Matter.Bodies.circle( body.position.x, body.position.y, body.circleRadius * 5, { label: `flame-${Math.floor(Math.random())}`, plugin: { order: -1, beforeUpdate: () => { const flame_shrink_percent = 0.98; Matter.Body.scale( flame, flame_shrink_percent, flame_shrink_percent ); const newArea = flame.area; if (newArea < 0.1) { Matter.Composite.remove(world, flame); } } }, render: { style: `fill: orange; stroke: none;` }, collisionFilter: { mask: 0b0 }, mass: flame_mass, friction: 0, frictionAir: 0, restitution: 0 } ); Matter.Body.applyForce(body, body.position, force); Matter.Body.applyForce(flame, flame.position, Matter.Vector.neg(force)); Matter.Composite.add(world, flame); } body.plugin.plans = plans; }32:[] 2e:{"title":"Universe","cells":[{"id":0,"value":"# Universe","pinned":false,"hidden":false,"mode":"md"},{"id":962,"value":"A universe simulation component","pinned":false,"hidden":false,"mode":"md"},{"id":617,"value":"Universe({\n satellites: [[`satellite`, 0.2, 0.5, 10e3]],\n plans: [[0, `satellite`, 10, 0]],\n aspect: 6,\n total_time_seconds: 4\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":896,"value":"# Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"default_fill = `white`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"default_stroke = `none`","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"world_width = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"text_size = 0.03","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"fps = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"ms_per_frame = 1e3 / fps","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"function Universe({\n satellites,\n plans: plans_all,\n aspect,\n total_time_seconds\n}) {\n const engine = Matter.Engine.create({\n gravity: { x: 0, y: 0 },\n positionIterations: 10,\n velocityIterations: 10\n });\n Matter.Events.on(engine.world, \"afterAdd\", () => {\n engine.world.bodies = d3.sort(engine.world.bodies, (d) => d?.plugin?.order);\n });\n add_bodies(engine, { plans_all, satellites, aspect });\n const frames = get_frames({ engine, total_time_seconds });\n const scrubber = Scrubber(frames, {\n autoplay: false,\n format: (d) => d3.format(`,`)(Math.round(d?.timestamp))\n });\n const container = html`

`;\n const div = html`${scrubber}${container}`;\n let current_frame = scrubber.value;\n const update = () => {\n container.innerHTML = ``;\n container.appendChild(render({ frames, current_frame, width, aspect }));\n };\n scrubber.oninput = () => {\n current_frame = scrubber.value;\n update();\n };\n update();\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":894,"value":"## Rendering","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"function render({ frames, current_frame, aspect }) {\n const flight_path = d3\n .line()\n .x((d) => d?.position?.x?.toFixed(2) ?? 0)\n .y((d) => d?.position?.y?.toFixed(2) ?? 0)\n .defined((d) => in_bounds(d))(\n frames.map((d) => d.bodies.find((d) => d.label === `satellite`))\n );\n\n const svg_style = {\n display: `block`,\n width: `${width}px`,\n aspectRatio: `${aspect} / 1`,\n backgroundColor: `black`,\n fontFamily: `monospace`\n };\n\n const flight_path_style = {\n fill: `none`,\n stroke: `white`,\n vectorEffect: `non-scaling-stroke`,\n strokeDasharray: `10 10`\n };\n\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"function get_rendered_bodies(current_frame) {\n const rendered = [];\n const render = (body) => {\n if (!body) return;\n const { position, label, render, circleRadius } = body;\n if (!in_bounds(body)) return;\n const style = `\n fill: ${default_fill};\n stroke: ${default_stroke};\n ${render?.style ?? ``};\n `;\n const circle = htl.svg`\n \n `;\n rendered.push(circle);\n };\n current_frame.bodies.forEach(render);\n return rendered;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"function get_rendered_info(current_frame, { font_size = 1.5 } = {}) {\n const size = font_size;\n\n return current_frame.bodies\n .filter((d) => d.plugin?.showInfo)\n .map((body) => {\n const { speed, position, velocity, force } = body;\n const fmt = d3.format(`.3f`);\n const texts = [\n `SPEED: ${fmt(speed)}`,\n `VX: ${fmt(velocity.x)}`,\n `VY: ${fmt(velocity.y)}`,\n `X: ${fmt(position.x)}`\n ].map((text, index) => {\n return htl.svg`\n ${text}\n `;\n });\n return htl.svg`${texts}`;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"function in_bounds(body) {\n return (\n body?.position?.x > 0 &&\n body?.position?.y > 0 &&\n body?.position?.x < 100 &&\n body?.position?.y < 100\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":892,"value":"## Frames","pinned":false,"hidden":false,"mode":"md"},{"id":625,"value":"function get_frames({ engine, total_time_seconds = 60 }) {\n const num_frames = Math.ceil((total_time_seconds * 1000) / ms_per_frame);\n const { world } = engine;\n const before_update = () => {\n Matter.Composite.allBodies(world).forEach((body) => {\n body.plugin?.beforeUpdate?.(engine);\n });\n };\n const out = [];\n for (const frame_index of d3.range(num_frames)) {\n const bodies = Matter.Composite.allBodies(world).map((body) => {\n return {\n ...body,\n // Vectors must be cloned!\n position: { ...body.position },\n velocity: { ...body.velocity },\n force: { ...body.force }\n };\n });\n const frame = {\n bodies,\n timestamp: engine.timing.timestamp,\n index: frame_index\n };\n out.push(frame);\n before_update();\n Matter.Engine.update(engine, ms_per_frame, 1);\n }\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":890,"value":"## Plan","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":840,"value":"## Gravity","pinned":false,"hidden":false,"mode":"md"},{"id":365,"value":"function apply_gravity(satellite, engine) {\n const { world } = engine;\n Matter.Composite.allBodies(world)\n .filter((d) => d !== satellite)\n .filter((d) => d.plugin.gravity)\n .forEach((planet) => {\n gravity_force(planet, satellite);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"gravitational_constant = 1e-9","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"function gravity_force(planet, satellite) {\n const { mass: planet_mass } = planet;\n const { mass: satellite_mass } = satellite;\n const distance_vector = Matter.Vector.sub(\n planet.position,\n satellite.position\n );\n let distance = Matter.Vector.magnitude(distance_vector);\n const min_distance = 1;\n if (distance < min_distance) distance = min_distance;\n const G = gravitational_constant;\n const magnitude = G * planet_mass * distance ** -2;\n // Apply the force using the distance vector\n const normalized = Matter.Vector.normalise(distance_vector);\n const force = Matter.Vector.mult(normalized, magnitude);\n Matter.Body.applyForce(satellite, satellite.position, force);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"function vector_from_angle(angle, magnitude) {\n const radians = angle * Math.PI * 180 ** -1;\n const vector = Matter.Vector.create(magnitude, 0);\n return Matter.Vector.rotate(vector, radians);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":674,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"Matter = require(\"matter-js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}