Skip to main content
100%

Collision Detection

✓ Published0🌍 Public
FFrissAnalytics
Last edited Nov 23, 2016
Created on Nov 22, 2016

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.

AI-generated description

This example uses d3.forceCollide to prevent circles from overlapping.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/31ce330646fa8bcb7289ff3b97aab3f5'>Collision Detection</a>

gpl-3.0 Licensed

Similar vizzes