Bouncing balls

let balls = [];
function init({ width, height }) {
  for (let i = 0; i < 12; i++) {
    balls.push({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: (Math.random() - 0.5) * 200,
      vy: (Math.random() - 0.5) * 200,
      r: 6 + Math.random() * 14,
      hue: Math.floor(Math.random() * 360),
    });
  }
}
function tick({ ctx, dt, width, height, input }) {
  ctx.fillStyle = "rgba(0,0,0,0.15)";
  ctx.fillRect(0, 0, width, height);
  for (const b of balls) {
    if (input.mouseDown) {
      const dx = input.mouseX - b.x, dy = input.mouseY - b.y;
      const d2 = dx*dx + dy*dy + 200;
      b.vx += (dx / d2) * 80000 * dt;
      b.vy += (dy / d2) * 80000 * dt;
    }
    b.x += b.vx * dt; b.y += b.vy * dt;
    if (b.x < b.r) { b.x = b.r; b.vx *= -1; }
    if (b.x > width - b.r) { b.x = width - b.r; b.vx *= -1; }
    if (b.y < b.r) { b.y = b.r; b.vy *= -1; }
    if (b.y > height - b.r) { b.y = height - b.r; b.vy *= -1; }
    ctx.beginPath();
    ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
    ctx.fillStyle = "hsl(" + b.hue + ", 80%, 60%)";
    ctx.fill();
  }
}