2D Physics Sandbox
A fast, interactive 2D physics sandbox online. Simulate gravity, rigid body collisions, and object stacking in real time, directly in your browser.
How Do Physics Engines Work?
A physics engine is a complex computer program that simulates Newtonian physics models—using variables like mass, velocity, friction, and restitution (bounciness). These engines are the backbone of modern video games, animated movies, and scientific simulations.
This tool uses Matter.js, a highly optimized 2D physics engine written purely in JavaScript. It allows for rigid body collision detection, constraint modeling, and real-time interaction.
Rigid Bodies
In a simulation, objects are "rigid bodies." This means they do not deform upon collision. Instead, the engine calculates the exact moment of intersection and applies mathematical forces to push them apart, mimicking a bounce or a crash.
Gravity
Gravity is a constant vector force applied to every non-static body in the world during every frame of the simulation (usually 60 times a second). Turning off gravity shows how momentum carries objects infinitely in a vacuum.
Restitution (Bounciness)
When objects collide, some kinetic energy is lost to heat and sound in the real world. In physics engines, this is modeled as "restitution." A restitution of 1 means a perfectly elastic bounce, while 0 means it stops dead.
Mouse Constraints
Dragging an object uses a "mouse constraint." Instead of directly moving the object to your cursor, the engine acts like an invisible spring is pulling the object toward your mouse. This ensures the object still collides properly with walls.
Tech Stack Used to Build This Tool
JavaScript + Matter.js
The simulation engine is written in JavaScript and powered by Matter.js for rigid body dynamics, constraints, collision resolution, and gravity handling.
HTML5 Canvas + PHP + Tailwind CSS
Rendering happens on HTML5 Canvas, the page is served with PHP templates, and the interface uses utility-first Tailwind classes for responsive UI controls.
Frequently Asked Questions
Related Games & Fun
Check Out Other Popular Tools
Compress Image Online
Compress JPG, PNG, WebP, HEIC, SVG or GIF with the best quality and compression. Reduce the filesize of your images at once safely, instantly in your browser.
YouTube Thumbnail Downloader
This free tool allows you to easily download thumbnails from any YouTube video in various resolutions. Whether you need the high-definition (HD) version for a project or a smaller size for a blog post, we've got you covered.
SPA Soft Navigation Checker — Measure SPA Route Performance & INP
Check soft-navigation support in your browser, watch a demo SPA log route changes with paint timing, and copy an instrumentation snippet for your own app.
Was this tool helpful?
Comments
Loading comments...