100%

Bouncing Spheres

✓ Published1🌍 Public

Last edited Mar 19, 2025

Created on Mar 19, 2025

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.

AI-generated description

Manifested using Claude 3.7 Sonnet with VizHub's "Edit with AI" feature. It's truly incredible how good it is with ThreeJS! I gave it this older example Bouncing Balls and told it to make it work in 3D!

Here's the full description Claude wrote:

3D Physics Simulation with Sound

This project demonstrates a 3D physics simulation with gravity, bouncing spheres, and audio feedback.

Features

3D spheres with realistic physics
Gravity and bouncing
Sphere-to-sphere collision detection
Interactive container walls
Mouse interaction to grab and pull spheres
Camera controls for 3D navigation (orbit, zoom, pan)
Audio feedback for collisions with different sounds

Physics Features

Gravity pulls spheres downward
Dampening factor reduces velocity over time
Spheres bounce off container walls
Spheres collide and repel each other
Mouse interaction allows pulling spheres

Audio Features

Distinct sounds for wall collisions and ball-to-ball collisions
Wall collisions produce a higher-pitched sine wave
Ball collisions produce a lower-pitched triangle wave
Sound volume varies with impact velocity
Ability to mute/unmute sounds

Technologies Used

Three.js for 3D rendering
JavaScript ES modules
Custom physics implementation
Interactive camera controls
Web Audio API for sound generation

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

78% match

Loading thumbnail…

3D Cube of Spheres

This visualization displays a 4x4x4 cube composed of 64 colored spheres, with a hue gradient varying across each axis and a gentle rotation animation over a dark, starry background. The scene is rendered in WebGL using Three.js, featuring perspective projection, directional and ambient lighting, and interactive orbit controls for rotating, zooming, and panning. The code organizes configuration parameters in a separate module and uses `THREE.SphereGeometry`, `MeshPhongMaterial`, and `OrbitControls` to construct and manipulate the 3D environment.

CCurran Kelleher

76% match

Loading thumbnail…

Fork of 3D Cube of Spheres

A 3D grid of spheres animates a solution to the Helmholtz wave equation, with each sphere’s radius and color representing the wave amplitude at that point in space. The visualization uses Three.js with WebGL rendering and OrbitControls for camera navigation. Spherical Bessel functions and spherical harmonics compute the wave values, which oscillate over time to show standing wave patterns in three dimensions.

NNita

76% match

Loading thumbnail…

Fork of 3D Cube of Spheres

A 3D cube composed of 64 colored spheres animates with continuous rotation in a black scene, lit by white, ambient, and point lights to highlight each sphere's hue and brightness. The spheres are generated procedurally as Three.js meshes with Phong materials, using position-based HSL colors. OrbitControls with damping enables interactive rotation, while the renderer redraws each frame via WebGL animation.

PPremkumar

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

75% match

Loading thumbnail…

Fork of 3D Cube of Spheres

This example presents an interactive 3D cube composed of uniformly arranged spheres, rendered with the Three.js library. The visualization uses a force-directed simulation via `d3.forceSimulation` to compute a physics-based layout, while the Three.js `Sphere` geometry and `PerspectiveCamera` provide the three-dimensional spatial projection. Users can drag the scene to rotate the cube, adjusting the camera orbit and zoom through mouse interactions. The data originates from a synthetic grid of node positions, demonstrating how a static 3D point cloud can be arranged into a structured geometric form.

NNita

74% match

Loading thumbnail…

Fork of Fork of 3D Cube of Spheres

This interactive 3D visualization explores wave equations, rendering a 10x10x10 grid of spheres whose size and color represent wave amplitude at each point. Users can switch between Helmholtz, membrane wave, Schrödinger, and wave packet solutions through a dropdown menu, adjusting wavenumber and animation speed. Built with Three.js and OrbitControls, the animation computes numerical solutions to each equation in real time, mapping amplitude to sphere scale and hue. The rotating, zoomable view responds to click-and-drag interactions, with lighting provided by directional and ambient light sources.

NNita

74% match

Loading thumbnail…

Fork of 3D Cube of Spheres

This interactive 3D simulation depicts a microscopic aquatic environment teeming with protozoa. Three distinct types—paramecium, amoeba, and euglena—each with unique shapes and movement patterns, swim and crawl through a transparent water sphere. The scene is rendered with Three.js, using MeshPhongMaterial for the organisms and a particle system for organic debris. Camera controls allow rotation and zoom, while directional and point lights illuminate the environment, creating a visually rich educational tool.

NNita

74% match