JavaScript 圆形碰撞检测错误答案

【问题标题】：JavaScript Circle Collision Detection BugJavaScript 圆形碰撞检测错误
【发布时间】：2013-09-09 13:12:05
【问题描述】：

我在学校项目中进行的圆/球碰撞模拟中遇到了这个奇怪的错误。我还可以补充一点，我有点菜鸟，我已经编程了大约一年。

在我用很多圆圈填充画布之前，碰撞工作正常。我真的不明白为什么。 25 圈工作正常，但当我增加到 50 圈时，圈子开始出现问题。

正如您在下面的链接中看到的那样，圆圈在运行一段时间后开始相互连接并疯狂地旋转，这不是我喜欢发生的事情。

50 个圆圈的示例： https://dl.dropboxusercontent.com/u/9069602/circles/vers1/collisions.html

我的猜测是，随着圆圈之间的空间减小，圆圈相互连接的风险会更大，但在开始模拟时，它们似乎有足够的空间。我使用 nextY/nextX 位置变量来计算实际影响发生前一帧的影响。这也可能是错误的来源。我无法真正指出要开始调试。

这是 50 圈案例的代码： https://dl.dropboxusercontent.com/u/9069602/circles/vers1/circle.js

// Returns true if two circles are overlapping
function overlapDetection( circle1, circle2 ) {
    var returnValue = false;
    var dx = circle1.nextX - circle2.nextX;
    var dy = circle1.nextY - circle2.nextY;
    var distance = ( dx * dx + dy * dy );

    if ( distance <= ( circle1.radius + circle2.radius ) * ( circle1.radius + circle2.radius ) ) {
        returnValue = true;
    }
    return returnValue; 
}

function collide() {
    var circle;
    var testCircle;
    var returnValue = false;

    for ( var i = 0; i < circles.length; i += 1 ) {
        circle = circles[i];
        for ( var j = i + 1; j < circles.length; j += 1 ) {
            testCircle = circles[j];
            if ( overlapDetection( circle, testCircle ) ) {
                collideCircles( circle, testCircle );
                collideCircle1 = circle.id;
                collideCircle2 = testCircle.id;
                returnValue = true;
            }
        }
    }
    return returnValue;
}

function collideCircles( circle1, circle2 ) {

    var dx = circle1.nextX - circle2.nextX;
    var dy = circle1.nextY - circle2.nextY;
    var collisionAngle = Math.atan2( dy, dx );

    var speed1 = Math.sqrt( circle1.velocityX * circle1.velocityX + circle1.velocityY * circle1.velocityY );
    var speed2 = Math.sqrt( circle2.velocityX * circle2.velocityX + circle2.velocityY * circle2.velocityY );

    var direction1 = Math.atan2( circle1.velocityY, circle1.velocityX );
    var direction2 = Math.atan2( circle2.velocityY, circle2.velocityX );

    var rotatedVelocityX1 = speed1 * Math.cos( direction1 - collisionAngle );
    var rotatedVelocityY1 = speed1 * Math.sin( direction1 - collisionAngle );
    var rotatedVelocityX2 = speed2 * Math.cos( direction2 - collisionAngle );
    var rotatedVelocityY2 = speed2 * Math.sin( direction2 - collisionAngle );

    var finalVelocityX1 = ( ( circle1.mass - circle2.mass ) * rotatedVelocityX1 + ( circle2.mass + circle2.mass ) * rotatedVelocityX2 ) / ( circle1.mass + circle2.mass );
    var finalVelocityX2 = ( (circle1.mass + circle1.mass ) * rotatedVelocityX1 + ( circle2.mass - circle1.mass ) * rotatedVelocityX2 ) / ( circle1.mass + circle2.mass );

    var finalVelocityY1 = rotatedVelocityY1;
    var finalVelocityY2 = rotatedVelocityY2;

    circle1.velocityX = Math.cos( collisionAngle ) * finalVelocityX1 + Math.cos( collisionAngle + Math.PI / 2 ) * finalVelocityY1;
    circle1.velocityY = Math.sin( collisionAngle ) * finalVelocityX1 + Math.sin( collisionAngle + Math.PI / 2 ) * finalVelocityY1;
    circle2.velocityX = Math.cos( collisionAngle ) * finalVelocityX2 + Math.cos( collisionAngle + Math.PI / 2 ) * finalVelocityY2;
    circle2.velocityY = Math.sin( collisionAngle ) * finalVelocityX2 + Math.sin( collisionAngle + Math.PI / 2 ) * finalVelocityY2;

    circle1.nextX += circle1.velocityX;
    circle1.nextY += circle1.velocityY;
    circle2.nextX += circle2.velocityX;
    circle2.nextY += circle2.velocityY;
}

我希望我清楚这个问题。

提前致谢！

【问题讨论】：

您应该在问题中包含相关代码！
collideCircle1 = circle.id; collideCircle2 = testCircle.id; 有什么用？这些变量在代码中的任何地方都没有被引用，但它们只是因为它们是全局的而闻起来很糟糕（在范围内没有var ...）。

标签： javascript geometry 2d collision

【解决方案1】：

你的问题是双重的。

您的collideCircles(circle1, circle2) 假设circle1 和circle2 将在下一个坐标处发生碰撞，这是由collide() 保证的，并且不会在当前坐标中发生碰撞（请参阅您如何计算collisionAngle），这可能不是完全正确。这就是为什么如果你的圈子相互重叠，他们就会“卡住”。

如果collideCircles(circle1, circle2) 和collideCircles(circle3, circle4) 反弹circle2 和circle4，则圆最终可能会相互重叠，这样它们的下一个坐标就会相互重叠。但是，碰撞检测循环已经越过了它们，它们的碰撞不会被拾取，圆圈会愉快地相互叠加。

【讨论】：

【解决方案2】：

假设您已经开发出铰链接头！ =) 实际上可能有几个问题。例如：当您检查空闲空间时，另一个圆圈已经可以占用它；我认为下一个场景是：让我们假设两个圆圈有

r=1; y =0;
circle1.x = 1, circle2.x =4;

检查下一步：

circle1.canMoveToX(2) //=> true; coz border will move to x=3 it's empty at the moment;
circle2.canMoveToX(3)  // => true; coz border will move to x=2 it's empty at the moment;

在这一步他们加入。

【讨论】：