Learning Processing: Chapter 9: Arrays: Exercise 9-8: Array of button objects

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

exercise_9_8

Button

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

Comments (4)

Maria Antônia

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??
http://www.learningprocessing.com Daniel Shiffman

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.
Jon

Hi,

Great exercise, but after I did it, i thought- how would you generate circular buttons? I started to try it but got stuck when I realised the x and y values are dependent on one another when you define a cartesian circle. Therefore I couldn’t define limits for the edge of the button.

Is there a way to do this simply using polar coordiantes? Or is it possible to define to variables such that they can describe a circle in the standard cartesian form? :
(x – a) ^ 2 + (y – b) ^ 2 = r ^ 2

If the way to do it is far more complicated than my current level of Processing knowledge then not to worry!

cheers
http://www.learningprocessing.com Daniel Shiffman
For circular buttons, you can use the distance function, i.e. if you know the x,y, and radius of the button you have:
```
float d = dist(mouseX,mouseY,x,y);
if (d < r) {
 // you are inside the button!
}
```