29:null 2a:["$","title",null,{"children":"Collision Forces Comparison | Vasco Asturiano | Observable"}] 2f:T9a9,{ const state = { bounce: { }, collide: { } }; [state.bounce, state.collide].forEach((state, idx) => { // Setup force system state.forceSim = d3.forceSimulation() .alphaDecay(0) .velocityDecay(0) .on('tick', () => { const newPos = state.forceSim.nodes().map((d, idx) => ({ color: BALL_COLORS[idx%BALL_COLORS.length], r: d.r || BALL_RADIUS, pos: [d.x, d.y] })); idx === 0 ? (mutable forceBounceBalls = newPos) : (mutable forceCollideBalls = newPos); }); }); state.bounce.forceSim.force('collision', d3.forceBounce().elasticity(forceBounceElasticity)); state.collide.forceSim.force('collision', d3.forceCollide().strength(forceCollideStrength)); // Set collision radius [state.bounce, state.collide].forEach(state => { state.forceSim.force('collision') .radius(n => n.r || BALL_RADIUS); }); // Periodical kickstart kickStart(); setInterval(kickStart, 15000); // function kickStart() { const numExamples = 7, h = [ 0.25, 0.5, 0.75].map(r => canvasWidth * r), v = [...new Array(numExamples)].map((_, n) => canvasHeight * (n+0.5)/numExamples); // Clear all trails resetTrails(forceBounceTrailCanvasCtx); resetTrails(forceCollideTrailCanvasCtx); [state.bounce, state.collide].forEach(state => { const sim = state.forceSim, balls = [ {x: h[0], y: v[0] , future: { vx: 3 }}, {x: h[1], y: v[0]}, {x: h[0], y: v[1] - 3 , future: { vx: 3 }}, {x: h[1], y: v[1]}, {x: h[0], y: v[2] , future: { vx: 3 }}, {x: h[2], y: v[2], future: { vx: -3 }}, {x: h[0], y: v[3] , future: { vx: 6 }}, {x: h[2], y: v[3], future: { vx: -2 }}, {x: h[0], y: v[4], r: BALL_RADIUS*4 , future: { vx: 3 }}, {x: h[2], y: v[4], future: { vx: -3 }}, {x: h[0], y: v[5] - BALL_RADIUS , future: { vx: 3 }}, {x: h[2], y: v[5], future: { vx: -3 }}, {x: h[0], y: v[6] , future: { vx: 100 }}, {x: h[1], y: v[6]} ]; // Initial state sim.nodes(balls); setTimeout(() => { // Apply future balls.filter(ball => ball.future).forEach(ball => { Object.keys(ball.future).forEach(attr => { ball[attr] = ball.future[attr]}); }); }, 800); }); } }30:[] 2d:{"id":"469d24c645562362","slug":"collision-forces-comparison","title":"Collision Forces Comparison","thumbnail":"628b83268656d45b3d4fbf4e139056b5986a04b77eaf46f932db80f7de6a74b7","access_level":"public","create_time":"$D2023-02-10T17:48:35.587Z","update_time":"$D2024-11-20T17:13:25.661Z","view_time":null,"first_public_time":"$D2023-02-10T17:48:35.587Z","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":235,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Collision Forces Comparison","cells":[{"id":0,"value":"# Collision Forces Comparison\n\nDifference in how collisions are handled by [d3.forceBounce](https://github.com/vasturiano/d3-force-bounce) and [d3.forceCollide](https://github.com/d3/d3-force#forceCollide).\n\nd3.forceCollide with full strength (1) is equivalent to d3.forceBounce with 0 elasticity (inelastic collision), which [loses kinetic energy](https://en.wikipedia.org/wiki/Momentum#Inelastic_collisions) at each impact.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"viewof forceBounceElasticity = Inputs.range([0, 1], {label: html`d3.forceBounce elasticity`, step: 0.1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof forceCollideStrength = Inputs.range([0, 1], {label: html`d3.forceCollide strength`, step: 0.1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"\n\n

\n d3.forceBounce\n ${forceBounceTrailCanvasCtx.canvas}\n ${drawCanvas(forceBounceBalls)}\n

\n d3.forceCollide\n ${forceCollideTrailCanvasCtx.canvas}\n ${drawCanvas(forceCollideBalls)}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"forceBounceTrailCanvasCtx = DOM.context2d(canvasWidth, canvasHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"forceCollideTrailCanvasCtx = DOM.context2d(canvasWidth, canvasHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"drawTrailDot = (ctx, d) => {\n ctx.fillStyle = d3.color(d.color).copy({ opacity: 0.2 }).toString();\n ctx.fillRect(...d.pos, 1.7, 1.7);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"resetTrails = ctx => ctx.clearRect(0, 0, canvasWidth, canvasHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"drawCanvas = balls => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"mutable forceBounceBalls = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"mutable forceCollideBalls = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"forceBounceBalls.forEach(d => drawTrailDot(forceBounceTrailCanvasCtx, d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"forceCollideBalls.forEach(d => drawTrailDot(forceCollideTrailCanvasCtx, d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"**Settings**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"canvasWidth = width/2 - 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"canvasHeight = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"BALL_RADIUS = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"BALL_COLORS = ['green', 'blue']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"d3 = require('d3-force', 'd3-force-bounce', 'd3-color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"