Electric Paint Circuit Kit + Arduino + Processing

Llegamos al último post (por el momento) dedicado al  Electric Paint Circuit Kit. Un kit que cómo habréis podido observar nos ha dado mucho juego y estamos seguros de que a vosotros/as se os ocurrirán aún más posibilidades para él.

En esta ocasión vamos a seguir mejorando la ciudad que hicimos en nuestra anterior entrada, en la cual usábamos Arduino para controlar las distintas luces de la ciudad. Hoy vamos a darle una vuelta de tuerca más y lo controlaremos todo desde un ordenador o una tablet programando una interfaz gráfica en processing que sea capaz de comunicarse con Arduino y transmitirle las ordenes. ¿suena complicado? ¡pues no lo es! ¡Vamos allá!

¿Qué es Processing?

ProcessingComencemos por el principio, processing es un lenguaje de programación basado en Java. Se utiliza mucho en educación pero sobre todo en proyectos multimedia y de arte y diseño digital. Está muy orientado al aspecto visual y, según sus autores, es una herramienta para que artistas, diseñadores visuales y no programadores que quieran programar.

Processing cuenta con un IDE, un entorno de desarrollo desde el que vamos a poder escribir, guardar, ejecutar y probar nuestros programas, además de detectar posibles errores. Todo ello es gratuito y Open Source, por lo que podrás encontrar muchísima documentación en la web.

Puedes descargarlo para tu sistema operativo aquí.

 

Creando el programa en Processing

Vamos a enseñaros lo básico para que podáis hacer el programa y os dejamos a vosotros la parte de investigar para crear algo bonito, atractivo y chulo.

La primera vez que abras Processing es posible que te recuerde al IDE de Arduino, esto se debe a que este último está pasado en Processing y su aspecto es bastante similar, por lo que no tardarás en familiarizarte con él.

Al igual que ocurre con Arduino los programas de Processing se dividen en dos funciones principales, setup que se ejecuta una única vez en el arranque y Draw, que sería cómo el loop de arduino y se está ejecutando de forma constante hasta que cerremos el programa. Por lo tanto cuando escribamos nuestro código tenemos que pensar en cómo queremos que se comporte y decidir si irá en setup o en draw.

Lo primero que vamos a hacer es crear un botón. Para eso escribiremos lo siguiente:

int x=20, y=20, w=50, h=30;


void setup() {
 size(100, 70);
}

void draw() {
 //Dibujamos el botón
 rect(x, y, w, h);
 
 // Añadimos el texto en su interior. 
 fill(0);
 text("PULSA", x+6, y+h-10);
 

}

Si ahora ejecutamos el programa con el botón de processing deberíamos ver algo similar a esto:

 

Botón hecho con processing

 

No es muy bonito, y de momento no hace nada si lo pulsamos, pero ya hemos creado nuestro primer elemento en Processing. Ahora vamos a mejorarlo. Lo primero que haremos es asegurarnos de que nuestro programa «se da cuenta» de que pulsamos el botón, para ello añadiremos una acción sencilla a nuestro botón:

 //Comprobamos si se ha hecho click dentro de la zona dónde hemos dibujado el botón.
 if(mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h && mousePressed==true) {
   //Aquí pondremos todo lo que queremos que ocurra cuando se pulse el botón
   //De momento solo vamos a cambiar el color de fondo de nuestor botón
   fill(255,0,0);
 } 
 
 if(mousePressed==false) {
   //Aquí ponemos todo lo que queremos que ocurra cuando NO se este pulsando el botón
   //De momento solo ponemos otro color de fondo en el botón
   fill(0,255,0);
 }

Esto hará que cuando pulsemos el botón este cambie de color. Con eso nos aseguramos de que el botón está funcionando, ahora es el momento de incluir en estas acciones la comunicación con Arduino. Finalmente el código quedará así:

int x=20, y=20, w=50, h=30;

import processing.serial.*; //Importamos la librería Serial
Serial port; //Nombre del puerto serie

void setup() {
 size(100, 70);
 
  println(Serial.list()); //Visualiza los puertos serie disponibles en la consola de abajo
  port = new Serial(this, Serial.list()[1], 9600); //Abre el puerto serie COM3 ¡¡CAMBIAR POR EL PUERTO EN EL QUE TENGAMOS NUESTRO ARDUINO!!
}

