30:[] 2e:{"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"},{"id":54,"value":"svg = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"launchAngles = [...new Array(2)].map(() => Math.PI * (Math.random() / 2 + 1/4))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":50,"value":"wires = [\n { source: 'anchor', target: 'b0'},\n { source: 'b0', target: 'b1'}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"forceSim = d3.forceSimulation()\n\t.alphaDecay(0)\n\t.velocityDecay(0)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":29,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"**Constants**","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"BALL_RADIUS = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"WIRE_LENGTH = 160","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"WIRE_ELASTICITY = 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"GRAVITY = 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"**Style**","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":8,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"d3 = require('d3', 'd3-force-elastic', 'd3-force-bounce', 'd3-force-constant')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}