Javascript 如何计算粒子相互反弹的速度？

我已经使用canvas制作了这段代码来描绘一些粒子，这些粒子为了它们指定的颜色而争斗。目前我已经让粒子“把”它们的颜色放在其他粒子上，如果它们碰撞，我也让它们“吸”其他粒子的质量，如果在某个半径内。我想把它带到下一个层次，当一个球撞到另一个球时，让它们相互反弹，以某种方式抵消速度，与另一个粒子的相对角度有关。如何实现这一点？尽管我在高中学习科学，但我还是不能完全理解这一点

代码笔：

这是检测粒子是否相互碰撞的片段

function update() {
    paintCanvas();

    for(var i = 0; i < Particles.length; i++) {
        p = Particles[i];

        p.x += p.vx;
        p.y += p.vy;

        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0 * Math.PI, 2 * Math.PI, false);

        var drawMethod = (fillParticles === true) ? 'fill':'stroke';

        ctx[drawMethod]();
        ctx[drawMethod+"Style"] = p.color;

        if (p.x + p.radius > W || p.x - p.radius < 0) p.vx = p.vx * - 1 + 0.05;
        if (p.y + p.radius > H || p.y - p.radius < 0) p.vy = p.vy * - 1 + 0.05;

        if      (p.x + p.radius > W) p.vx -= 0.05;
        else if (p.x - p.radius < 0) p.vx += 0.05;

        if      (p.y + p.radius > H) p.vy -= 0.05;
        else if (p.y - p.radius < 0) p.vy += 0.05;

        for(var j = i + 1; j < Particles.length; j++) {

            p2 = Particles[j];

            var disance,
                distanceX = p.x - p2.x,
                distanceY = p.y - p2.y,
                color;

            distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

            if(distance <= p.radius + p2.radius) {
                p2.color = p.color;
                color = p.color;

                var ax = distanceX / 1000,
                    ay = distanceY / 1000;

                p.x += ax;
                p.y += ay;
            }
            else if(distance <= p.radius * 2 + 50) {
                ctx.lineWidth = 2;
                ctx.strokeStyle = p.color;
                ctx.beginPath();
                ctx.moveTo(p.x,p.y);
                ctx.lineTo(p2.x,p2.y);
                ctx.stroke();
                ctx.beginPath();

                p.radius += 0.005;
                p2.radius -= 0.005;

                if(p.radius > 50) p.radius -= 0.01;
                if(p2.radius < 5) p2.radius += 0.01;
            }
        }
    }

    requestAnimationFrame(update);

}

函数更新（）{
paintCanvas（）；
对于（var i=0；iW | | p.x-p.radius<0）p.vx=p.vx*-1+0.05；
如果（p.y+p.radius>H | | p.y-p.radius<0）p.vy=p.vy*-1+0.05；
如果（p.x+p.radius>W）p.vx-=0.05；
否则，如果（p.x-p.radius<0）p.vx+=0.05；
如果（p.y+p.radius>H）p.vy-=0.05；
否则，如果（p.y-p.radius<0）p.vy+=0.05；
对于（var j=i+1；j如果（距离您需要计算冲量：

               // Find normal from other to me

                normX = p.x - p2.x;
                normY = p.y - p2.y;

                // make into unit vector

                normLength = Math.sqrt( normX * normX + normY * normY);

                normX = normX / normLength;
                normY = normY / normLength;

              // Get projection of movement vectors onto normal
              // (Dot prod each with norm)

              myProj    = (p.vx * normX) + (p.vy * normY);

              otherProj = (p2.vx * normX) + (p2.vy * normY);

              // Now, factor in impulse, derived from
              // Conservation of Energy / Conservation of Momentum

            impulse = ( 2 * (myProj - otherProj) );

            p.mass = 1; // Replace with "mass" calculation (based on area?)
            p2.mass = 1;   
            impulse = impulse / (p.mass + p2.mass);


          p.vx = p.vx - (impulse * p2.mass * normX);
          p.vy = p.vy - (impulse * p2.mass * normY);

          p2.vx = p2.vx + (impulse * p.mass * normX);
          p2.vy = p2.vy + (impulse * p.mass * normY);

演示：

如果你有不同大小的不同球在空中飞来飞去，你应该改变这些p.mass线来反映这一点（面积可能会起作用-（pi*r）^2）

（编辑后将“p”替换为“pulse”，因为取了p）
这首先更像是一个物理问题。你应该确定是要使用“弹性”碰撞还是“非弹性”碰撞，第一个碰撞中动能守恒，第二个碰撞中一些动能在变形等过程中损失。我建议使用第一个碰撞（因为这是最简单的）谷歌的弹性碰撞和动量守恒。方程相对简单，你可以把它们转换成代码谷歌的“物理碰撞角”打开了这个，你可以把它转换成Js