void draw() {
  
 //Dibujamos el botón
 rect(x, y, w, h);
 
 // Añadimos el texto en su interior. 
 fill(0);
 text("PULSA", x+6, y+h-10);
 
 //Comprobamos si se ha hecho click dentro de la zona dónde hemos dibujado el botón.
 if(mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h && mousePressed==true) {
   //Aquí pondremos todo lo que queremos que ocurra cuando se pulse el botón
   
   fill(255,0,0);//Cambiamos el color de fondo de nuestor botón  
   port.write("A"); //Enviamos una "A" a nuestro Arduino 
 } 
 
 if(mousePressed==false) {
   //Aquí ponemos todo lo que queremos que ocurra cuando NO se este pulsando el botón
  
   fill(0,255,0); //Cambiamos el color de fondo de nuestor botón  
   
 }
}

En este caso lo que hacemos es enviar un «1» cuando pulsamos el botón. Ahora tenemos que indicarle a nuestro Arduino que significa ese 1 (en nuestro caso, enciende la casa 1).

Programa para el Arduino

Ya somos capaces de enviar ordenes desde el Ordenador. Ahora tenemos que decirle a Arduino cómo interpretar esas ordenes. Estamos enviando los datos por serial (igual que haríamos desde la consola de Serial) por lo tanto la forma de indicar que hacer es la misma que si abriésemos la consola de serial de Arduino y lo mandásemos desde ahí.

Vamos a decirle a Arduino que cuando reciba un 1 encienda la casa. Este código puedes añadirlo al que ya tenias si quieres seguir usando los botones físicos que pusimos en la anterior entrada o cargarlo sin más si quieres controlarlo solo desde Processing.

#define led 3//Pin donde tiene conectado el led
bool estado = false;//Esta variable guarda el estado del led. false= apagado. true=encendido

void setup(){
  Serial.begin(9600);//Iniciamos la comunicación
  pinMode(led,OUTPUT);//configuramos el pin del led como una salida
}
 
void loop(){
  //Comprobamos si hemos recibido algo por serial.
  if(Serial.available()>0){
    byte orden = Serial.read(); //guardamos el valor recibido en una variable llamada "orden"
    if(orden==65)  //Si recibe una "A" (en ASCII "65")
    {
      estado=!estado; //Si el led estaba encendido apagamos, si estaba apagado encendemos. 
    }
    digitalWrite(led,estado);//Ponemos el valor de "estado" en la salida del pin
  }
}

Ya solo queda probar que todo funcione y seguir mejorando, por ejemplo ¿serías capaz de crear un segundo botón para apagar las luces? ¿o mejorar el que tienes para conseguir que una segunda pulsación apague?

Ideas de mejora

Las posibilidades son infinitas, te propones algunas ideas que se nos han ocurrido a nosotros, ¡seguro que a ti se te ocurren muchas más!

  • Puedes mejorar mucho el aspecto del programa, prueba a colocar fotos de cada edificio, farola, coche… etc para saber que estas encendiendo.
  • Si haces el punto anterior puedes hacer que la imagen cambie dependiendo de si has mandado la orden de encender o de apagar, ¡así podrás tener el control de la ciudad incluso sin verla!
  • No todo tiene por qué hacerlo processing, ¿y si añades una LDR y le dices a Arduino que se encargue de encender algunas luces cuando detecte poca luz ambiental?
  • Processing permite crear APP para Android, por lo que podrías controlarlo todo desde tu móvil o tablet haciendo algunos ajustes. ¡Si sustituyes el Arduino por una placa con Bluetooth podrás olvidarte de los cables!

 

Crea y comparte

Esperamos que hayas disfrutado de esta serie de entradas y que sigas sacandole partido a tu Electric Paint Circuit Kit. Nos encantaría que compartieses tus creaciones en los comentarios.

Lo mejor de este kit es que permite que toda la familia se divierta aportando cada uno su parte. Los más pequeños pueden disfrutar de colorear, cortar, pegar y usar la pintura conductiva para crear sus ciudades, vehículos, incluso naves espaciales. Mientras los mayores aprenden y mejorar sus dotes cómo programadores usando Arduino y processing. Creemos que este kit puede dar muchas horas de diversión familiar en las que todos pueden aprender y enseñar.

¡Ahora toca disfrutarlo!