A button that can be placed in the application window of a Processing program (processing.org). The button code allows the button to be drawn and checked to see if it has been clicked by a mouse.

Buttons in a Procesing Application

At this point in time Processing does not have any button controls as part of the language or built in libraries. The code below is a class for a very simple button that should be easy for beginners in programming to understand, study and improve on. An example of using the button follows.

The image shows two buttons created in a Processing application window using the Button class.

Processing Button Class

This button class can be copied to any Processing sketch and then used in the sketch as demonstrated by the example that follows.

class Button {
  String label;
  float x;    // top left corner x position
  float y;    // top left corner y position
  float w;    // width of button
  float h;    // height of button
  
  Button(String labelB, float xpos, float ypos, float widthB, float heightB) {
    label = labelB;
    x = xpos;
    y = ypos;
    w = widthB;
    h = heightB;
  }
  
  void Draw() {
    fill(218);
    stroke(141);
    rect(x, y, w, h, 10);
    textAlign(CENTER, CENTER);
    fill(0);
    text(label, x + (w / 2), y + (h / 2));
  }
  
  boolean MouseIsOver() {
    if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) {
      return true;
    }
    return false;
  }
}

Processing Button Demonstration Example

This application uses the above Button class to create a button on the screen. When the mouse cursor is moved over the button, a square is drawn in the window, when the button is clicked, text is written to the text area console of the Processing IDE. This video shows the example code running:

// Processing application that demonstrates the Button class by creating a button
// Draws a square in the window when the mouse cursor is over the button
// Writes to the Processing IDE console pane when the button is clicked
// 3 July 2015    http://startingelectronics.org
Button on_button;  // the button
int clk = 1;       // number of times the button is clicked

void setup() {
  size (300, 150);
  smooth();
  
  // create the button object
  on_button = new Button("Click Me", 20, 20, 100, 50);
}

void draw() {
  // draw a square if the mouse curser is over the button
  if (on_button.MouseIsOver()) {
    rect(200, 20, 50, 50);
  }
  else {
    // hide the square if the mouse cursor is not over the button
    background(0);
  }
  // draw the button in the window
  on_button.Draw();
}

// mouse button clicked
void mousePressed()
{
  if (on_button.MouseIsOver()) {
    // print some text to the console pane if the button is clicked
    print("Clicked: ");
    println(clk++);
  }
}

// the Button class
class Button {
  String label; // button label
  float x;      // top left corner x position
  float y;      // top left corner y position
  float w;      // width of button
  float h;      // height of button
  
  // constructor
  Button(String labelB, float xpos, float ypos, float widthB, float heightB) {
    label = labelB;
    x = xpos;
    y = ypos;
    w = widthB;
    h = heightB;
  }
  
  void Draw() {
    fill(218);
    stroke(141);
    rect(x, y, w, h, 10);
    textAlign(CENTER, CENTER);
    fill(0);
    text(label, x + (w / 2), y + (h / 2));
  }
  
  boolean MouseIsOver() {
    if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) {
      return true;
    }
    return false;
  }
}