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

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);

  }


}

Answers

  • Answer ✓

    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);   
    }
    
  • edited March 2017

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

  • 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);
      }
    }
    
Sign In or Register to comment.