Interactive Demo

Polygon Bouncer Physics Simulation

An interactive physics simulation featuring bouncing balls within customizable polygon boundaries. Built with vanilla JavaScript and HTML5 Canvas, showcasing real-time collision detection and physics.

JavaScriptHTML5 CanvasPhysics EngineReal-time Graphics

Live Demo

Click anywhere inside the polygon to add balls. Use the controls to pause, reset, or add more balls.

0 balls · 0 fps

Features

Real-time physics simulation with gravity and collision detection
Interactive polygon boundary creation and manipulation
Customizable ball properties and physics parameters
Smooth 60fps animation with optimized rendering
Click-to-add balls functionality with collision avoidance

Technical Implementation

Custom physics engine with collision resolution
Ray-casting algorithm for point-in-polygon detection
Optimized rendering with requestAnimationFrame
Responsive canvas with device pixel ratio support
Advanced collision detection with edge resolution

Code Highlights

Physics Engine Core

// Ball physics with collision resolution
step(dt, world) {
  this.vy += world.gravity * dt;
  this.x += this.vx * dt;
  this.y += this.vy * dt;
  if (world.poly.closed) this.resolveEdges(world);
}

// Point-in-polygon detection
pointInPolygon(pt, vertices) {
  let inside = false;
  for (let i = 0, j = vertices.length - 1; i < vertices.length; j = i++) {
    const intersect = ((yi > pt.y) !== (yj > pt.y)) &&
                    (pt.x < (xj - xi) * (pt.y - yi) / (yj - yi + 1e-9) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

Project Impact

This project demonstrates advanced JavaScript techniques and real-time graphics programming concepts. It showcases the ability to create engaging, interactive experiences using web technologies, combining mathematical algorithms with smooth visual presentation.