box2d

100%

✓ Published0🌍 Public

Last edited Mar 26, 2018

Created on Aug 21, 2012

This example demonstrates a simple 2D physics simulation using the Box2DWeb library. A red ball and three blue crates fall under gravity onto a green ground platform. The physics engine calculates collisions, friction, and restitution, updating the positions of the objects in real time. Users can click and drag any object with the mouse to interact with the scene, applying forces through a mouse joint. The DOM elements are synchronized with their Box2D body positions and rotations using CSS transforms, running on a requestAnimationFrame loop for smooth animation.

AI-generated description

box2d.org

Similar vizzes

Loading thumbnail…

box2d

This animated physics sandbox uses the Box2D physics engine with a canvas renderer to simulate falling and colliding 2D objects. The visualization demonstrates real-time rigid-body dynamics, where colored rectangles and other shapes tumble, stack, and bounce within the canvas boundaries. Backbone.js is loaded alongside the physics library, suggesting an organized application structure, while WebGL acceleration enhances rendering performance. The animation continuously updates as objects interact under gravity and collision forces.

Aabernier

81% match

Loading thumbnail…

box-pile

This example demonstrates a physics simulation of a pile of boxes being struck by spheres. Clicking the canvas shoots a sphere at the stack, causing the boxes to tumble and scatter in real time. The simulation is built with Bullet Physics, ported to JavaScript as ammo.js, and rendered in 3D using the regl library with canvas/WebGL. Both the boxes and the ground plane use Phong shading, with a camera view that is set via matrix transformations.

11wheel

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

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

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

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

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

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

60% match