Skip to main content
100%

Newton's balls

✓ Published0🌍 Public
ZZJONSSON
Last edited Nov 6, 2014
Created on Jan 30, 2012

The visualization shows hundreds of randomly sized and positioned circles bouncing off one another in elastic collisions, constrained by the window boundaries. Using D3's force layout, each circle behaves as a particle with mass proportional to its radius, and collisions are resolved through Newtonian physics implemented in a custom `d3.z.collide` module. The code leverages d3.v3, SVG rendering, and quadtree-based collision detection to animate the motion.

AI-generated description

Similar vizzes

Loading thumbnail…

Newton's cradle

Newton's Cradle demonstrates a seven-strand pendulum simulation using D3.js v3’s force layout (`d3.layout.force`) with custom collision handling via the `d3.z.collide` plugin. Each strand contains five linked nodes, with the top node fixed and the bottom ball given mass and radius for elastic collisions. The `d3.geom.quadtree` accelerates collision checks, while `d3.svg.line` with cardinal interpolation renders the wires. The animation runs continuously, with the force layout’s `tick` event triggering redraws that update ball positions and wire paths.

ZZJONSSON
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
75% match
Loading thumbnail…

molecules

This visualization shows a field of 1,000 colorful circles that collide and bounce off each other, with a larger fixed circle at the center that can be dragged with the mouse. It uses d3.v3’s force layout and collision detection via d3.geom.quadtree to simulate physical interactions, while rendering the circles as SVG elements. The root node is fixed and follows the mouse pointer, and the force graph continuously updates the circle positions on each tick. The scene is interactive, allowing users to move the central node and watch the surrounding circles respond.

Yyyaaa1
74% 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
74% match
Loading thumbnail…

Elastic collisions

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.

AAjayyy
74% match
Loading thumbnail…

N-Body Problem

Two hundred colored circles gravitate and collide, their motion traced by white velocity streaks, in an N-body simulation rendered on an HTML5 Canvas. The piece uses the D3 v3 APIs `d3.layout.force` for the force-directed layout, `d3.geom.quadtree` for efficient collision detection, and `d3.scale.linear` to map speed to a steelblue-to-brown stroke. Each tick pauses the simulation, redraws the scene, and resumes, with circle positions and velocities updated from prior frames.

Mmbostock
73% match
Loading thumbnail…

Bouncing Balls

Ten colorful circles bounce around a canvas, affected by gravity and repelling each other when they touch. Users can click and drag any ball to fling it, with a spring-like pull force applied toward the mouse cursor. The simulation runs on HTML5 Canvas with requestAnimationFrame, using physics calculations for velocity, dampening, and collision detection between boundaries and other circles.

CCurran Kelleher
72% match
Loading thumbnail…

Bouncing Balls

Fifteen circles bounce in a sinusoidal wave across a dark background. Each ball follows a vertical, sine-based path at a fixed horizontal interval, with its vertical position shifting over time to create a flowing, animated pattern. The visualization uses D3.js version 7’s `select`, `range`, `scaleOrdinal`, and `schemePastel2` to generate a pastel color palette for the circles. The animation is driven by a JavaScript `setInterval` timer, updating the circles’ `cy` attributes at roughly 60 frames per second via D3’s `.join()` API.

EErik Sundahl
72% match