Create Buttons Anywhere

This sketch uses a function to create buttons anywhere at any size and any number of them. All you need to do is figure out where they go in the window, how wide and tall they are, and what their label is. The doButton() function takes those values as parameters inside the function like this:

x-location, y-location, width, and height all have to be integers, and name-of-button has to be a word or words inside double quotation marks, like "LEFT"

The doButton() function will set a variable called buttonPressed with the name of the button that was pressed. In the draw() loop, you check for the value of buttonPressed with a switch(buttonPressed) command and do things when the button you're looking for is the one that's pressed

The switch() command works like this. It checks the value of what's inside its ( ), then compares it with a case("asdf") statement. When the case() statement is true, it will do the lines after the colon (:) until it reaches the line with break; in it. When all the case() statements have been tested, it defaults to the default statement at the end of the switch() command. Easier to write than multitple if/then statements and perfect when you're getting different results from the same variable.

Read more about the switch() command at http://processing.org/reference/switch.

You'll need to save the .pde file and add a data folder to it with this .ttf font in it for this to work. Feel free to substitute your own .ttf font.

// Independent button function
// Just figure the position, size and name
// and use them on the doButton function

// Variable for the size of robot 
// (required for passing edges of window)
int robotWidth = 100; 
int robotHeight = 100;
// Robot movement variables
float speed = 2.5;    // Speed of movement in any direction
float newX = 250;     // Center robot at start
float newY = 250;     //
float changeX = 0;    // Make a variable to change the x location
float changeY = 0;    // Ditto for y location
PFont myFont;         // Setup a font object for labels
// Button Variables
String buttonPressed = "";

void setup() {
  size(500, 500);
  myFont= createFont("SourceCodePro-Regular.ttf", 24);
}

void draw() {
  background(128);
  // ----------------------------------------------------
  // Do the buttons -------------------------------------
  doButton(50, 425, 100, 50, "LEFT"); 
  doButton(150, 425, 100, 50, "UP"); 
  doButton(250, 425, 100, 50, "DOWN"); 
  doButton(350, 425, 100, 50, "RIGHT");
  // React to the buttons
  changeX = 0;
  changeY = 0;
   switch(buttonPressed) {
    case("LEFT"):
      changeX = -speed;
      break;
    case("UP"):
      changeY = -speed;
      break;
    case("DOWN"):
      changeY = speed;
      break;
    case("RIGHT"):
      changeX = speed;
      break;
    default: // no button pressed
      break;
  }
  // ----------------------------------------------------
  // Do the robot ---------------------------------------
  // Move the robot before drawing it
  newX += changeX;
  newY += changeY;
  translate(newX, newY);
  // Check robot position when it goes past an edge
  if (newX >= width) { newX = -robotWidth; }
  if (newX < -robotWidth) { newX = width; }
  if (newY >= height) { newY = -robotHeight; }
  if (newY < -robotHeight) { newY = height; }
  // Draw the robot
  drawRobot();
}

void doButton(int bX, int bY, int bWidth, int bHeight, String bLabel) {
  fill(#ff8800);  // Normal button color    
  // Check hover and click and recolor
  // If the mouse is between the left and right 
  // and top and bottom
  if ( mouseX > bX && 
       mouseX < bX + bWidth && 
       mouseY > bY && 
       mouseY < bY + bHeight) {
    fill(#ffdd00); // Button hovered over color
    // Mouse pressed so set buttonPressed to the name of the button
    if (mousePressed) { 
      fill(#ffffff);  // Button clicked on color
      buttonPressed = bLabel;
    } else {            // Otherwise set buttonPressed to none
      buttonPressed = "";
    }
  } 
  // Draw the button
  rect(bX, bY, bWidth, bHeight);
  // Label the button
  textFont(myFont);
  textAlign(CENTER, CENTER);
  fill(#000000);
  text(bLabel, bX + (bWidth/2), bY + (bHeight/2)-3);
}

void mouseReleased() { 
  // This will force the robot to stop when the mouse is released
  // Otherwise it just keeps going
  buttonPressed = "";
}
 
void drawRobot() {
  fill(255);
  ellipseMode(CENTER);
  ellipse(0, 0, robotWidth, robotHeight);
}