Bouncing Balls

100%

Bouncing Balls

✓ Published0🌍 Public

Last edited Oct 9, 2025

Created on Oct 2, 2023

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.

AI-generated description

A modernization of this old bouncing balls example, which I originally developed in 2012.

You can pick up the balls and fling them.

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Ball Bounce

A circle rests at the center of the screen, and the user can click and drag it with the mouse. Upon release, the ball's velocity is calculated from the drag distance and time, causing it to move and bounce off the window edges. The ball can be grabbed again mid-motion to be thrown anew. The visualization uses D3 v7’s `select`, `timer`, and event handlers on the SVG to manage rendering, with state tracked for position and momentum.

Hhmkyriacou

77% match

Loading thumbnail…

bouncy-ball

A lime-green circle bounces vertically inside a fixed 200-by-400 SVG canvas against a black background. The animation loops indefinitely, alternating between a quick downward fall and an upward rebound. Built with D3 v4, the bounce uses chained `transition()` calls with `ease(d3.easeQuadIn)` for the fall and `ease(d3.easeQuadOut)` for the rise, repositioning the circle's `cy` attribute between 0 and 260 pixels. A recursive `on('end', bounce)` callback restarts the cycle.

PPhilippe Rivière

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

72% match

Loading thumbnail…

CANVAS PELOTAS

This example displays a single blue ball bouncing across a canvas that fills the browser window, rendered using the Canvas API. The prototype-based `Balls` object uses `ctx.arc` with `fillStyle` to draw the circle, while random color and velocity generator functions are defined but not yet utilized. The JavaScript code sets up the canvas dimensions dynamically through `window.innerWidth` and `window.innerHeight`, and positions a transparent heading over the visualization.

Jjuansebas930329

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

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

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

67% match