Collision Forces Comparison

Difference in how collisions are handled by d3.forceBounce and d3.forceCollide.

d3.forceCollide with full strength (1) is equivalent to d3.forceBounce with 0 elasticity (inelastic collision), which loses kinetic energy at each impact.

<body>
    <div class="canvas-wrapper">
        <a class="canvas-title" href="https://github.com/vasturiano/d3-force-bounce">d3.forceBounce</a>
        <div class="controls">
            Elasticity:
            <input class="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="onControlChange(this.value, 'bounce', 'elasticity')">
            <span class="val">1</span>
        </div>
        <svg id="canvasBounce">
            <g class="trails"></g>
        </svg>
    </div>
    <div class="canvas-wrapper">
        <a class="canvas-title" href="https://github.com/d3/d3-force#forceCollide">d3.forceCollide</a>
        <div class="controls">
            Strength:
            <input class="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="onControlChange(this.value, 'collide', 'strength')">
            <span class="val">1</span>
        </div>
        <svg id="canvasCollide">
            <g class="trails"></g>
        </svg>
    </div>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js

https://unpkg.com/d3-force-bounce