Mejoramos la interfaz del ejercicio de comunicación Processing Arduino

En esta entrada pongo una mejora de la interfaz de Processing en el ejercicio de comunicación con Arduino. El código en Processing es mas complicado pero creo que se entiende bien.
En este vídeo vemos los resultados.




El código en Arduino sería el mismo

Código en Processing

import processing.serial.*; //importamos la libreria para trabajar con el puerto serie
int n=0;             //almacenaremos el resto de dividir el tiempo entre 4000 para tomar intervalos de 1000 ms
int ultima_parada=0;        // almacenaremos el valor de millis() cada vez que reiniciemos el tiempo (botón ON)
int actual=0;              // almacenamos el valor del tiempo desde cero cada vez que se reinicie (botón ON)
boolean encendido=false;   // encendido=true pone en marcha los ledes. false, los apaga.

Serial mipuerto; 

void setup() {
  size(600, 300);
  background(0);
  mipuerto = new Serial(this, "COM3", 9600);  //inicializamos el puerto
}

void draw() {
  actual=millis()-ultima_parada;  //actual llevará el tiempo desde que se reinicia el encendido de los leds
  botones(); //dibujamos los botones
  n=(actual % 4000); //vamos haciendo fracciones de 1000 ms
  if (encendido) {   // si encendido es true ponemos en marcha los ledes
    if (n<1000) {
      fill(0, 0, 0);              //dibujamos un rectángulo negro que tape los ledes cuando simulemos apagado
      rect(0, 0, width, height-100);
      mipuerto.write('a'); //escribimos una 'a' en el puerto para apagar todos los Ledes
    } else if (n<2000) {
      fill(255, 255, 0);          //dibujamos un circulo amarillo que simule en led amarillo
      ellipse(width/2+150, height/2-80, 100, 100);
      mipuerto.write('1');//escribimos un '1' en el puerto encender el Led amarillo
    } else if (n<3000) {
      fill(0, 255, 0);            //dibujamos un circulo verde que simule en led verde
      ellipse(width/2, height/2-80, 100, 100);
      mipuerto.write('2');//escribimos una '2' en el puerto para encender el Led verde
    } else if (n<4000) {
      fill(255, 0, 0);            //dibujamos un circulo rojo que simule en led rojo
      ellipse(width/2-150, height/2-80, 100, 100);
      mipuerto.write('3');//escribimos una '3' en el puerto para encender el Led rojo
    }
  } else {
    fill(0, 0, 0);
    rect(0, 0, width, height-100);
    mipuerto.write('a');  //escribimos una 'a' en el puerto para apagar todos los Ledes
  }
  }

  void botones() {  //dibujamos los botones de ON y OFF
    textSize(24);
    fill (255, 100, 100);
    rect( 150, 200, 120, 50, 20);
    fill (255, 255, 255);
    text("OFF", 190, 235);
    fill (100, 155, 100);
    rect( 320, 200, 120, 50, 20);
    fill (255, 255, 255);
    text("ON", 360, 235);
  }

  void mousePressed() { //controla el clic del ratón sobre los botones ON y OFF
    if (mouseX > 150 && mouseX < 270 && mouseY > 200 && mouseY < 250) {
      encendido=false;
      fill (255, 300, 300); //cambiamos algo el color del botón para ver que se ha pulsado
      rect( 150, 200, 120, 50, 20);
      fill (255, 255, 255);
      text("OFF", 190, 235);
   
    }
    if (mouseX > 320 && mouseX < 440 && mouseY > 200 && mouseY <250) {
      encendido=true;
      ultima_parada=millis(); //almacenamos el valor del tiempo en el momento de reiniciar para restarlo del actual y poder volver a contar desde el principio
      fill (200, 155, 200);   //cambiamos algo el color del botón para ver que se ha pulsado
      rect( 320, 200, 120, 50, 20);
      fill (255, 255, 255);
      text("ON", 360, 235);
    }
  }