28:null 29:["$","title",null,{"children":"Double Pendulum | Vasco Asturiano | Observable"}] 2e:[] 2c:{"id":"a059c7fec5c588fd","slug":"double-pendulum","title":"Double Pendulum","thumbnail":"defa7347cc5f043b495057da3c1b10847533d77e147f6d1192e55cd67656e57c","access_level":"public","create_time":"$D2025-04-14T22:25:34.161Z","update_time":"$D2025-09-04T13:57:29.975Z","view_time":null,"first_public_time":"$D2025-04-14T23:35:33.369Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dc625de0fe5f3eae","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":"starter_2024"},"version":117,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"404426135bc21c47","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":null}],"members":[{"type":"individual","id":"404426135bc21c47","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":null,"role":"editor"},{"type":"team","id":"dc625de0fe5f3eae","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Double Pendulum","cells":[{"id":0,"value":"# Double Pendulum\n\nTwo spheres chained by elastics and attached to a fixed point. The starting angles are randomized.\n\nThis is a simulation of a double pendulum using the [d3-force](https://github.com/d3/d3-force) force-directed engine with the following forces active:\n* [forceElastic](https://github.com/vasturiano/d3-force-elastic) for the elastic wires\n* [forceConstant](https://github.com/vasturiano/d3-force-constant) for gravity\n* [forceBounce](https://github.com/vasturiano/d3-force-bounce) for the collision between spheres\n\nThis model is interactive, feel free to drag the spheres around!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"svg = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"launchAngles = [...new Array(2)].map(() => Math.PI * (Math.random() / 2 + 1/4))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"balls = {\n let prevPos = { x: width/2, y: height * 0.1 }; // anchor\n return launchAngles.map((ang, idx) => {\n prevPos = {\n x: prevPos.x - WIRE_LENGTH * Math.sin(ang),\n y: prevPos.y + WIRE_LENGTH * Math.cos(ang)\n };\n return { id: `b${idx}`, ...prevPos };\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"anchors = [{\n\t\tid: 'anchor',\n\t\tfx: width / 2,\n\t\tfy: height * 0.1\n\t}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"wires = [\n { source: 'anchor', target: 'b0'},\n { source: 'b0', target: 'b1'}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"forceSim = d3.forceSimulation()\n\t.alphaDecay(0)\n\t.velocityDecay(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"forceSim.nodes([...balls, ...anchors])\n\t.force('gravity', d3.forceConstant()\n\t\t.strength(GRAVITY)\n\t\t.direction(90)\n\t)\n .force('wires', d3.forceElastic(wires)\n \t.id(node => node.id)\n \t.distance(WIRE_LENGTH)\n \t.elasticity(WIRE_ELASTICITY)\n )\n\t.force('bounce', d3.forceBounce()\n\t\t.radius(node => BALL_RADIUS)\n\t)\n .on('tick', () => { ballDigest(); wireDigest(); })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function ballDigest() {\n const ball = d3.select(svg).select('.balls').selectAll('circle').data(balls);\n\n\tball.exit().remove();\n\tball.merge(\n\t\tball.enter().append('circle')\n\t\t\t.attr('r', BALL_RADIUS)\n\t\t\t.call(d3.drag()\n\t\t\t\t.on('start', (ev, d) => { d.fx = d.x; d.fy = d.y; })\n\t\t\t\t.on('drag', (ev, d) => { d.fx = ev.x; d.fy = ev.y; })\n\t\t\t\t.on('end', (ev, d) => { d.fx = null; d.fy = null; })\n\t\t\t)\n\t)\n\t\t.attr('cx', d => d.x)\n\t\t.attr('cy', d => d.y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function wireDigest() {\n\tconst wire = d3.select(svg).select('.wires').selectAll('line').data(wires);\n\twire.exit().remove();\n\twire.merge(wire.enter().append('line'))\n\t\t.attr('x1', d => d.source.x)\n\t\t.attr('y1', d => d.source.y)\n\t\t.attr('x2', d => d.target.x)\n\t\t.attr('y2', d => d.target.y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"**Constants**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"BALL_RADIUS = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"WIRE_LENGTH = 160","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"WIRE_ELASTICITY = 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"GRAVITY = 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"**Style**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require('d3', 'd3-force-elastic', 'd3-force-bounce', 'd3-force-constant')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"