Falling 2D Objects with Physics

← Back to Demos

Watch colorful 2D objects fall, bounce, and interact with realistic physics simulation using the MatterJS engine. The demo features satisfying gravity, smooth collision detection, and interactive object spawning with customizable properties for an engaging physics experience.

Interactive Physics World

Click anywhere to spawn happy falling objects! Watch them bounce and interact with satisfying physics.

MatterJS

Implementation

The physics simulation uses MatterJS, a 2D physics engine that provides realistic collision detection, constraint solving, and physics simulation. The engine is initialised with a world, renderer, and engine that runs at 60 FPS with smooth, satisfying gravity.

Physics Engine Setup
const engine = Matter.Engine.create();
const world = engine.world;
const render = Matter.Render.create({
  element: container,
  engine: engine,
  options: {
    width: 800,
    height: 384,
    wireframes: false,
    background: 'transparent'
  }
});

Objects are created dynamically with customisable properties including restitution (bounciness), friction, density, and render colours. Each falling object uses smooth physics calculations for natural movement.

Dynamic Object Creation
function createObject(x, y, type, properties) {
  let body;
  switch(type) {
    case 'circle':
      body = Bodies.circle(x, y, properties.size);
      break;
    case 'rectangle':
      body = Bodies.rectangle(x, y,
        properties.size * 2, properties.size);
      break;
  }

  Body.set(body, {
    restitution: properties.restitution,
    friction: properties.friction,
    density: properties.density
  });
}

Key Features