31: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); }); } }32:[] 2f:{"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"},{"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"},{"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"},{"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"},{"id":153,"value":"forceBounceTrailCanvasCtx = DOM.context2d(canvasWidth, canvasHeight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"forceCollideTrailCanvasCtx = DOM.context2d(canvasWidth, canvasHeight)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":199,"value":"resetTrails = ctx => ctx.clearRect(0, 0, canvasWidth, canvasHeight)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"drawCanvas = balls => html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"mutable forceBounceBalls = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"mutable forceCollideBalls = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"forceBounceBalls.forEach(d => drawTrailDot(forceBounceTrailCanvasCtx, d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"forceCollideBalls.forEach(d => drawTrailDot(forceCollideTrailCanvasCtx, d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"**Settings**","pinned":false,"hidden":false,"mode":"md"},{"id":157,"value":"canvasWidth = width/2 - 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"canvasHeight = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"BALL_RADIUS = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"BALL_COLORS = ['green', 'blue']","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"d3 = require('d3-force', 'd3-force-bounce', 'd3-color')","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}