JavaScript Animation Project

Simulate bouncing projectiles with configurable physics.

Create particles, adjust velocity, gravity, color, size, and playground dimensions, then watch the simulation respond in real time.

Open simulator View concepts
Projectile motion arc A curved projectile path with x and y axes and bouncing balls. X Y trajectory

Interactive Simulation

Projectile playground

Use the controls to generate bouncing projectiles inside the frame.

Active projectiles 0
Gravity 0.45
Frame 760 × 420
X
Y

What this project demonstrates

Core JavaScript and animation concepts

Factory function

Creates configurable projectiles and stores their position and velocity in arrays.

Animation loop

Uses requestAnimationFrame to continuously update motion and render the DOM.

Collision logic

Detects frame boundaries and reverses velocity to simulate bouncing.

Interactive controls

Connects sliders, toggles, selects, and buttons to live simulation state.