Write a Button class (see Example 5-5 for a non-object-oriented button). The button class should register when a mouse is pressed over the button and change color. Create button objects of different sizes and locations using an array. Before writing the main program, sketch out the Button class. Assume the button is off when it first appears. Here is a code framework:
class Button  {    
  // Button location and size
  float x;   
  float y;   
  float w;   
  float h;   
  // Is the button on or off?
  boolean on;  

  // Constructor initializes all variables
  Button(float tempX, float tempY, float tempW, float tempH)  {    
    x  = tempX;   
    y  = tempY;   
    w  = tempW;   
    h  = tempH;   
    on = false;  // Button always starts as off
  }    

  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________

  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________
  ______________________________________________
}
Example
// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Exercise 9-8: Write a Button class (see Example 5-5 for a non-object-oriented button). The button 
// class should register when a mouse is pressed over the button and change color.  Create button objects 
// of different sizes and locations using an array. Before writing the main program, sketch out the 
// Button class. Assume the button is off  when it first appears.  

// An array of buttons
Button[] buttons = new Button[6];

void setup() {
  size(600,200);
  smooth();
  // A loop to evenly space out the buttons along the window
  for (int i = 0; i < buttons.length; i++) {
    buttons[i] = new Button(i*100+25,height/2-25,50,50); 
  }
}

void draw() {
  background(255);
  // Show all the buttons
  for (int i = 0; i < buttons.length; i++) {
    buttons[i].display(); 
  }
}

void mousePressed() {
  // When the mouse is pressed, we must check every single button
  for (int i = 0; i < buttons.length; i++) {
    buttons[i].click(mouseX,mouseY); 
  }
}

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Exercise 9-8: Write a Button class (see Example 5-5 for a non-object-oriented button). The button 
// class should register when a mouse is pressed over the button and change color.  Create button objects 
// of different sizes and locations using an array. Before writing the main program, sketch out the 
// Button class. Assume the button is off  when it first appears.  

// Button class

class Button  {    

  // Button location and size
  float x;   
  float y;   
  float w;   
  float h;   
  // Is the button on or off?
  boolean on;  

  // Constructor initializes all variables
  Button(float tempX, float tempY, float tempW, float tempH)  {    
    x  = tempX;   
    y  = tempY;   
    w  = tempW;   
    h  = tempH;   
    on = false;  // Button always starts as off
  }    

  void click(int mx, int my) {
    // Check to see if a point is inside the rectangle
    if (mx > x && mx < x + w && my > y && my < y + h) {
      on = !on;
    }
  }

  // Draw the rectangle
  void display() {
    rectMode(CORNER);
    stroke(0);
    // The color changes based on the state of the button
    if (on) {
      fill(175);
    } else {
      fill(0);
    }
    rect(x,y,w,h);
  }
  
} 

2 Comments

»

  1. Hi!
    Something weird happened here with my display function:

    void display(){
    rectMode(CORNER);
    stroke(100);
    rect(x,y,w,h); // when rect is here, the button that reacts is always the next button of the array…
    if (on){
    fill(175);
    }else{
    fill(0);
    }
    //rect(x,y,w,h); —-> when rect is here, the program works properly…
    }

    Is that any relation with the program flow, or is that a bug??

    Comment by Maria Antônia — February 8, 2010 @ 11:44 am

  2. That’s exactly right. fill() affects the shapes drawn afterwards so you always want to make sure you call rect() (or whatever shape you want) after you set the rectangle’s color.

    Comment by Daniel Shiffman — February 8, 2010 @ 8:40 pm

Leave a comment