28:null 29:["$","title",null,{"children":"Newton's Cradle | Vasco Asturiano | Observable"}] 2e:[] 2c:{"id":"8237e040366855ca","slug":"newtons-cradle","title":"Newton's Cradle","thumbnail":"59cb1fc5d9525bec5fd0fec68d6ca8cf681802563cc4fae623401bbebd1e3a86","access_level":"public","create_time":"$D2021-05-02T23:47:22.556Z","update_time":"$D2025-09-04T13:58:23.269Z","view_time":null,"first_public_time":"$D2021-05-03T01:49:41.328Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dc625de0fe5f3eae","login":"vasturiano","name":"Vasco Asturiano","avatar_url":"https://avatars-next.observableusercontent.com/a45856b753139d5de533417b120862fd466b9396ab5c379d25d7240dc5ee1985","tier":"starter_2024"},"version":176,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"svg = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"wires = balls.map(ball => ({\n source: ball.id,\n target: `a${ball.id}`\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"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":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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"canvasWidth = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"canvasHeight = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`**Constants**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"BALL_RADIUS = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"WIRE_LENGTH = canvasHeight / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"GRAVITY = 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`**Style**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`**Dependencies**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require('d3', '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"