Confusing Type Error

p5.js Coding Questions
1

I am working on a project which is a game when a player circle goes around and eats other circles. I feel like I am really close to having everything working but when it gets down to the last circle remaining, I get a type error. Can anyone give me any suggestions as to what I might be doing wrong here.
Link to Program

//function play() {
var balls = [];
var numberBalls = 10;
var canv;

let colours = ["red", "blue", "green"];

var P = 0;

var button;

mymouseX = 35;
mymouseY = 35;

let r = 25;

//SETUP FUNCTION

function setup() {
  canv = createCanvas(400, 550);
  resetSketch();
  background("black");
  strokeWeight(2);
  stroke(255);

  for (var i = 0; i < numberBalls; i++) {
    balls[i] = new Ball();

    //   console.log(balls)
  }

  textSize(20);
  fill("white");
  textAlign(CENTER);
  text("POINTS:", 100, 440);
  fill("red");
  textAlign(CENTER);
  text("Red = 3 points", 100, 470);
  fill("blue");
  textAlign(CENTER);
  text("Blue = 2 points", 100, 500);
  fill("green");
  textAlign(CENTER);
  text("Green = 1 points", 100, 530);

  var button = createButton("PUSH to START AGAIN");
  button.position(0, 300);
  button.size(200, 100);
  button.mousePressed(resetSketch);

  fill(230);
  rect(200, 300, 200, 250);
  textSize(20);
  fill("black");
  textAlign(CENTER);
  text("TOTAL", 300, 360);
  text("POINTS", 300, 390);
  text("EARNED:", 300, 420);

  for (let x = 0; x < 400; x = x + 20) {
    ranR = random(0, 255);
    ranG = random(0, 255);
    ranB = random(0, 255);
    fill(ranR, ranG, ranB);
    rect(x, 0, 20, 20);
  }

  for (let x = 0; x < 400; x = x + 20) {
    ranR = random(0, 255);
    ranG = random(0, 255);
    ranB = random(0, 255);
    fill(ranR, ranG, ranB);
    rect(x, 280, 20, 20);
  }

  for (let y = 0; y < 300; y = y + 20) {
    ranR = random(0, 255);
    ranG = random(0, 255);
    ranB = random(0, 255);
    fill(ranR, ranG, ranB);
    rect(0, y, 20, 20);
  }

  for (let y = 0; y < 300; y = y + 20) {
    ranR = random(0, 255);
    ranG = random(0, 255);
    ranB = random(0, 255);
    fill(ranR, ranG, ranB);
    rect(380, y, 20, 20);
  }
}

function resetSketch() {
  
}

//DRAW FUNCTION

function draw() {
  //  background(0);

  fill(0);
  strokeWeight(0);
  rect(20, 20, 360, 260);

  for (var i = 0; i < numberBalls; i++) {
    balls[i].display();
    balls[i].move();
    balls[i].bounce();
    circle_eat();

    fill(230);
    rect(240, 420, 340, 520);
    fill("black");
    textSize(40);
    text(P, 300, 480);

    //           console.log(balls);
  }
}

// Constructor and functions

function Ball() {
  this.x = round(random(38, 362));
  this.y = round(random(38, 262));
  this.vx = Math.floor(Math.random() * 2);
  this.vy = Math.floor(Math.random() * 2);
  //  this.red = Math.floor(Math.random() * 256);
  //  this.green = Math.floor(Math.random() * 256);
  //  this.blue = Math.floor(Math.random() * 256);
  this.colour = random(colours);

  this.move = function () {
    this.x += this.vx;
    this.y += this.vy;
  };
  this.bounce = function () {
    if (this.x > 362 || this.x < 38) this.vx = -this.vx;
    if (this.y > 262 || this.y < 38) this.vy = -this.vy;
  };
  this.display = function () {
    //    fill(this.red, this.green, this.blue);
    fill(this.colour);
    ellipse(this.x, this.y, 20, 20);
  };
  //    console.log(Ball);
}

// FUNCTION CIRCLE_EAT

function circle_eat() {
  fill("yellow");
  circle(mymouseX, mymouseY, r);
  mymouseX = mouseX;
  mymouseY = mouseY;
  if (mymouseX < 33) {
    mymouseX = 33;
  }
  if (mymouseX > 366) {
    mymouseX = 366;
  }
  if (mymouseY < 33) {
    mymouseY = 33;
  }
  if (mymouseY > 266) {
    mymouseY = 266;
  }

  for (var i = numberBalls - 1; i >= 0; i--) {
    //      for (var i = 0; i < numberBalls ; i++) {

    let d = dist(balls[i].x, balls[i].y, mymouseX, mymouseY);

    if (
      d < r &&
      balls[i].colour == "red" &&
      balls[i].colour != "blue" &&
      balls[i].colour != "green"
    ) {
      balls.splice(i, 1);
      numberBalls = numberBalls - 1;
      r = r + 3;
      P = P + 3;
    }

    if (
      d < r &&
      balls[i].colour == "blue" &&
      balls[i].colour != "red" &&
      balls[i].colour != "green"
    ) {
      balls.splice(i, 1);
      numberBalls = numberBalls - 1;
      r = r + 2;
      P = P + 2;
    }

    if (
      d < r &&
      balls[i].colour == "green" &&
      balls[i].colour != "red" &&
      balls[i].colour != "blue"
    ) {
      balls.splice(i, 1);
      numberBalls = numberBalls - 1;
      r = r + 1;
      P = P + 1;
    }
  }

  //   console.log(d);
  //   console.log(N);
  //  console.log(r);
  //  }
}
2

Would be helpful if you posted the error as well.

3

Put a else before the last two ifs …
The splice removes the last element and afterwards the check is applied where the balls array is already empty…

Cheers
— mnse

PS: Sorry, can’t show you more details as i’m on mobile currently where editing a thread is such a mess :slight_smile:
PPS: think about refactoring your code a bit. This can be done with much less code … :wink: