Click and point game with array - troubleshooting

p5.js Coding Questions
3

Thank you so much for this.

I removed mousePressed function for the pink fishes since I didn’t need it. I just want them to swim around with no interaction.

I’m not sure if I put the boolean (hasBeenClicked) at the right suggested place, but it works. I can display fishes in the small aquarium.

But I have two questions:

  1. If fishblue1 is clicked first, fishblue2 will not appear in the small aquarium - even though it was clicked - as shown in the console

  2. I would like to have the blue fishes in the big aquarium disappear when mousePressed. In javascript, I simply use “display = ‘none’” to do that. I can’t seem to find the right way in p5. Is there a solution?

Here is my modified code:

let aquarium;
let inventaireblue;
let fishs = [];
let fishblue1;
let fishblue2;
let fishblueinv1;
let fishblueinv2;
let hasBeenClicked1 = false;
let hasBeenClicked2 = false;

function setup() {
  createCanvas(1200, 700);
  inventaireblue = new Inventaire(1060, 150, 150);  
  aquarium = new Aquarium(600, 350, 650);
  for (let i = 0; i < 10; i++) {
    let x = random(500, 700);
    let y = random(200, 500);
    let xspeed = random(1, 3);
    let yspeed = random(1, 3);
    let rbody = 100;
    let fscale = random(0.6, 0.8);
    fishs[i] = new Fish(x, y, rbody, color(255, 0, 204), xspeed, yspeed, fscale);
    
  }
  fishblue1 = new Fish(random(500, 700), random(200, 500), 100, color(51, 153, 255), random(1, 3), random(1, 3), random(0.6, 0.8));
  fishblueinv1 = new Fish(1050, 170, 100, color(51, 153,255), random(1,3), random(1,3), 0.3);
  fishblueinv2 = new Fish(1060, 350, 100, color(51, 153,255), random(1,3), random(1,3), 0.3);
  fishblue2 = new Fish(random(500, 700), random(200, 500), 100, color(51, 153, 255), random(1, 3), random(1, 3), random(0.6, 0.8));
}

function draw() {
  inventaireblue.show();
  aquarium.show();

  //Fishes that stay in the aquarium
  for (let i = 0; i < fishs.length; i++) {
    push();
    fishs[i].move();
    fishs[i].show();
    pop();
  }

  //Intruder fishes
  //Fish blue #1
  push();
  fishblue1.show();
  fishblue1.move();
  pop();
  //Fish blue #2
  push();
  fishblue2.show();
  fishblue2.move();
  pop();   

  //Fishes in the blue inventory
  if (hasBeenClicked1 == true) {
    fishblueinv1.show();
  }
  if (hasBeenClicked2 == true) {
  fishblueinv2.show();
  }
}

function mousePressed() {
  if(fishblue1.inside(mouseX, mouseY)){
    hasBeenClicked1 = true;
    print('fish#1 clicked');
  }
  if(fishblue2.inside(mouseX, mouseY)){
    hasBeenClicked2 = true;
    print('fish#2 clicked');
  }
}


//INVENTORY
class Inventaire {
  constructor(tempX, tempY, tempR) {
    this.x = tempX;
    this.y = tempY;
    this.r = tempR;
  }

  show() {
    fill(171, 252, 255);
    stroke(51, 153, 255);
    strokeWeight(10);
    ellipse(this.x, this.y, this.r);
  }
}

//AQUARIUM
class Aquarium {
  constructor(tempX, tempY, tempR) {
    this.x = tempX;
    this.y = tempY;
    this.r = tempR;
  }

  show() {
    fill(171, 252, 255);
    stroke(255, 0, 204);
    strokeWeight(20);
    ellipse(this.x, this.y, this.r);
  }
}

//FISH
class Fish {
  constructor(tempX, tempY, tempRbody, tempColor, tempXspeed, tempYspeed, tempScale) {
    this.x = tempX;
    this.y = tempY;
    this.color = tempColor;
    this.xspeed = tempXspeed;
    this.yspeed = tempYspeed;
    this.rbody = tempRbody;
    this.fscale = tempScale;
  }

  inside(px, py) {
    let d = dist(px, py, this.x, this.y);
    if (d < 50) {
      return true;
    } else {
      return false;
    }
  }

  changeColor(Color2) {
    this.color = Color2;
  }
  
  changeSide() {
    if (this.xspeed > 0) {
      scale (this.scale = 5, this.scale);
    } 
 }

  move() {
    let d2 = dist(this.x, this.y, aquarium.x, aquarium.y);
    if (d2 > 200 || this.y < 200) {
      this.xspeed = this.xspeed * -1;
      this.yspeed = this.yspeed * -1;
    }
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
  }

  show() {
      //corps droite
      if (this.xspeed > 0) {
        translate(this.x, this.y);
        scale(this.fscale);
        fill(this.color);
        stroke(0);
        strokeWeight(3);
        ellipse(0, 0, 100, 100);
        //queue
        triangle(- 50, 0, - 100, - 50, 0 - 100, 50);
        //aileron
        triangle(0, 10, 5, 30,  - 30, 30);
        //yeux
        fill(255);
        ellipse(15,  - 10, 30, 30);
        fill(0);
        ellipse(15, - 10, 15, 15);
      } else {    
        //corps gauche
        translate(this.x, this.y);
        scale(this.fscale);
        fill(this.color);
        stroke(0);
        strokeWeight(3);
        ellipse(0, 0, 100, 100);
        //queue
        triangle(50, 0, 100, - 50, 100, 50);
        //aileron
        triangle(0, 10,  - 5, 30, 30, 30);
        //yeux
        fill(255);
        ellipse(- 15, - 10, 30, 30);
        fill(0);
        ellipse(- 15, - 10, 15, 15);
      }
    }
}