// utilizar la libreria ControlP5
import controlP5.*;

// definir la variable cp5 del tipo ControlP5
ControlP5 cp5;

// como deseamos controlar los colores RGB
// necesitamos 3 variables
int valR = 128;
int valG = 128;
int valB = 128;

// configuración inicial
void setup() {

  size(500, 180); // tamaño de la ventana
  noStroke();     // no dibujar el border de los rectángulos

  // crear el objeto ControlP5
  cp5 = new ControlP5(this);

  // crear el Slider para el color Rojo
  Slider slideR =
    cp5.addSlider("R", 0, 255, 128, 180, 15, 300, 40);
  slideR.setColor( new CColor(
  0xFFAA0000, 0xFF550000, 0xFFFF0000,
  0xFFFFFFFF, 0xFFFFFFFF));
  // crear el Slider para el color Verde
  Slider slideG =
    cp5.addSlider("G", 0, 255, 128, 180, 70, 300, 40);
  slideG.setColor( new CColor(
  0xFF00AA00, 0xFF005500, 0xFF00FF00,
  0xFFFFFFFF, 0xFFFFFFFF));
  // crear el Slider para el color Azul
  Slider slideB =
    cp5.addSlider("B", 0, 255, 128, 180, 125, 300, 40);
  slideB.setColor( new CColor(
  0xFF0000AA, 0xFF000055, 0xFF0000FF,
  0xFFFFFFFF, 0xFFFFFFFF));
}

// dibujar cada frame
void draw()
{
  background(0xFF444444);  // color gris del fondo
  // definir el color de relleno combinando los valores
  // de los colores de los 3 Sliders
  fill(valR, valG, valB);
  // dibujar el rectángulo con ese color
  rect(15, 15, 150, 150);
}

// actuar cuando ocurra un evento con los Sliders
public void controlEvent(ControlEvent theEvent) {
  // guardar el nombre y valor del evento
  String nombre = theEvent.getController().getName();
  int valor = int(theEvent.getController().getValue());

  // guardar el valor en la variable para cada color
  if (nombre == "R") {
    valR = valor;
  }
  if (nombre == "G") {
    valG = valor;
  }
  if (nombre == "B") {
    valB = valor;
  }
}