javascript - p5.j​​s 对象碰撞和对象纠缠

Question

我在 p5.js 中写了一些代码，看看我是否可以正确地制作一个碰撞检测系统，但是当我放入超过 2 个正方形时，正方形似乎在其他正方形内部相互碰撞。我想知道是否有任何方法可以阻止这个加号，如果你有任何关于如何整理/缩短我的代码 ID 的好建议，我想听听他们的意见。

我的代码:

var r; //later defined as an array for the squares
var num; //number of squares
function setup(){
    r = [];
    num = 10;
    createCanvas(windowWidth,windowHeight- 4);
    for(var i = 0;i < num; i++){

        r[i] = new Box(random(width-40),random(height-40),40,40);

    }

}

function draw(){
    background(40);
    for(var i = 0;i < num; i++)    {
        r[i].show();
        for(var j = 0;j<num; j++){

            //this is the if statement evaluating if the left and right of the square is touching each other. i is one square and j is the other. you see in each if statement i have the acceleration being added, this is because if it wasn't then they would be true if the squares were touching each other on any side
            if(r[i].right+r[i].xa >= r[j].left && r[i].bottom >= r[j].top && r[i].top <= r[j].bottom && r[i].left + r[i].xa <= r[j].right){
                r[i].xa *= -1;
                r[j].xa *= -1;

            }
            //this is also just as confusing just read through it carefully
            if(r[i].bottom + r[i].ya >= r[j].top && r[i].right >=r[j].left && r[i].left <= r[j].right && r[i].top + r[i].ya <= r[j].bottom){
                r[i].ya *= -1;
                r[j].ya *= -1;
            }
        }    
    }


}
function Box(x, y, wid, hei){

    this.x = x;//input for square shape
    this.y = y;//ditto
    this.width = wid;//ditto
    this.height= hei;//ditto
    this.xa = random(2,5);//xa is the x acceleration
    this.ya = random(2,5);//ya is the y acceleration
    this.left;
    this.right;
    this.top;
    this.bottom;
    this.show = function(){
        this.left = this.x;     //i define left,right,top,bottom in show function so they get updated
        this.right = this.x +this.width;
        this.top = this.y;
        this.bottom = this.y +this.height;
        push();
        fill(255);
        noStroke();
        rect(this.x,this.y,this.width,this.height);
        pop();//push pop just in case i want to change square colors individually in the future
        this.x += this.xa;//adding acceleration to the squares
        this.y += this.ya;//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        if(this.x > width-this.width||this.x <0){//bouncing off the right and left wall
            this.xa *= -1;
            if(this.x > width/2){// making sure if the square spawns or glitches on the other side of the wall it doesn't get stuck, this checks which side the square is on when it touches the wall then moves it directly on the wall
                this.x = width-this.width;
            }else{
                this.x = 0;
            }
        }
        if(this.y > height-this.height||this.y <0){// same as above but for the y axis
            this.ya *= -1;
            if(this.y > height/2){
                this.y = height-this.height;
            }else{
                this.y = 0;
            }

        }

    }
}
function windowResized(){
    createCanvas(windowWidth,windowHeight- 4);//window resizing adjustment
}

您可以使用 this 查看它.只需复制和粘贴即可。

Answer 1

解决不了的问题

抱歉没有这样的东西

当场景中有许多移动物体时，碰撞解决方案并不容易。

您的直接问题

你的问题主要是因为你在假设盒子碰撞时的行进方向。您将方向乘以 -1 以反转方向。

对于 2 个对象来说都很好，但是添加第 3 个对象，您最终会把 3 个对象放在一起。每个轮流改变方向，box1 击中 box2 都彼此远离，然后在同一帧中 box1 击中 box3 现在 box1 和 box3 正在分开。你的速度是恒定的所以在三向碰撞之后总会有 2箱子沿相同方向行进但重叠。

下一帧的重叠框检测到重叠并且两个方向相反，因为它们已经在同一个方向上行进，方向开关不会帮助它们分开。

向前迈进

好吧，下面对代码的修改只是确保在可能的情况下碰撞导致盒子彼此远离。

function draw() {
    background(40);
    for (var i = 0; i < num; i++) {
        const bx1 = r[i];
        r[i].show();
        for (var j = 0; j < num; j++) {
            if (j !== i) {
                // t for top, b for bottom, r for right and l for left. 1 for first box 2 for second
                // bx for box
                const bx2 = r[j];
                const t1 = bx1.top + bx1.ya;
                const b1 = bx1.bottom + bx1.ya;
                const l1 = bx1.left + bx1.xa;
                const r1 = bx1.right + bx1.xa;
                const t2 = bx2.top + bx2.ya;
                const b2 = bx2.bottom + bx2.ya;
                const l2 = bx2.left + bx2.xa;
                const r2 = bx2.right + bx2.xa;
                // the or's mean that the condition will complete at the first passed clause
                // If not (not over lapping)  AKA is overlapping
                if (!(t1 > b2 || b1 < t2 || l1 > r2 || r1 < l2)) {
                    if (r1 >= l2) {
                        bx1.xa = -Math.abs(bx1.xa);
                        bx2.xa = Math.abs(bx2.xa);
                    }
                    if (l1 <= r2) {
                        bx1.xa = Math.abs(bx1.xa);
                        bx2.xa = -Math.abs(bx2.xa);
                    }

                    if (b1 >= t2) {
                        bx1.ya = -Math.abs(bx1.ya);
                        bx2.ya = Math.abs(bx2.ya);
                    }
                    if (t1 <= b2) {
                        bx1.ya = Math.abs(bx1.ya);
                        bx2.ya = -Math.abs(bx2.ya);
                    }
                }
            }
        }
    }
}

但这只会使问题远离重叠，现在有很多碰撞是错误的，因为没有测试来确定碰撞点

在上面的代码中，您试图从无法求解的位置求解。现实生活中的盒子永远不会重叠。现实生活中的盒子会减速和加速。完全平坦的侧面永远不会同时碰撞超过一侧。

为此，您需要使用集成。这并不难，只是将时间分成更小步骤的过程。碰撞、移动、检查重叠、分开然后返回碰撞。

Verlet 集成

此外，verlet 集成将使它变得更容易。您可以存储当前位置和先前位置，而不是将盒子速度存储为向量。

box.x = 10;
box.y = 10;
box.ox = 8;  // the boxes old position
box.oy = 8;

你如下移动一个盒子

sx = box.x - box.ox;
sy = box.y - box.oy;
box.ox = box.x;
box.oy = box.y;
box.x += sx;  // the boxes old position
box.y += sy;

当你击中某物时，你需要改变旧位置，以便为下一次迭代提供正确的方向

if(box.y > ground){
   box.y = ground - (box.y - ground); // move away from ground same dist as moved into ground
   box.oy = box.y -sy;
}

分组进行。一次全部移动，然后立即测试碰撞。不要一次移动和测试一个。

Verlet 集成更加宽容，因为它让移动速度吸收了一些错误。而不是像标准矢量方法那样全部就位。