// utilizar la libreria ControlP5
import controlP5.*;
import processing.serial.*;

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

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

// configuración inicial
void setup() {
 String COM = Serial.list()[1];
  puerto = new Serial(this, COM, 9600);

  size(240, 500); // tamaño de la ventana
  noStroke();     // no dibujar el border del rectángulo

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

  // crear el Slider para el color Rojo
  Slider slideR =
    cp5.addSlider("R", 0, 255, 0, 15, 180, 50, 300);
  slideR.setColor( new CColor(
    0xFFAA0000, 0xFF550000, 0xFFFF0000,
    0xFFFFFFFF, 0xFFFFFFFF));
  // crear el Slider para el color Verde
  Slider slideG =
    cp5.addSlider("G", 0, 255, 0, 95, 180, 50, 300);
  slideG.setColor( new CColor(
    0xFF00AA00, 0xFF005500, 0xFF00FF00,
    0xFFFFFFFF, 0xFFFFFFFF));
  // crear el Slider para el color Azul
  Slider slideB =
    cp5.addSlider("B", 0, 255, 0, 175, 180, 50, 300);
  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, 210, 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")
  {
    puerto.write('r');
  }else if (nombre == "G")
  {
    puerto.write('g');
  }else if (nombre == "B")
  {
    puerto.write('b');
  }
  puerto.write(valor);
  println(valor+"  "+nombre);

}