p5.js objects in an array collision detection

Question

So, this issue is similar but is not the same as this question so don't flag as a duplicate question. If I create two separate rectangles like this:

//rec is an object I made for the rectangles
rect1 = new rec(random(width-40), random(height-40), 40, 40);
rect2 = new rec(random(width-40), random(height-40), 40, 40);

my code works fine.

but if i create an array of rectangles like this:

//r is an array I made and rec is an object I made for the rectangles
for(var i = 0;i < 10;i++) {
    r[i] = new rec(random(width-40), random(height-40), 40, 40); 
}

I can't call any variables inside the object like this:

console.log(r[1].x); //returns: Uncaught TypeError: Cannot read property 'x' of undefined

So, here is the code i wrote for object collision in p5.js:

var rect1;
var r;
var num;
function setup(){
    r = [];
    num = 2;
    createCanvas(windowWidth,windowHeight- 4);
    for(var i = 0;i < num; i++){

        r = new rec(random(width-40),random(height-40),40,40);

    }

}

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


            if(r[i].x + r[i].width+r[i].xa >= r[j].x && r[i].y +r[i].height >=r[j].y && r[i].y<=r[j].y +r[j].height && r[i].x + r[i].xa <= r[j].x + r[j].width){
                r[i].xa *= -1;
                r[j].xa *= -1;

            }
            if(r[i].y + r[i].height + r[i].ya>= r[j].y && r[i].x +r[i].width>=r[j].x && r[i].x<=r[j].x + r[j].height && r[i].y + r[i].ya <= r[j].y + r[j].height){
                r[i].ya *= -1;
                r[j].ya *= -1;
            }
        }    
    }


}
function rec(x,y,wid,hei){
    this.x = x;
    console.log(this.x);
    this.y = y;
    this.width = wid;
    this.height= hei;
    this.xa = random(2,5);
    this.ya = random(2,5);
    this.show = function(){
        this.x;
        this.y;
        fill(255);
        noStroke();
        rect(this.x,this.y,this.width,this.height);
        this.x += this.xa;
        this.y += this.ya;
        if(this.x > width-this.width||this.x <0){
            this.xa *= -1;
            if(this.x > width/2){
                this.x = width-this.width;
            }else{
                this.x = 0;
            }
        }
        if(this.y > height-this.height||this.y <0){
            this.ya *= -1;
            if(this.y > height/2){
                this.y = height-this.height;
            }else{
                this.y = 0;
            }

        }

    }
}
function windowResized(){
    createCanvas(windowWidth,windowHeight- 4);
}

JMP · Accepted Answer · 2017-10-01 04:10:55Z

In your code, you write:

for(var i = 0;i < num; i++){

    r = new rec(random(width-40),random(height-40),40,40);

}

but you should have:

for(var i = 0;i < num; i++){

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

}

Also, in draw():

  r.show();

needs to be:

  r[1].show();

or similar.

Add:

r[0].show();

and you can see your code working as it should! Just need to add the rest of the rectangles...

Here is the demo:

var rect1;
var r;
var num;

function setup() {
  r = [];
  num = 2;
  createCanvas(windowWidth, windowHeight - 4);
  for (var i = 0; i < num; i++) {
    r[i] = new rec(random(width - 40), random(height - 40), 40, 40);
  }
}

function draw() {
  background(40);
  r[0].show();
  r[1].show();
  for (var i = 0; i < num; i++) {
    for (var j = 0; j < num; j++) {
      if (r[i].x + r[i].width + r[i].xa >= r[j].x && r[i].y + r[i].height >= r[j].y && r[i].y <= r[j].y + r[j].height && r[i].x + r[i].xa <= r[j].x + r[j].width) {
        r[i].xa *= -1;
        r[j].xa *= -1;
      }
      if (r[i].y + r[i].height + r[i].ya >= r[j].y && r[i].x + r[i].width >= r[j].x && r[i].x <= r[j].x + r[j].height && r[i].y + r[i].ya <= r[j].y + r[j].height) {
        r[i].ya *= -1;
        r[j].ya *= -1;
      }
    }
  }
}

function rec(x, y, wid, hei) {
  this.x = x;
  this.y = y;
  this.width = wid;
  this.height = hei;
  this.xa = random(2, 5);
  this.ya = random(2, 5);
  this.show = function() {
    this.x;
    this.y;
    fill(255);
    noStroke();
    rect(this.x, this.y, this.width, this.height);
    this.x += this.xa;
    this.y += this.ya;
    if (this.x > width - this.width || this.x < 0) {
      this.xa *= -1;
      if (this.x > width / 2) {
        this.x = width - this.width;
      } else {
        this.x = 0;
      }
    }
    if (this.y > height - this.height || this.y < 0) {
      this.ya *= -1;
      if (this.y > height / 2) {
        this.y = height - this.height;
      } else {
        this.y = 0;
      }
    }
  }
}

function windowResized() {
  createCanvas(windowWidth, windowHeight - 4);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>

Collectives™ on Stack Overflow

p5.js objects in an array collision detection

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related