test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS Particle Playground</title>
  <style>
    body { margin: 0; background: #111; color: #eee; font-family: sans-serif; }
    #ui { position: fixed; top: 10px; left: 10px; z-index: 10; }
    button { margin-right: 5px; }
  </style>
</head>
<body>
  <div id="ui">
    <button id="spawn">Spawn 50</button>
    <button id="clear">Clear</button>
    Gravity: <input id="gravity" type="range" min="0" max="1" step="0.01" value="0.2">
  </div>
  <canvas id="canvas"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const spawnBtn = document.getElementById('spawn');
    const clearBtn = document.getElementById('clear');
    const gravitySlider = document.getElementById('gravity');

    let particles = [];
    let gravity = parseFloat(gravitySlider.value);
    let mouse = { x: 0, y: 0, down: false };

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

    class Particle {
      constructor(x, y, vx, vy, r, color) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.r = r;
        this.color = color;
      }

      update() {
        this.vy += gravity;
        this.x += this.vx;
        this.y += this.vy;

        // Walls
        if (this.x - this.r < 0) {
          this.x = this.r;
          this.vx *= -0.9;
        }
        if (this.x + this.r > canvas.width) {
          this.x = canvas.width - this.r;
          this.vx *= -0.9;
        }
        if (this.y - this.r < 0) {
          this.y = this.r;
          this.vy *= -0.9;
        }
        if (this.y + this.r > canvas.height) {
          this.y = canvas.height - this.r;
          this.vy *= -0.9;
        }

        // Mouse attraction
        if (mouse.down) {
          const dx = mouse.x - this.x;
          const dy = mouse.y - this.y;
          const dist = Math.sqrt(dx * dx + dy * dy) || 1;
          const force = 0.5 / dist;
          this.vx += dx * force;
          this.vy += dy * force;
        }
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }

    function randomColor() {
      const h = Math.floor(Math.random() * 360);
      return `hsl(${h}, 80%, 60%)`;
    }

    function spawn(n = 50) {
      for (let i = 0; i < n; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height * 0.5;
        const vx = (Math.random() - 0.5) * 10;
        const vy = (Math.random() - 0.5) * 10;
        const r = 5 + Math.random() * 15;
        particles.push(new Particle(x, y, vx, vy, r, randomColor()));
      }
    }

    function clear() {
      particles = [];
    }

    spawnBtn.addEventListener('click', () => spawn(50));
    clearBtn.addEventListener('click', clear);
    gravitySlider.addEventListener('input', () => {
      gravity = parseFloat(gravitySlider.value);
    });

    canvas.addEventListener('mousedown', e => {
      mouse.down = true;
      mouse.x = e.clientX;
      mouse.y = e.clientY;
    });
    canvas.addEventListener('mouseup', () => {
      mouse.down = false;
    });
    canvas.addEventListener('mousemove', e => {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
    });

    function loop() {
      ctx.fillStyle = 'rgba(0,0,0,0.3)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      for (const p of particles) {
        p.update();
        p.draw();
      }

      requestAnimationFrame(loop);
    }
    loop();
  </script>
</body>
</html>