Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bouncing Balls

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

00fb644742394a848bd51d8a508c8d71

Open

Bouncing Balls

0 stars0🌍 Public
CCurran Kelleher
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 Physics Simulation

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

Structure

  • index.jsx - React entry point
  • App.jsx - Main React component
  • viz.js - Visualization orchestrator
  • physics.js - Physics simulation logic
  • animation.js - Animation loop management
  • render.js - Canvas rendering logic
  • utils.js - Utility functions for colors and statistics
  • data.js - Sample data
  • constants.js - Configuration constants