# Confusing Type Error

**URL:** <https://discourse.processing.org/t/confusing-type-error/37253>\
**Category:** Coding Questions\
**Created:** [May 31, 2022, 5:06pm UTC](https://discourse.processing.org/t/confusing-type-error/37253 "2022-05-31T17:06:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shodai](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@shodai](https://discourse.processing.org/u/shodai)\
**Post date:** [May 31, 2022, 5:06pm UTC](https://discourse.processing.org/t/confusing-type-error/37253/1 "2022-05-31T17:06:54Z")

</div>

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](https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Feditor.p5js.org%2FEricGray%2Fsketches%2FYa2m8YoeU&data=05%7C01%7Cbrad.strassburger%40wcdsb.ca%7C2324ebd647334257ad0f08da41ab6ca1%7C723db89317ed44ec8613011938c37276%7C0%7C0%7C637894501944831237%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C2000%7C%7C%7C&sdata=%2FpLK5EMSF9kmd16Az4R1Zj3%2FDjtF1LC4yyHM8vk7oYY%3D&reserved=0)

```auto
//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);
  // }
}

```

---

<div class="post-metadata">

**Author:** ![The\_Traveler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/the_traveler/32/16252_2.png) [@The\_Traveler](https://discourse.processing.org/u/The_Traveler)\
**Post date:** [May 31, 2022, 5:17pm UTC](https://discourse.processing.org/t/confusing-type-error/37253/2 "2022-05-31T17:17:38Z")

</div>

Would be helpful if you posted the error as well.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [May 31, 2022, 5:30pm UTC](https://discourse.processing.org/t/confusing-type-error/37253/3 "2022-05-31T17:30:45Z")

</div>

> [@shodai](#):
>
> ```auto
> 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;
> } 
> else 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;
> } 
> else 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;
> }
> 
> ```

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 🙂  
PPS: think about refactoring your code a bit. This can be done with much less code … 😉