Sure, here's a basic particle collision algorithm in JavaScript using HTML canvas:

<!DOCTYPE html>
<html>
  <head>
    <title>Particle Collision</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>

      // Set canvas dimensions
      const canvas = document.getElementById("canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // Set up the context
      const ctx = canvas.getContext("2d");

      // Create an array of particles
      const particles = [];
      const numParticles = 50;
      for (let i = 0; i < numParticles; i++) {
        const radius = Math.random() * 20 + 10;
        const x = Math.random() * (canvas.width - radius * 2) + radius;
        const y = Math.random() * (canvas.height - radius * 2) + radius;
        const dx = Math.random() * 5 - 2.5;
        const dy = Math.random() * 5 - 2.5;
        const color = `hsl(${Math.random() * 360}, 50%, 50%)`;
        particles.push({ x, y, dx, dy, radius, color });
      }

      // Draw each particle
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < particles.length; i++) {
          const particle = particles[i];
          ctx.beginPath();
          ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2, false);
          ctx.fillStyle = particle.color;
          ctx.fill();
        }
      }

      // Move the particles and check for collisions
      function update() {
        for (let i = 0; i < particles.length; i++) {
          const particle1 = particles[i];

          // Move the particle
          particle1.x += particle1.dx;
          particle1.y += particle1.dy;

          // Check for collisions with other particles
          for (let j = i + 1; j < particles.length; j++) {
            const particle2 = particles[j];
            const dx = particle2.x - particle1.x;
            const dy = particle2.y - particle1.y;
            const distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < particle1.radius + particle2.radius) {
              // Particles have collided
              const angle = Math.atan2(dy, dx);
              const magnitude1 = Math.sqrt(particle1.dx * particle1.dx + particle1.dy * particle1.dy);
              const magnitude2 = Math.sqrt(particle2.dx * particle2.dx + particle2.dy * particle2.dy);
              const direction1 = Math.atan2(particle1.dy, particle1.dx);
              const direction2 = Math.atan2(particle2.dy, particle2.dx);
              const newDirection1 = direction2;
              const newDirection2 = direction1;
              const newMagnitude1 = magnitude2;
              const newMagnitude2 = magnitude1;
              particle1.dx = Math.cos(newDirection1) * newMagnitude1;
              particle1.dy = Math.sin(newDirection1) * newMagnitude1;
              particle2.dx = Math.cos(newDirection2) * newMagnitude2;
              particle2.dy = Math.sin(newDirection2) * newMagnitude2;
            }
          }

          // Check for collisions with walls
          if (particle1.x - particle1.radius < 0 || particle1.x + particle1.radius > canvas.width) {
            particle1.dx = -particle1.dx;
          }
          if (particle1.y - particle1.radius < 0 || particle1.y + particle1.radius > canvas.height) {
        particle1.dy = -particle1.dy;
      }
    }
  }

  // Start the animation loop
  function loop() {
    requestAnimationFrame(loop);
    draw();
    update();
  }
  loop();
</script>
  </body>
</html>

This code creates an HTML canvas and draws particles with random colors and velocities. It then updates the position of each particle, checking for collisions with other particles and the walls of the canvas. If a collision is detected, the particles' velocities are updated to reflect the collision. Finally, the code sets up an animation loop to continuously redraw the particles and update their positions.
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence