How do you make the button disappear once you've clicked it?

maryjuarez

Any help is much appreciated! Here is my code:

float x = 230;
float y = 200;
float w = 150;
float h = 80;
int state = 0; 
PImage doctor;


void setup() {
  size(1280, 836);
  background(255);
  stroke(0);
  noFill();

  doctor = loadImage("doctor office.jpg");
}


void draw() {

   //draw button 
  rect(x, y, w, h);
  fill(255);



  //hover over button to change color
  if (mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h) {
    fill(0);
  }



  // state machine 
  if (mousePressed && mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h) {
    state = 1; 
  } else {
    state = 0;
  }


  if (state == 1) {
   background(200);
   image(doctor,0,0, width, height);

  }


}

kfrajer

You are almost there.

On a side note, you are better off creating a class for button. If you want to see it, say so below.

For now, check the code below.

Kf

float x = 230;
float y = 200;
float w = 150;
float h = 80;
int state = 0;
PImage doctor;


void setup() {
  size(1280, 836);
  background(255);
  stroke(0);
  noFill();

  doctor = loadImage("doctor office.jpg");
}

void draw() {

  // state machine
  if (mousePressed && mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h) {
    state = 1;
  } else {
    state = 0;
  }    

  If(state==0) {
     drawMyButton();
  }

  if (state == 1) {
     background(200);
     image(doctor,0,0, width, height); 
  } 
}


void      drawMyButton(){     
  //hover over button to change color
  if (mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h) {
    fill(255,25,25);        
  }
   else { 
      fill(0);
   }

  rect(x, y, w, h);   
}

maryjuarez

I would love to see the button as a class! Except this code doesn't make the button disappear after clicking on it

kfrajer

Right... you need to add background(0) (or your favorite color) to clear the screen every time draw() is executed. Add this line as your first line in the draw function.

As a class see below.

Kf

float x = 230;
float y = 200;
float w = 150;
float h = 80;
boolean state = false;
PImage doctor;

Button but; 


void setup() {
  size(1280, 836);
  background(255);
  stroke(0);
  noFill();

  but=new Button(x, y, w, h); 
  doctor = loadImage("doctor office.jpg");
}

void draw() {
  background(64);

  // state machine
  if (mousePressed && but.mouseOnButton()) 
    state = !state;

  if (but.mouseOnButton()) {
    fill(255, 25, 25);
  } else {
    state = false;
    fill(0);
  }   

  if (state==false) {
    but.draw();
  } else {
    background(200);
    image(doctor,0,0, width, height);
  }
}


class Button {
  float xx = 230;
  float yy = 200;
  float ww = 150;
  float hh = 80;

  Button(float inx, float iny, float inw, float inh) {
    xx=inx;
    yy=iny;
    ww=inw;
    hh=inh;
  }

  void draw() {
    rect(xx, yy, ww, hh);
  }

  boolean mouseOnButton() {
    return (mouseX>xx && mouseX <xx+ww && mouseY>yy && mouseY <yy+hh);
  }
}