// 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(400, 330); // tamaño de la ventana
  noStroke();     // no dibujar el border de los rectángulos

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

  // crear el Knob para el color Rojo
  Knob knobR =
    cp5.addKnob("R", 0, 255, 128, 140, 40, 120);
  knobR.setColor( new CColor(
    0xFFAA0000, 0xFF550000, 0xFFFF0000,
    0xFFFFFFFF, 0xFFFFFFFF));
  // crear el Knob para el color Verde
  Knob knobG =
    cp5.addKnob("G", 0, 255, 128, 40, 160, 120);
  knobG.setColor( new CColor(
    0xFF00AA00, 0xFF005500, 0xFF00FF00,
    0xFFFFFFFF, 0xFFFFFFFF));
  // crear el Knob para el color Azul
  Knob knobB =
    cp5.addKnob("B", 0, 255, 128, 240, 160, 120);
  knobB.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 Knobs
  fill(valR, valG, valB);
  // dibujar el rectángulo con ese color
  rect(20, 20, 360, 290);
}

// actuar cuando ocurra un evento con los Knobs
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;
  }
}