Collision Detection (Canvas)

100%

Collision Detection (Canvas)

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Aug 1, 2012

This example demonstrates a force-directed layout with collision detection among 200 nodes. A fixed root node acts as a repulsive force, while the user can move it by mousing over the canvas, causing nearby nodes to repel away. The visualization uses the d3.layout.force simulation library, with a d3.geom.quadtree for efficient spatial collision checks. Rendering is done on an HTML5 Canvas via the getContext("2d") API, drawing all nodes as steelblue circles on each tick. The code is adapted from a talk on force layouts, showing real-time interaction and physics-based movement.

AI-generated description

A fork of the SVG version. Mouseover to repel nodes. Adapted from my talk on force layouts.

gpl-3.0 Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Collision Detection

A force-directed layout places 200 circles on an SVG canvas, with a fixed invisible root node at the center of a charge-based repulsion field. Mouse movement repositions this root, causing the surrounding circles to scatter and collide. Using the d3.layout.force simulation, a quadtree indexes nodes for efficient pairwise collision resolution, adjusting circle positions on each tick. The circles, whose radii vary randomly, are colored via d3.scale.category10 and loaded from an external CSV file, while the root’s position tracks the cursor to repel the swarm.

JJdlv00

86% match

Loading thumbnail…

Collision Detection

This example demonstrates collision detection among 200 circles, where moving the mouse repels the nodes in real time. The visualization loads task data from a CSV file, though the circles themselves are generated with random radii using `d3.range`. It uses D3 v3’s `d3.layout.force` for physics simulation, a quadtree (`d3.geom.quadtree`) to efficiently detect overlaps, and SVG circles for rendering. The mouse position controls a root node, which pushes other circles away as the force layout updates on each tick.

JJdlv00

83% 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

82% 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

82% match

Loading thumbnail…

D3 Force Simulation

A force-directed network of 100 nodes and 300 randomly generated links settles into a stable layout under a centering force, many-body repulsion, link distance constraints, and collision avoidance. The visualization uses D3 v4's `d3.forceSimulation` with `d3.forceCenter`, `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCollide` to animate the physics, while nodes are draggable via D3's drag interaction. The simulation updates an SVG canvas on each tick, redrawing lines and circles as positions change. The random data is generated programmatically, creating an abstract, interactive demonstration of force-based layout.

CCarlosACalvo

80% match

Loading thumbnail…

Multi-Foci Force Layout

Five fixed nodes serve as force foci that attract and repel moving nodes in a 2D space. As the mouse moves, the user spawns new nodes with random radii and colors; these nodes are pulled toward a focus matching their type while colliding with each other via a quadtree. The simulation runs on D3 v3’s force layout with custom attraction and collision logic, rendering everything as SVG circles with animated transitions that remove nodes after three seconds. The `d3.layout.force` API drives the physics, and `d3.geom.quadtree` accelerates collision detection.

Mmbostock

79% match

Loading thumbnail…

Interactive mouse

This example shows a force-directed layout of 200 colored circles, where one invisible fixed root node is dragged by the mouse, causing the surrounding circles to collide and repulse around it. As the mouse moves, the root node's position updates, and the simulation resumes, with a quadtree-based collision detection preventing overlaps between the circles. The visualization uses the D3 v3 force layout, `d3.geom.quadtree` for collision handling, and SVG circles, with colors assigned via `d3.scale.category10`.

Mmkt-ds

79% match