Collision test with D3 4.0

100%

Collision test with D3 4.0

✓ Published0🌍 Public

Last edited Sep 30, 2018

Created on Dec 8, 2016

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.

AI-generated description

Following up on a chat with Toph Tucker, this example shows that the collide force of d3.forceSimulation takes into account the particle "masses" (proxy: square radii of the colliding particles). It conserves momentum but the collision isn't elastic. It appears to be a perfectly inelastic collision.

Toph implemented elastic collisions with his force and the D3 force.

It doesn't matter much for the visual output of the Brownian motion example from which it's extracted, but for a pool / snooker simulator, just roll your own forces, similar to how the Brownian example makes particles bounce back from walls.

The main benefit of the built-in collide force is that it uses the quadtree for efficiency, but a cue game simulator would need to handle few "particles" only.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/monfera/'>monfera</a>'s block: <a href='http://bl.ocks.org/monfera/9c5efcfa26e202f5653c692a6d3ba7fa'>Brownian motion with D3 4.0 velocity Verlet physics</a>

forked from <a href='http://bl.ocks.org/monfera/'>monfera</a>'s block: <a href='http://bl.ocks.org/monfera/ffa2a4fdacbb7c7b1c1ad34337fb8086'>Collision test with D3 4.0</a>

gpl-3.0 Licensed

Similar vizzes

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

83% match

Loading thumbnail…

Particle collision

A swarm of 1,500 glowing particles falls and collides within shifting circular walls and a planet-like boundary, leaving colorful motion trails on a black canvas. The simulation uses `d3.forceSimulation` with custom collision, gravity, and wall-locking forces, rendered via Canvas 2D. Two particle groups cycle through D3 color interpolators (e.g., `d3.interpolateViridis`, `d3.interpolateMagma`), and randomized settings for radius, gravity, and palette timing make each reload unique.

FFrissAnalytics

82% match

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

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

76% match

Loading thumbnail…

Test 2

This visualization shows a physics-based particle simulation where colored nodes move and collide within a bounded rectangular space. The code uses d3.forceSimulation with collision and forceX/forceY forces to drive the motion, rendering the particles on an HTML5 canvas via Canvas 2D context paths. Each node is assigned a random color and velocity, and the simulation updates continuously using requestAnimationFrame, drawing circles with varying radii as the forces stabilize the layout.

LLeonardonline

75% match

Loading thumbnail…

Collision Detection

This example demonstrates a collision detection simulation where 200 nodes bounce off one another while a fixed root node is repelled by the mouse. The visualization uses D3 v3 with an SVG canvas, rendering circles with a color scale. The simulation relies on `d3.layout.force` for the force-directed layout, `d3.geom.quadtree` for spatial indexing, and the `force.on("tick")` event to update node positions. The mouse interaction uses `svg.on("mousemove")` to reposition the root node and resume the simulation.

JJdlv00

73% match

Loading thumbnail…

Not an Ideal Gas

A simulation of 800 particles in a box with a central gap shows how the mean squared velocity evolves over time, plotted as a line chart below. The gap’s aperture shrinks as the simulation cools, and clicking the canvas restarts the process. The code uses `d3.forceSimulation` with a custom `forceCollide` and `velocityDecay`, plus custom bounce and barrier forces. Rendering combines Canvas for the particles and a d3 `area` path on SVG for the speed trace.

PPhilippe Rivière

72% match

Loading thumbnail…

Testing interactive svg + canvas plot

Circles colored in five shades bounce across a 1050×1500 canvas, colliding and repelling while remaining within invisible boundaries. The visualization mixes two rendering systems: hundreds of smaller background molecules draw to a Canvas element, while twenty larger, interactive particles render as SVG circles. Both sets move through a shared quadtree-based collision detection routine in `map.updatePositions`, which adjusts positions and enforces edge bounds. A `d3.timer` loop continuously updates particle coordinates and redraws both the Canvas buffer and the SVG group, whose circles use `transform` attributes for translation.

KKristinHenry

72% match