Skip to main content
SimilarExport ZIP
100%

Elastic collisions

✓ Published0🌍 Public
AAjayyy
Last edited Mar 19, 2019
Created on Mar 19, 2019

Four colored circles bounce off each other and the walls of a square canvas in elastic collisions, like billiard balls. The balls are draggable with the mouse, imparting velocity on release. The example adapts `d3.forceCollide` to compute two-dimensional elastic collision responses using physics formulas, with an SVG rendering. Forces are managed via `d3.forceSimulation` and a custom `boundedBox` force for wall bounces.

AI-generated description

Adapting d3.forceCollide to do elastic collisions (like billiards). You can click and drag the balls.

High school physics refresher from Wikipedia. Inspired by chatting with Robert Monfera and Chris Given's riffing on d3.forceCollide.

To-do:

  • Make it a proper es6 module
  • Log net momentum and kinetic energy for debugging
  • Balls can tunnel through each other or spawn atop each other, which somehow leads to non-conservation of momentum
  • In any case, momentum won't be conserved here because of the wall-bounces & dragging. A momentum-conserving finite-area alternative to walls would be to make the window a torus, I think, right?
  • Generalize to other shapes?
  • Relativistic! Lol.
  • Actual billiards game; then add gravitational forces and other twists...

forked from <a href='http://bl.ocks.org/tophtucker/'>tophtucker</a>'s block: <a href='http://bl.ocks.org/tophtucker/16fbd7e7c6274ed329111cbe139a6bb6'>Elastic collisions</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Collision Detection in a tight square

A thousand colored circles of varying radii bounce and slide within a square boundary, colliding and repelling to avoid overlap. The simulation uses d3.forceSimulation with a custom force function that pushes nodes away from the square’s edges, while d3.forceCollide handles circle-to-circle collisions. The Canvas API renders each circle with a distinct fill from the d3.schemeCategory10 palette, and the white strokes emphasize boundaries during the continuous tick updates.

PPhilippe Rivière
78% match
Loading thumbnail…

Collision test with D3 4.0

Five particles in a D3.js 4.0 force-directed simulation demonstrate the inelastic nature of the built-in `collide` force. Two distinct sizes—four large dust particles and one small gas molecule—move and bounce within a bounded Canvas, colliding with each other and a vertical wall. The simulation runs via `d3.forceSimulation` with a `d3.forceCollide` radius function. Unlike elastic collisions, momentum is conserved but kinetic energy is not, as visible in the particle velocities after impacts. The particles are rendered as red, outlined circles on a transparent Canvas.

FFrissAnalytics
78% match
Loading thumbnail…

Circles bouncing inside a rectangle

This example shows twenty colored circles bouncing and colliding within a rectangular boundary, with each circle moving at a constant speed and bouncing off the walls. The visualization adapts D3.js’s force layout to animate the circles, using custom gravity and collision functions to handle wall reflections and circle-to-circle collisions. The code relies on `d3.layout.force` for the simulation loop, `d3.geom.quadtree` for efficient collision detection, and SVG elements for rendering. Circle positions and velocities are manually updated in the tick function, while a static rectangle outlines the containment area, and the data consists of randomly generated circles with varied radii and colors.

663anp3ca
77% match
Loading thumbnail…

Collision Detection

Interactive collision detection shows 200 colored circles moving inside a rectangular SVG viewport. Moving the mouse repels the circles, pushing them apart and causing them to collide and bounce off one another. The visualization uses D3 v3’s force layout and quadtree-based collision handling via `d3.layout.force` and `d3.geom.quadtree`, with mouse movement updating a fixed root node to drive repulsion. Rendering is done with SVG circle elements, and the force simulation updates their positions on each tick.

Mmbostock
77% match
Loading thumbnail…

Bouncing Balls

Bouncing Balls demonstrates a physics simulation of colorful particles colliding and bouncing within a canvas. Clicking adds new balls to the scene. The visualization uses D3’s `forceSimulation` with `forceCollide`, `forceX`, and `forceY` to handle particle interactions, while a custom `timer` loop applies gravity and wall collision logic. Rendering is done via the Canvas 2D API, with trails, velocity lines, and arrowheads colored by speed using HSL values.

CCurran Kelleher
76% match
Loading thumbnail…

Collision Detection

This example demonstrates a collision-detection simulation using D3.js v4, displaying 1000 circles of varying sizes that repel each other while being pulled toward the center of a 960×960 canvas. The visualization uses `d3.forceSimulation` combined with `d3.forceCollide`, `d3.forceX`, and `d3.forceY` to compute particle positions, while rendering occurs via Canvas 2D API calls like `clearRect` and `context.arc`. The force-collision algorithm prevents overlaps by iterating collision checks twice per tick, and randomized radii from 4 to 18 pixels create the visual variety. All drawing is handled directly on the Canvas element rather than through SVG, producing a smooth real-time animation.

FFrissAnalytics
76% match
Loading thumbnail…

Force Dragging II

This example demonstrates draggable circles with collision detection, rendered on a Canvas using D3 v4. The simulation is driven by `d3.forceSimulation` with `d3.forceCollide`, updating 324 circles on each tick to redraw them via the canvas 2D context. Users can drag any circle, which sets fixed positions (`fx`, `fy`) during the interaction, while the physics engine resolves overlaps. The code uses `d3.drag` for pointer handling and relies on `simulation.find` to identify the circle under the cursor.

AAjayyy
76% match
Loading thumbnail…

Collision Detection

A thousand circles of random radii are arranged into a tidy cluster, with d3.forceCollide preventing any overlap between them while d3.forceX and d3.forceY gently pull the whole group toward the center. The simulation runs on a fixed 960×960 canvas, where each tick clears the drawing and renders all circles as filled and stroked arcs. The code uses d3.forceSimulation with a velocity decay of 0.2, and draws the result directly via the Canvas 2D API.

Mmbostock
75% match