100%

Bouncing Balls

✓ Published0🌍 Public

Last edited Nov 26, 2025

Created on Nov 21, 2025

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.

AI-generated description

React Starter with D3 Force Physics Simulation

A React application featuring D3 Force-based physics simulation with particles rendered using HTML5 Canvas for optimal performance.

Structure

index.jsx - React entry point
App.jsx - Main React component
viz.js - Visualization orchestrator
animation.js - Animation loop management with D3 Force
render.js - Canvas rendering logic
utils.js - Utility functions for colors
data.js - Sample data
constants.js - Configuration constants

MIT Licensed

Similar vizzes

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

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

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

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

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

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…

Bouncing Spheres

An interactive 3D physics simulation renders 50 spheres bouncing within a transparent cube, with gravity, dampening, wall collisions, and sphere-to-sphere repulsion. Mouse drags can grab and pull spheres, while orbit controls navigate the scene. Three.js handles the WebGL rendering, and the Web Audio API synthesizes collision sounds whose pitch and volume vary with impact velocity.

CCurran Kelleher

75% match

Loading thumbnail…

Untitled

This example demonstrates a React-based interactive visualization that renders a dynamic particle system using HTML5 Canvas. The code leverages D3’s force simulation (`d3.forceSimulation`) to compute physics-based movement for multiple circular nodes, which are drawn each animation frame via the Canvas API. Each node’s position is updated continuously based on velocity and collision forces, creating a fluid, organic motion effect. The visualization is built with pure JavaScript and styled minimally through CSS, showcasing how React integrates with D3 and Canvas for real-time graphics without external charting libraries.

Bbusrabozkus

75% match