Physics Simulation
Interactive 2D physics engine with collision detection, gravity, and momentum
Physics Engine
Status
Running
Objects
0
Energy
0
Click and drag on the canvas to create balls with velocity. The drag direction and distance determine the initial velocity.
Visualization
Quick Actions
Physics Settings
Gravity: 0.5
Downward acceleration force
Friction: 0.99
Air resistance (1 = no friction)
Elasticity: 0.85
Bounce coefficient (1 = perfectly elastic)
Physics Info
🎯 Elastic Collisions
When two balls collide, momentum and kinetic energy are conserved. The elasticity parameter controls how much energy is retained after collision (1 = perfectly elastic, 0 = perfectly inelastic).
⚡ Velocity Vectors
The green arrows show each ball's velocity vector. The length represents speed, and the direction shows the ball's movement direction. Vectors are calculated using F = ma.
🌍 Gravity
Gravity adds constant downward acceleration (9.8 m/s² in real life). Adjusting the gravity slider changes how fast balls accelerate downward, simulating different planetary gravities.
💨 Friction
Air resistance gradually slows moving balls. A friction value of 1 means no friction (motion continues forever), while lower values cause balls to slow down over time.
Implementation Details
🔢 Physics Formulas
- Kinetic Energy: KE = ½mv² (calculated for total energy display)
- Momentum: p = mv (conserved in collisions)
- Gravity: v_y += g (constant downward acceleration)
- Friction: v *= friction_coefficient (air resistance damping)
💥 Collision Detection Algorithm
The simulation uses a circle-circle collision detection algorithm:
- Calculate distance between ball centers using Euclidean distance formula
- Check if distance < sum of radii (collision detected)
- Calculate collision normal vector (direction of impact)
- Compute relative velocity along normal using dot product
- Apply impulse-based resolution to conserve momentum and energy
- Separate overlapping balls to prevent sticking
📐 Vector Mathematics
All physics calculations use 2D vector operations:
- Addition: (x1, y1) + (x2, y2) = (x1+x2, y1+y2)
- Subtraction: (x1, y1) - (x2, y2) = (x1-x2, y1-y2)
- Dot Product: v1 · v2 = x1*x2 + y1*y2 (projects velocity)
- Magnitude: |v| = √(x² + y²) (calculates speed)
- Normalization: v/|v| (creates unit direction vector)
🎨 Canvas Rendering
The simulation uses HTML5 Canvas 2D rendering context:
- Animation Loop: requestAnimationFrame for smooth 60 FPS rendering
- Drawing: Canvas arc() for circles, lineTo() for velocity vectors and trails
- Performance: Only renders visible elements, clears canvas each frame
- Responsive: Automatically scales to fit container while maintaining aspect ratio
⚙️ Architecture & Performance
- React Hooks: useState for state, useEffect for lifecycle, useCallback for memoization
- Optimization: O(n²) collision detection (acceptable for ~100 balls)
- Immutability: State updates create new arrays, preventing reference bugs
- Sound System: Web Audio API with oscillators for procedural sound effects
- TypeScript: Full type safety for vectors, balls, and config objects