28:null 29:["$","title",null,{"children":"Pendulum | Vasco Asturiano | Observable"}] 2e:[] 2c:{"id":"b465edd02c1e3009","slug":"pendulum","title":"Pendulum","thumbnail":"3669df55bef47e2ec4fff2a2ee7b1988a9332f01377570462716d9cda1698ee1","access_level":"public","create_time":"$D2025-06-04T14:27:53.218Z","update_time":"$D2025-09-04T13:56:56.197Z","view_time":null,"first_public_time":"$D2025-06-04T15:16:20.394Z","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":107,"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":"Pendulum","cells":[{"id":0,"value":"# Pendulum\n\nThis is a simulation of a 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 wire\n* [forceConstant](https://github.com/vasturiano/d3-force-constant) for gravity\n\nThis model is interactive, feel free to drag the sphere around!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"svg = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"launchAngle = Math.PI / 2.9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"ball = ({\n id: 'ball',\n x: width/2 - WIRE_LENGTH * Math.sin(launchAngle),\n y: height * 0.1 + WIRE_LENGTH * Math.cos(launchAngle)\n}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"anchor = ({\n id: 'anchor',\n fx: width / 2,\n fy: height * 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"wire = ({ source: 'anchor', target: 'ball'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"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":24,"value":"forceSim.nodes([ball, anchor])\n\t.force('gravity', d3.forceConstant()\n\t\t.strength(GRAVITY)\n\t\t.direction(90)\n\t)\n .force('wires', d3.forceElastic([wire])\n \t.id(node => node.id)\n \t.distance(WIRE_LENGTH)\n \t.elasticity(WIRE_ELASTICITY)\n .compressionFactor(0.5)\n )\n .on('tick', () => { ballDigest(); wireDigest(); })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function ballDigest() {\n const ballC = d3.select(svg).select('.ball').selectAll('circle').data([ball]);\n\n\tballC.exit().remove();\n\tballC.merge(\n\t\tballC.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 wireL = d3.select(svg).select('.wire').selectAll('line').data([wire]);\n\twireL.exit().remove();\n\twireL.merge(wireL.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":34,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"**Constants**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"BALL_RADIUS = 18","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"WIRE_LENGTH = height * 0.7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"WIRE_ELASTICITY = 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"GRAVITY = 0.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"**Style**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"d3 = require('d3', 'd3-force-elastic', '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"