Physics Balls HTML CSS JS — Canvas Gravity Simulation

<div class="app">
  <canvas id="canvas"></canvas>
  <div class="controls">
    <label>Gravity <span id="gravVal">0.5</span>
      <input type="range" id="gravSlider" min="0" max="2" step="0.05" value="0.5">
    </label>
    <label>Bounce <span id="bounceVal">0.75</span>
      <input type="range" id="bounceSlider" min="0.3" max="1.0" step="0.05" value="0.75">
    </label>
    <label class="toggle-label">
      <input type="checkbox" id="trailToggle"> Trail
    </label>
    <button id="clearBtn">Clear All</button>
    <span class="hint">Click canvas to spawn balls</span>
  </div>
</div>

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0d0d1a; font-family: system-ui, sans-serif; height: 100vh; overflow: hidden; }
.app { display: flex; flex-direction: column; height: 100vh; }
#canvas { flex: 1; display: block; cursor: crosshair; }
.controls {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px;
  background: #16213e; border-top: 1px solid #0f3460; flex-wrap: wrap;
}
.controls label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #a0a0c0;
}
.controls label span { min-width: 30px; color: #e0e0ff; font-size: 12px; }
input[type=range] {
  -webkit-appearance: none; width: 90px; height: 4px;
  border-radius: 2px; background: #0f3460; accent-color: #4a90d9; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: #4a90d9;
}
.toggle-label { cursor: pointer; user-select: none; }
input[type=checkbox] { accent-color: #4a90d9; width: 15px; height: 15px; cursor: pointer; }
#clearBtn {
  padding: 5px 14px; background: #1a1a2e; border: 1px solid #0f3460;
  border-radius: 6px; color: #a0a0c0; cursor: pointer; font-size: 13px; transition: all 0.15s;
}
#clearBtn:hover { background: #0f3460; color: #e0e0ff; border-color: #4a90d9; }
.hint { font-size: 12px; color: #505070; margin-left: auto; }

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let GRAVITY = 0.5;
let BOUNCE = 0.75;
let trail = false;
let balls = [];
let hueCounter = 0;
const MAX_BALLS = 40;

function resize() {
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}
resize();
window.addEventListener('resize', resize);

function spawnBall(x, y) {
  if (balls.length >= MAX_BALLS) balls.shift();
  const r = 15 + Math.random() * 20;
  balls.push({
    x, y, r,
    vx: (Math.random() - 0.5) * 6,
    vy: -8 - Math.random() * 4,
    hue: (hueCounter * 37) % 360,
    mass: r * r,
  });
  hueCounter++;
}

canvas.addEventListener('pointerdown', e => {
  const rect = canvas.getBoundingClientRect();
  spawnBall(e.clientX - rect.left, e.clientY - rect.top);
});

function resolveCollision(a, b) {
  const dx = b.x - a.x;
  const dy = b.y - a.y;
  const dist = Math.sqrt(dx*dx + dy*dy);
  if (dist === 0) return;
  const nx = dx/dist, ny = dy/dist;
  const dvx = a.vx - b.vx, dvy = a.vy - b.vy;
  const dot = dvx*nx + dvy*ny;
  if (dot > 0) return;
  const totalMass = a.mass + b.mass;
  const impulse = 2 * dot / totalMass;
  a.vx -= impulse * b.mass * nx;
  a.vy -= impulse * b.mass * ny;
  b.vx += impulse * a.mass * nx;
  b.vy += impulse * a.mass * ny;
  const overlap = (a.r + b.r - dist) / 2;
  a.x -= overlap * nx; a.y -= overlap * ny;
  b.x += overlap * nx; b.y += overlap * ny;
}

function update() {
  for (const b of balls) {
    b.vy += GRAVITY;
    b.x += b.vx; b.y += b.vy;
    if (b.x - b.r < 0) { b.x = b.r; b.vx = Math.abs(b.vx) * BOUNCE; }
    if (b.x + b.r > canvas.width) { b.x = canvas.width - b.r; b.vx = -Math.abs(b.vx) * BOUNCE; }
    if (b.y - b.r < 0) { b.y = b.r; b.vy = Math.abs(b.vy) * BOUNCE; }
    if (b.y + b.r > canvas.height) { b.y = canvas.height - b.r; b.vy = -Math.abs(b.vy) * BOUNCE; }
  }
  for (let i = 0; i < balls.length; i++) {
    for (let j = i+1; j < balls.length; j++) {
      const a = balls[i], b = balls[j];
      const dx = b.x - a.x, dy = b.y - a.y;
      if (Math.sqrt(dx*dx + dy*dy) < a.r + b.r) resolveCollision(a, b);
    }
  }
}

function draw() {
  if (trail) {
    ctx.fillStyle = 'rgba(13,13,26,0.15)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  } else {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#0d0d1a';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
  for (const b of balls) {
    const grd = ctx.createRadialGradient(b.x - b.r*0.3, b.y - b.r*0.3, b.r*0.1, b.x, b.y, b.r);
    grd.addColorStop(0, `hsl(${b.hue},80%,80%)`);
    grd.addColorStop(1, `hsl(${b.hue},70%,45%)`);
    ctx.beginPath();
    ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
    ctx.fillStyle = grd;
    ctx.fill();
    ctx.strokeStyle = `hsl(${b.hue},60%,70%)`;
    ctx.lineWidth = 1.5;
    ctx.stroke();
  }
}

function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}
loop();

const gravSlider = document.getElementById('gravSlider');
const gravVal = document.getElementById('gravVal');
gravSlider.addEventListener('input', () => {
  GRAVITY = +gravSlider.value;
  gravVal.textContent = GRAVITY.toFixed(2);
});

const bounceSlider = document.getElementById('bounceSlider');
const bounceVal = document.getElementById('bounceVal');
bounceSlider.addEventListener('input', () => {
  BOUNCE = +bounceSlider.value;
  bounceVal.textContent = BOUNCE.toFixed(2);
});

document.getElementById('trailToggle').addEventListener('change', e => {
  trail = e.target.checked;
});

document.getElementById('clearBtn').addEventListener('click', () => {
  balls = [];
});