你如何计算粒子相互反弹的速度?

时间:2014-06-16 01:51:53

标签: javascript math canvas

我使用画布制作了这段代码来描绘一些争夺指定颜色的粒子。目前我已经制作了粒子" put"它们在其他粒子上的颜色,如果它们发生碰撞,我也会让它们“吮吸”#34;其他粒子'质量,如果在一定范围内。我想把它带到一个新的水平,当一个球击中另一个球时,让它们彼此反弹,通过某种方式否定速度,与某个与另一个粒子的相对角度有关。如何实现这一点?虽然我在高中学习科学,但我无法完全理解这一点。

Codepen:http://codepen.io/dremp/pen/fzxvK?editors=001

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

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);

}

1 个答案:

答案 0 :(得分:2)

你需要计算冲动:

               // 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);

演示:http://codepen.io/gengel/pen/pFHGa

如果你有不同大小的不同球飞来飞去,你应该改变那些p.mass线来反映(区域可能会起作用 - (pi * r)^ 2)

(编辑以便在拍摄P之后将“P”替换为“冲动”)