Physics Sandbox

This Physics Sandbox is an interactive simulation environment powered by Matter.js. It allows you to create 2D shapes and observe how they behave under the laws of physics, including gravity, friction, and restitution (bounciness). It's a great tool for understanding basic mechanics or just having fun with virtual chaos.

The simulation uses a rigid body physics engine to calculate the movement and interaction of objects:

Gravity: A constant force pulling all objects downwards (by default 9.8 m/s² simulation equivalent).

Collision Detection: The engine continuously checks if objects are touching or overlapping and resolves these collisions by pushing them apart.

Friction: A force that resists movement when two surfaces slide against each other. It stops objects from sliding forever.

Restitution (Bounciness): Determines how much energy is preserved after a collision. A value of 1.0 means perfect bounce (no energy loss), while 0.0 means no bounce.

Mass: Heavier objects require more force to move but are harder to stop once moving.

You can use this sandbox to demonstrate key physics principles:

Newton's Laws of Motion: Observe how objects stay at rest until a force acts on them, and how every action has a reaction during collisions.

Conservation of Momentum: Watch how momentum is transferred when a fast-moving object hits a stationary one.

Potential vs. Kinetic Energy: Lift an object (pause + drag) to give it potential energy, then drop it to convert to kinetic energy.

Force Vectors: Use the Wind or Explosion effects to see how external forces change an object's trajectory.

Test your understanding with these simple experiments:

Stacking: Try to build a stable tower of squares. How high can you go before it topples?

Zero G: Set gravity to 0. Objects will float until they hit a wall or another object.

Super Bounce: Set bounciness to maximum. Objects will keep bouncing for a long time.

Chaos Theory: Spawn 50 objects and hit 'Explosion'. Watch how complex patterns emerge from simple starting conditions.

Simulations like this are used in many industries:

Video Games: Almost all modern games use physics engines for realistic movement and destruction.

Engineering: Engineers simulate forces on bridges and buildings before construction begins.

Animation: CGI movies use physics simulations for hair, cloth, water, and debris effects.

Robotics: Robots are trained in physics simulations to learn how to walk or grasp objects safely.

This tool is built using Matter.js, a 2D rigid body physics engine for the web. It handles all the complex math required for collision detection, body dynamics, and constraints.

Simulating physics is computationally intensive.

Object Count: Keeping the object count under 100 ensures smooth 60 FPS performance on most devices.

Browser: Modern browsers with hardware acceleration (Chrome, Firefox, Edge) provide the best experience.

Mobile Devices: This simulation runs on phones, but limiting the number of objects will save battery life.

This sandbox demonstrates 'Creative Coding', where programming is used for expression rather than just function. By tweaking variables like gravity or friction, you can create generative art and interesting visual patterns.