30:[] 2e:{"title":"Newton's Cradle","cells":[{"id":0,"value":"md`# Newton's Cradle\n\nA simulation of a [Newton's Cradle](https://github.com/vasturiano/d3-force-constant) device using the [d3-force](https://github.com/d3/d3-force) force-directed engine with the following forces active:\n* [forceBounce](https://github.com/vasturiano/d3-force-bounce) for the collision between spheres\n* [forceLink](https://github.com/d3/d3-force#forceLink) for the suspending wires\n* [forceConstant](https://github.com/vasturiano/d3-force-constant) for gravity\n\nThis model is interactive, feel free to drag the spheres around!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"svg = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"{setTimeout(() => {\n // swing it\n\tballs[0].x -= WIRE_LENGTH;\n\tballs[0].y -= WIRE_LENGTH;\n});}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"balls = [-4, -2, 0, 2, 4].map((offset, id) => ({\n id,\n x: canvasWidth/2 + offset * BALL_RADIUS,\n y: canvasHeight * 2/3\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"anchors = balls.map(ball => ({\n\t\tid: `a${ball.id}`,\n\t\tfx: ball.x,\n\t\tfy: ball.y - WIRE_LENGTH\n\t}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"wires = balls.map(ball => ({\n source: ball.id,\n target: `a${ball.id}`\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"forceSim = d3.forceSimulation()\n\t.alphaDecay(0)\n\t.velocityDecay(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"forceSim.nodes([...balls, ...anchors])\n\t.force('gravity', d3.forceConstant()\n\t\t.strength(GRAVITY)\n\t\t.direction(90)\n\t)\n\t.force('wires', d3.forceLink(wires)\n\t\t.id(node => node.id)\n\t\t.distance(WIRE_LENGTH)\n\t\t.strength(0.4)\n\t)\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":64,"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":67,"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":33,"value":"canvasWidth = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"canvasHeight = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`**Constants**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"BALL_RADIUS = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"WIRE_LENGTH = canvasHeight / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"GRAVITY = 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`**Style**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`**Dependencies**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3', 'd3-force-bounce', 'd3-force-constant')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}