多对象交集与移除问题[processing/p5.js]

Question

我是堆栈的新手，不太清楚如何使用它。但我在这里。我正在从事一个生态系统项目，我有一只动物 class，有 2 种不同的性别（0 为女性，1 为男性）。当 2 个不同的性别相互交叉时，我想删除这 2 个对象并在该位置添加一对（不同的对象，静态的）对象。我有点做了，但它只工作了几秒钟。然后代码就中断了。在控制台中它说， “未捕获的类型错误：无法读取属性未定义的‘相交’”

这是处理论坛上的问题，以防我得到可能对其他人有帮助的解决方案：https://discourse.processing.org/t/multiple-object-intersection-and-removal/22900/2

这是 sketch.js 文件：

var animats = [];

var couples = [];

function setup() {
frameRate(30);
             
createCanvas(displayWidth, 470);
            
for(var i = 0; i < 50; i++) 
{
animats[i] = new Animat(random(0, width), random(0, height));

}

}

function draw() {

background(255,100,100);
        
for(var i = animats.length-1; i >= 0; i--) {    
             
animats[i].birth(); 
                
animats[i].grow();

 for(var j = i; j >= 0; j--) {
                                      
   if(j != i && animats[i].intersects(animats[j])) {
                                                        
   animats.splice(i, 1);
                                                              
   animats.splice(j, 1);
                            
                                                     
 }
                             
 }
 }  

 }

这是动画 class 文件：

function Animat(x, y) {
            this.x = x;
            this.y = y;
            
            this.gender;
            var g = random(0,1);
            var c;
                            
                            if(g > 0.5) {
                                            c = 0;
                                this.gender = 0;
                            } else {
                                            c = 255;
                                this.gender = 1;
                            }
            
            this.speed = 1;

            this.age = 0;
            this.length = 0.5;
            
            this.birth = function() {
                            
                            //gender
                            
                            //create
                            noStroke();
                            fill(c);
                            text("n", this.x, this.y, this.length, this.length);
                            ellipse(this.x, this.y, this.length * 2, this.length * 2);
                            
                            
                            //move
                            
                            switch(floor(random(0,4))) {
                                            case 0:
                                                            this.x += this.speed;
                      break;
                                            case 1:
                                                            this.y += this.speed;
                      break;
                                            case 2:
                                                            this.x -= this.speed;
                      break;
                                            case 3:
                                                            this.y -= this.speed;
                      break;
                                            default:
                                                            this.x++;
                                                            this.y--;
                            }
                            
                //bounce
                            
                            if(this.x > width || this.x < 4){
                                            this.speed *= -1;
                            }
                            if(this.y > height || this.y < 4){
                                            this.speed *= -1;
                            }
                                            
            }

            this.grow = function() {
                            this.age += 0.01;
                            this.length += 0.05;
                            
                            //age checks
                            
                            if(this.age > 10) {
                                            this.speed + 5;
                            } else if(this.age > 21) {
                                            this.length = 25;
                                            this.speed = this.speed
                                            //console.log("max age:" + this.age)
                            } else if(this.age > 70) {
                                            //die
                            } else {
                                            
                            }
                            
                            //length checks 
                            
                            if(this.length > 25) {
                                            this.length = 25;
                                         //console.log("max length");
                            }
            }
            
            //relationship
            
            this.intersects = function(other) {
                            var d = dist(this.x, this.y, other.x, other.y);
                            var r = this.length + other.length;
                            
                            if(d < r) {
                                            if(((this.gender == 0) && (other.gender == 1)) || ((this.gender == 1) && (other.gender == 0))) {
                                                return true;
                                            } else {
                                                            this.speed *= -1;
                                            }
                                            
                            } else {
                                            return false;
                            }
            }
            
            //mate
            
         this.couple = function() {
                            if(((this.gender == 0) && (other.gender == 1)) || ((this.gender == 1) && (other.gender == 0))) {
                                                return true;
                                            } else {
                                                            this.speed *= -1;
                                            }
            }
            
            //die
            
         /*this.die = function() {
                    if(this.age > 50) {
                                            return true;
                            } else {
                                            return false;
                            }
   }*/

}

这是我得到的结果的代码笔 link： https://codepen.io/AbrarShahriar/pen/XWXwLPM

Answer 1

尝试将嵌套的 for 循环更改为：

for (var i = animats.length - 1; i >= 0; i--) {
  animats[i].birth();
  animats[i].grow();
  for (var j = i; j >= 0; j--) {
    if (j != i && animats[i].intersects(animats[j])) {
      animats.splice(i, 1);
      animats.splice(j, 1);
      break; //exit the inner loop after a match
    }
  }
}

也就是说，在两个animats耦合并从数组中移除后，添加一个break;。该错误可能是由于您试图调用已删除的 animat 的 intersects 方法引起的。

Answer 2

只要 j 的 for 循环还没有结束，您就需要保留 animats[i]。

这是您需要修复的代码：

for(var i = animats.length-1; i >= 0; i--) {
    animats[i].birth();
    animats[i].grow();
    let remove = false; // mark 'i' as NOT REMOVE by default
                            
    for(var j = i; j >= 0; j--) {
        if(j != i && animats[i].intersects(animats[j])) {
            remove = true; // mark 'i' as to remove when collision detected
            animats.splice(j, 1);
        }
    }

    if (remove) { // remove 'i' after compared to all 'j'
        animats.splice(i, 1);
    }
}

多对象交集与移除问题[processing/p5.js]

Multiple object intersection and removal problem [ processing/p5.js ]

javascript

processing

p5.js