Adapted from ControlP5 Button Example by by Andreas Schlegel, 2012 from www.sojamo.de/libraries/controlp5

cp5buttonexample.pde

//Adapted from ControlP5 Button Example by by Andreas Schlegel, 2012
//www.sojamo.de/libraries/controlp5
 
import controlP5.*; //make sure ControlP5 library is installed for this line to work

ControlP5 cp5;
int myColor = color(255);

void setup() {
  size(400,400);
  noStroke();
  cp5 = new ControlP5(this);
  setupButtons();
}

void draw() {
  background(myColor);
}

public void setupButtons()
{
  // create a new button with the name 'buttonA'
  // the following four lines are broken up for readability
  cp5.addButton("colorA")
     .setValue(0)
     .setPosition(width/4,height/4)
     .setSize(200,19)
     ;

  // create a new button with a custom image with the name 'play'
  // put these images in the same folder as the sketch or in a subfolder called "data"
  PImage[] imgs = {loadImage("whitebutton.png"),loadImage("redbutton.png"),loadImage("yellowbutton.png")};
  cp5.addButton("play")
     .setValue(128)
     .setPosition(width/2,height/2)
     .setImages(imgs)
     .updateSize()
     ;
}

// These functions will automatically be called anytime the button with the corresponding name is pressed.
// No need to do anything special, just give the buttons and functions the same name.

public void colorA(int theValue) {
  println("a button event from colorA: "+ theValue);
  myColor = color(0,0,100);
}

public void play(int theValue) {
  println("a button event from play button: "+ theValue);
  myColor = color(255,0,255);
}