P5.js: p5js- Uncaught TypeError: Cannot read property 'eats' of undefined (sketch: line 76)

[kathyveloso]

Hi guys,

Can someone please help me with what I'm doing wrong here. I'm completely new to programming, and am currently learning p5js at university. I'm trying to create 'cells' floating around in space, and when they hit each other they combine together. It works for a minute but then I get an error "Uncaught TypeError: Cannot read property 'eats' of undefined (sketch: line 76)"

This is my code:

function Cell(x, y,r) {
this.x = x;
this.y = y;
this.r = r;
this.speedx = random(-1,1);
this.speedy = random(-1,1);
this.width2 = 0.5;
this.col= color(255);

this.show= function () {
fill(this.col);
ellipse(this.x,this.y,this.r*2);
}

this.move= function () {
this.x=this.x+ this.speedx;
this.y=this.y+ this.speedy;
}

this.bounce= function (){
if(this.x > width || this.x < 0) {
this.speedx = -this.speedx;
}
if(this.y > height || this.y < 0) {
this.speedy = -this.speedy;
}
}

// this.changeColor = function (){
//this.col = color(random(255), random (255), random(255));
//}

this.eats = function(other) {
var d= dist(this.x, this.y, other.x, other.y);
if (d < this.r + other.r) {
var sum = PI * this.r * this.r + PI * other.r * other.r;
this.r = sqrt(sum / PI);
//this.r += other.r;
return true;
} else {
return false;
}
}

// this.intersects = function(other){
// var d= dist(this.x, this.y, other.x, other.y);
//if (d < this.r + other.r) {
//var sum = PI * this.r * this.r + PI * other.r * other.r;
//this.r = sqrt(sum / PI);
//this.r += other.r;
//return true;
//} else {
//return false;
//}
//}

}

var cells = [];

function setup() {
createCanvas(600, 600);
for(var i=0; i<50; i++) {
cells[i] = new Cell(random(width), random (height),10);
}
}

function draw() {
background(0);
for(var i=cells.length-1; i>=0; i--) {
cells[i].show();
cells[i].move();
cells[i].bounce();

for(var j=cells.length-1; j>=0; j--) {
if (j != i && cells[i].eats(cells[j])) {
// cells[i].changeColor();
// cells[j].changeColor();
cells.splice(j, 1);
}
}
}
}

[tawez]

Please, wrap your code like this:

```javascript
// Your code goes here
```

It will be easier to follow

[kathyveloso]

@tawez thanks for that

// function Cell(x, y,r) {
  this.x = x;
    this.y = y;
    this.r = r;
    this.speedx = random(-1,1);
    this.speedy = random(-1,1);
    this.width2 = 0.5;

  this.show= function () { 
  ellipse(this.x,this.y,this.r*2);
  }

  this.move= function () {
  this.x=this.x+ this.speedx;
  this.y=this.y+ this.speedy;
  }

  this.bounce= function (){
  if(this.x > width || this.x < 0) {
  this.speedx = -this.speedx;
        }
  if(this.y > height || this.y < 0) {
  this.speedy = -this.speedy;
    }
  }


  this.combines= function(other) {
    var d= dist(this.x, this.y, other.x, other.y);
    if (d < this.r + other.r) {
     // var sum = PI * this.r * this.r + PI * other.r * other.r;
      //this.r = sqrt(sum / PI);
      this.r += other.r*0.5;
      return true;
    } else {
      return false;
    }
  }

}

var cells = [];

function setup() {
  createCanvas(600, 600);
   for(var i=0; i<50; i++) {
   cells[i] = new Cell(random(width), random (height),10);
}
}

function draw() {
  background(0);
  for(var i=cells.length-1; i>=0; i--) {
  cells[i].show();
  cells[i].move();
  cells[i].bounce();

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

[limzykenneth]

It is possible for you to splice out the next cell for i at this line cells.splice(j, 1); when j > cells.length-1

Normally if it is to do with debugging your own code, please post on the forum, github issue is more for feature requests and bug tracking. Thanks!

[kathyveloso]

Hi @limzykenneth

Thanks heaps for your help! I figured out how to fix it :)

[AbrarShahriar]

@kathyveloso it would be a great help if you tell how you solved it. I am working on an ecosystem and in the saw situation as you were once. Thanks in advance 🙂