p5.js 物体碰撞和物体纠缠

Question

我在 p5.js 中写了一些代码，看看我是否可以正确地制作一个碰撞检测系统，但是当我放入超过 2 个正方形时，正方形似乎在其他正方形内部相互碰撞。我想知道是否有办法阻止这个加上，如果你有任何关于如何做的好指示 tidy/shorten 我的代码 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 正在移动 apart.Your 速度是恒定的所以在三向碰撞之后总是是两个方向相同但重叠的盒子。

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

向前迈进了一步

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

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

p5.js 物体碰撞和物体纠缠

p5.js object collision and objects entangling

javascript

canvas

collision-detection

p5.js

无解之解

你眼前的问题

向前迈进了一步

Verlet 集成