Help !! My simple, interactive and dangerous "program". !!! (Chansey and Robots)

DDv2FF

This is one of my first projects, and I have a 3 problem that I can´t resolve! This code, draws four robots and its antennas, and there is a Chansey (a pokemon), in the middle of the canvas, she gets mad if you turnOn the robots switchers.
My First problem is, I don´t know if there is a way to make a Chansey Class, because I don´t feel right with her in the Robot Class. The problem is, that she needs the information of the "turn on" behaviour.
My Second problem is that I can´t remove the chanseyMessage(); once that the user reset the robots. (there is a try, but it didnt work).
And my last problem, I don´t know how to make a local counter for the antennas. When the four antennas are on, something is going to happen Hehe.

    var chansey;

    function preload() {
       chansey = loadImage("https://"+"image.ibb.co/kZzhax/pzbykg5va9uz.png");
    }
    let robots = [];

    function setup() {
       createCanvas(700, 600);
       background(20);
       for (var i = 0; i < 2; i++) {
          for (var j = 0; j < 2; j++) {
             robots.push(new Robot(i * 500 + 50, j * 400 + 75, 50));
          }
       }
    }

    function draw() {
       //drawing robot army.
       for (let robot of robots) {
          robot.drawRobot();
          robot.chanseyMESSAGE();
       }
       //Chansey
       image(chansey, 290, 250, 100, 100);
       //button "make chansey happy"
       stroke(255);
       fill(0);
       rect(310, 0, 60, 30);
       fill(255);
       textSize(15);
       text("Reset", 320, 20);
    }

    function mousePressed() {
       for (let antennas of robots) {
          antennas.turnOn(mouseX, mouseY);
       }
       //this make Chansey happy
       if (mouseX < 375 && mouseX > 315 && mouseY < 30 && mouseY > 0) {
          for (let colorAntennaReset of robots) {
             colorAntennaReset.b = 1;
             colorAntennaReset.red = 0;
             colorAntennaReset.green = 100;
             colorAntennaReset.blue = 300;
             //so now the chanseyMESSAGE disapear
             colorAntennaReset.chanseyTURN = false;
          }
       }
    }
    class Robot {
       constructor(x, y, t) {
          this.x = x;
          this.y = y;
          this.t = t;
          this.swicherX = this.x + 25 / 50 * this.t;
          this.swicherY = this.y - 15 / 50 * this.t;
          this.swicherRadius = (15 / 50 * this.t) / 2;
          //swicher color
          this.b = 0;
          //roboteyes color
          this.red = 0;
          this.green = 100;
          this.blue = 300;
          //chansey inside robot class...
          this.chanseyTURN = false;
       }
       drawRobot() {
          //stick of the antenna
          stroke(0, 100, 300);
          line(this.x + 2.5 / 5 * this.t, this.y + this.t / 10, this.x + 2.5 / 5 * this.t, this.y - 3 / 5 * this.t);
          //swicher ball turnOn
          stroke(100);
          fill(255, 100, this.b);
          ellipse(this.x + 25 / 50 * this.t, this.y - 15 / 50 * this.t, 15 / 50 * this.t, 15 / 50 * this.t);
          //robot head
          stroke(0);
          fill(0, 0, 150);
          rect(this.x - this.t / 10, this.y + this.t / 5, 60 / 50 * this.t, this.t / 5);
          fill(100);
          rect(this.x, this.y, this.t, 4.5 / 5 * this.t);
          //eyes
          fill(this.red, this.green, this.blue);
          rect(this.x + 9 / 50 * this.t, this.y + this.t / 5, this.t / 5, this.t / 10);
          rect(this.x + 3.2 / 5 * this.t, this.y + 1 / 5 * this.t, this.t / 5, this.t / 10);
          //mouth
          line(this.x + 1 / 5 * this.t, this.y + 3 / 5 * this.t, this.x + 4 / 5 * this.t, this.y + 3 / 5 * this.t);
       }
       turnOn(suicidetryX, suicidetryY) {
          let proxToAntenna = dist(suicidetryX, suicidetryY, this.swicherX, this.swicherY);
          if (proxToAntenna < this.swicherRadius) {
             //changing antenna color
             this.b = 255;
             // changing roboteyes color
             this.red = 255;
             this.green = 50;
             this.blue = 0;
             //making chansey ANGRY ..
             this.chanseyTURN = true;
          }
       }
       chanseyMESSAGE() {
          if (this.chanseyTURN) {
             fill(255);
             textSize(20);
             text("STOP IT", 303, 370);
          } else { //DONT SHOW THE MESSAGE }
       }
    }

I post it in the wrong place the first tme.

TfGuy44

Let's address your problems in order of easiness.

First up is problem #2: The issue is that the Chansey's message doesn't go away, at all, ever. This is because once the message is drawn, there is nothing that clears the background to make it disappear. That is, nothing is ever drawn over the message, so it remains. The fix is thus a simple one: We redraw a clean background every frame, and then redraw everything on top of the clean background. Since you are already redrawing the robots and Chansey on every frame, the fix is easy - just add a call to background() at the start of draw():

// ...

function draw() {
  background(20);

// ...

TfGuy44

Next, #3: A counter for robot switches.

First, you will need a counter variable to remember the count in:

let counter = 0

When does this count increase? When a robot's antenna switches from off to on:

  // ... In the Robot class...
  turnOn(suicidetryX, suicidetryY) {
    let proxToAntenna = dist(suicidetryX, suicidetryY, this.swicherX, this.swicherY);
    if (proxToAntenna < this.swicherRadius) {
      if( this.b == 0 ){ // If the robot was off, but is now turning on..
        counter++; // Add one to the counter.
      }
      //changing antenna color
      // ...

Of course an unseen counter is not helpful for debugging it, so let's draw the counter on screen too.

  // ...
    robot.chanseyMESSAGE();
  }
  fill(0,255,0);
  text( counter, 300, 400);
  //Chansey
  // ...

TfGuy44

The code so far:

var chansey;
let robots = [];
let counter = 0;
var https = "https://";

function preload() {
  chansey = loadImage( https + "image.ibb.co/kZzhax/pzbykg5va9uz.png");
}

function setup() {
  createCanvas(700, 600);
  background(20);
  for (var i = 0; i < 2; i++) {
    for (var j = 0; j < 2; j++) {
      robots.push(new Robot(i * 500 + 50, j * 400 + 75, 50));
    }
  }
}

function draw() {
  background(20);
  //drawing robot army.
  for (let robot of robots) {
    robot.drawRobot();
    robot.chanseyMESSAGE();
  }
  fill(0,255,0);
  text( counter, 300, 400);
  //Chansey
  image(chansey, 290, 250, 100, 100);
  //button "make chansey happy"
  stroke(255);
  fill(0);
  rect(310, 0, 60, 30);
  fill(255);
  textSize(15);
  text("Reset", 320, 20);
}

function mousePressed() {
  for (let antennas of robots) {
    antennas.turnOn(mouseX, mouseY);
  }
  //this make Chansey happy
  if (mouseX < 375 && mouseX > 315 && mouseY < 30 && mouseY > 0) {
    for (let colorAntennaReset of robots) {
      colorAntennaReset.b = 1;
      colorAntennaReset.red = 0;
      colorAntennaReset.green = 100;
      colorAntennaReset.blue = 300;
      //so now the chanseyMESSAGE disapear
      colorAntennaReset.chanseyTURN = false;
    }
  }
}

class Robot {
  constructor(x, y, t) {
    this.x = x;
    this.y = y;
    this.t = t;
    this.swicherX = this.x + 25 / 50 * this.t;
    this.swicherY = this.y - 15 / 50 * this.t;
    this.swicherRadius = (15 / 50 * this.t) / 2;
    //swicher color
    this.b = 0;
    //roboteyes color
    this.red = 0;
    this.green = 100;
    this.blue = 300;
    //chansey inside robot class...
    this.chanseyTURN = false;
  }
  drawRobot() {
    //stick of the antenna
    stroke(0, 100, 300);
    line(this.x + 2.5 / 5 * this.t, this.y + this.t / 10, this.x + 2.5 / 5 * this.t, this.y - 3 / 5 * this.t);
    //swicher ball turnOn
    stroke(100);
    fill(255, 100, this.b);
    ellipse(this.x + 25 / 50 * this.t, this.y - 15 / 50 * this.t, 15 / 50 * this.t, 15 / 50 * this.t);
    //robot head
    stroke(0);
    fill(0, 0, 150);
    rect(this.x - this.t / 10, this.y + this.t / 5, 60 / 50 * this.t, this.t / 5);
    fill(100);
    rect(this.x, this.y, this.t, 4.5 / 5 * this.t);
    //eyes
    fill(this.red, this.green, this.blue);
    rect(this.x + 9 / 50 * this.t, this.y + this.t / 5, this.t / 5, this.t / 10);
    rect(this.x + 3.2 / 5 * this.t, this.y + 1 / 5 * this.t, this.t / 5, this.t / 10);
    //mouth
    line(this.x + 1 / 5 * this.t, this.y + 3 / 5 * this.t, this.x + 4 / 5 * this.t, this.y + 3 / 5 * this.t);
  }
  turnOn(suicidetryX, suicidetryY) {
    let proxToAntenna = dist(suicidetryX, suicidetryY, this.swicherX, this.swicherY);
    if (proxToAntenna < this.swicherRadius) {
      if( this.b == 0 ){ // If the robot was off, but is now turning on..
        counter++; // Add one to the counter.
      }
      //changing antenna color
      this.b = 255;
      // changing roboteyes color
      this.red = 255;
      this.green = 50;
      this.blue = 0;
      //making chansey ANGRY ..
      this.chanseyTURN = true;
    }
  }
  chanseyMESSAGE() {
    if (this.chanseyTURN) {
      fill(255);
      textSize(20);
      text("STOP IT", 303, 370);
    } else { 
      //DONT SHOW THE MESSAGE
    }
  }
}

Does it work? Not really. For one, the reset button doesn't reset the counter. Each robot is displaying it's own Chansey message. And we can use the counter to determine if Chansey is angry.

TfGuy44

Here's some nice changes that resolve a few issues:

var chansey;
let robots = [];
let counter = 0;
var https = "https://";

function preload() {
  chansey = loadImage( https + "image.ibb.co/kZzhax/pzbykg5va9uz.png");
}

function setup() {
  createCanvas(700, 600);
  background(20);
  for (var i = 0; i < 2; i++) {
    for (var j = 0; j < 2; j++) {
      robots.push(new Robot(i * 500 + 50, j * 400 + 75, 50));
    }
  }
}

function draw() {
  background(20);
  //drawing robot army.
  for (let robot of robots) {
    robot.drawRobot();
  }
  // chansey MESSAGE
  if ( counter > 0 ) {
    fill(255);
    textSize(20);
    text("STOP IT", 303, 370);
  }
  // counter
  fill(0, 255, 0);
  text( counter, 300, 400);
  // Chansey image
  image(chansey, 290, 250, 100, 100);
  //button "make chansey happy" AKA reset
  stroke(255);
  fill(0);
  rect(310, 0, 60, 30);
  fill(255);
  textSize(15);
  text("Reset", 320, 20);
}

function mousePressed() {
  for (let antennas of robots) {
    antennas.turnOn(mouseX, mouseY);
  }
  //this make Chansey happy
  // clicking the reset button
  if (mouseX < 375 && mouseX > 315 && mouseY < 30 && mouseY > 0) {
    for (let robot of robots) {
      robot.activated = false;
    }
    counter = 0;
  }
}

class Robot {
  constructor(x, y, t) {
    this.x = x;
    this.y = y;
    this.t = t;
    this.swicherX = this.x + 25 / 50 * this.t;
    this.swicherY = this.y - 15 / 50 * this.t;
    this.swicherRadius = (15 / 50 * this.t) / 2;
    //swicher color
    this.b = 0;
    //roboteyes color
    this.red = 0;
    this.green = 100;
    this.blue = 300;
    this.activated = false;
  }
  drawRobot() {
    // Set colors based on activated state.
    if(this.activated){
      this.b = 255;
      this.red = 255;
      this.green = 50;
      this.blue = 0;
    } else {
      this.b = 0;
      this.red = 0;
      this.green = 100;
      this.blue = 300;
    }    
    //stick of the antenna
    stroke(0, 100, 300);
    line(this.x + 2.5 / 5 * this.t, this.y + this.t / 10, this.x + 2.5 / 5 * this.t, this.y - 3 / 5 * this.t);
    //swicher ball turnOn
    stroke(100);
    fill(255, 100, this.b);
    ellipse(this.x + 25 / 50 * this.t, this.y - 15 / 50 * this.t, 15 / 50 * this.t, 15 / 50 * this.t);
    //robot head
    stroke(0);
    fill(0, 0, 150);
    rect(this.x - this.t / 10, this.y + this.t / 5, 60 / 50 * this.t, this.t / 5);
    fill(100);
    rect(this.x, this.y, this.t, 4.5 / 5 * this.t);
    //eyes
    fill(this.red, this.green, this.blue);
    rect(this.x + 9 / 50 * this.t, this.y + this.t / 5, this.t / 5, this.t / 10);
    rect(this.x + 3.2 / 5 * this.t, this.y + 1 / 5 * this.t, this.t / 5, this.t / 10);
    //mouth
    line(this.x + 1 / 5 * this.t, this.y + 3 / 5 * this.t, this.x + 4 / 5 * this.t, this.y + 3 / 5 * this.t);
  }
  turnOn(suicidetryX, suicidetryY) {
    let proxToAntenna = dist(suicidetryX, suicidetryY, this.swicherX, this.swicherY);
    if (proxToAntenna < this.swicherRadius) {
      if ( !this.activated ) { // If the robot was off, but is now turning on..
        counter++; // Add one to the counter.
      }
      this.activated = true;
    }
  }
}

Notice that each robot now has an "activated" variable that tracks if it has been clicked on. The drawRobot() function now uses that variable to determine the robot's colors. This also simplified a lot of the logic for resetting the robots, and the reset button now resets the counter too.

And now to address problem #1: Oh wait, we just did. There's nothing about the Chansey inside the robot class. Chansey only cares about what the value of the counter variable is!

DDv2FF

I realised the background thing just a few minits before you answered it, and I laughted so much, because of the silly careless !!
I love the way you think it !! Thanks so much for the not depending robotClass-chansey-message.
The new if statement that supervises the color is a great idea, now I dont need a behavior for that. I could use this.activated in the if statement to make the chansey message, and make a different message for each robot. And then make a behavior in robotClass dependent of the counter, and make something if the counter is 4. Can I ?

DDv2FF

This lines

   if ( !this.activated ) { // If the robot was off, but is now turning on..
        counter++; // Add one to the counter.
      }

are a little consusing tought.

TfGuy44

Realize that you only want to increase the counter when a robot SWITCHES from being off to on. If a robot is ALREADY on and you click again, well, you don't want to increase the counter AGAIN for that robot. This check - making sure a robot is OFF (not activated), then incrementing the counter, then turning it on - makes sure that each robot can only add to the counter once when it switches on.

There are some other things you could do now.

You could make Chansey into a class. This would simplify the logic inside draw() even more. This might be a good idea if the logic behind how Chansey works is going to get more complicated, for example, because you want to display more than one message. For example:

if( counter == 1 ) {
  text("Even one is too many!", ... );
} else if( counter == 2) {
  text("Stop turning the robots on!", ... );
} else if( counter == 3) {
  text("Stop it NOW!", ... );
} else if( counter == 4) {
  text("OH NO!", ... );
} 

You might also look into using translate(), push(), and pop(). This will help simplify the drawing of your robots (as you won't constantly need to be adding this.x and this.y to all your positions).

DDv2FF

Thank you so much !! Got it ;D