Processing es un entorno de desarrollo basado Java, existen muchas funciones para crear formas y figuras visuales. Primero de todo hay que saber que la pantalla de visualización que creamos con Processing es un gráfico de píxeles (X, Y).
-setup() Función de arranque cuando el programa empieza. Igual que Arduino.
-draw() Bucle que se ejecuta cíclicamente siempre. Como el loop() de Arduino.
-size(x, y); Con esta función, Processing crea una ventana de X píxeles por Y píxeles. En esta ventana crearemos nuestro entorno gráfico.
-background(0,0,0); Determina el color del fondo de la ventana creada en modo RGB
-stroke(0,0,0); Función de trazo (bordes) que permite cambiar el color del dibujo actual en modo RGB. Cada función de dibujo llamada después de stroke tendrá el color de este.
-noStroke(); Sin bordes.
-point(x, y); Crea un punto en la posición x, y del gráfico.
-line(x1, y1, x2, y2); Crea una línea. Los dos primeros valores son la primera coordenada X, Y. Los dos últimos valores son la última coordenada X, Y.
-triangle(x1,y1,x2,y2,x3,y3); Dibuja un polígono de tres puntas. Tiene seis valores que son las tres coordenadas de las tres puntas.
-quad(x1,y1,x2,y2,x3,y3,x4,y4); Dibuja un polígono de cuatro puntas. Los ocho valores son las cuatro coordenadas de las cuatro puntas.
-rect(x, y, width, height); Dibuja un rectángulo. Los dos primeros valores es la posición X, Y en el gráfico. Los dos últimos valores son la anchura y la altura respectivamente.
-ellipse(x, y, width, height); Dibuja una circulo. Los valores funcionan de la misa manera que rect.
-fill(0,0,0); Llena del color indicado la figura.
-noFill(); Sin llenar de color.
-text(“texto”,x,y); Escribe un texto en la posición X, Y deseada.
-mousePressed(); Función llamada cada vez que se aprieta el botón del ratón.
-mouseReleased(); Función llamada cada vez que el botón del ratón no está apretado.
-KeyPressed(); Función llamada cada vez que se aprieta una tecla del teclado.
-year() Retorna el año actual del reloj del PC
-month() Retorna el mes actual del reloj del PC
-day() Retorna el día actual del reloj del PC
-hour() Retorna la hora actual del reloj del PC
-minute() Retorna el minuto actual del reloj del PC
-second() Retorna el segundo actual del reloj del PC
1.- ARDUINO+PROCESSING ENCENDIDO DEL LED13
Primero cargamos el código de arduino desde su IDE con las instrucción de apertura del puerto serie. En este caso vamos a encender o apagar el LED13 si en el puerto serie entran el 0 o el 1. Luego programamos el código en processing teniendo especial atención en poner el puerto que tiene abierto el arduino. Desde processing enviamos al puerto serie TX/RX de arduino los valores 0 o 1 según se pulse el botón derecho o izquierdo del ratón y de esta forma desde la ventana diseñada de processing podremos enceder o apagar el LED13.
Primero cargomos en Arduino el siguiente código y luego elegimos el código Processing de la lista de opciones que propongo:
CÓDIGO ARDUINO
int led = 13;
char valor; //variable del puerto serie desde processing
void setup() {
pinMode(led, OUTPUT);
Serial.begin(9600); //habilita la comunicación serie que vendrá desde processing
}
void loop(){
while (Serial.available()) {
valor = Serial.read(); //
if(valor == '1'){
digitalWrite(led, HIGH);
}
if(valor == '0'){
digitalWrite(led, LOW);
}
}
}
CÓDIGO PROCESSING PULSANDO RATÓN SOBRE FONDO CON TEXTO.
import processing.serial.*; //el monitor serie de arduino debe estar cerrado
Serial miPuerto; //ahora el puerto serie de comunicación será el de processing
void setup(){
size(500, 500);
background(0,0,0);
miPuerto = new Serial(this, "COM3", 9600); //ajustar el puerto antes de empezar
}
void draw(){
text("HOLA, pulsa el botón derecho / izquierdo del ratón", 120, 120);
if(mousePressed && (mouseButton == LEFT)){ //si pulsamos botón izdo.ratón
miPuerto.write('1'); //enciende el led
background(0,200,100); //fondo verde
}
if (mousePressed && (mouseButton == RIGHT)){ //si pulsamos botón dcho.ratón
miPuerto.write('0'); //apaga el led
background(200,0,0); //fondo rojo
}
}
CÓDIGO PROCESSING PULSANDO SOBRE CUADRADO VERDE/ROJO.
import processing.serial.*;
Serial miPuerto; // creamos el objeto de la clase Serial
int valor; // dato que se recibirá del puerto serie
void setup() {
size(600,300);
background(255,255,255); //color fondo
fill(0,0,0); //color negro para el texto
textSize(20);
text("LED ON/OFF al pasar el ratón sobre el rectángulo", 20, 20);
miPuerto = new Serial(this, "COM6", 9600); //ACTUALIZAR EL PUERTO NECESARIO
}
void draw() {
rect(50, 50, 100, 100); //dibujamos rectángulo lados 50x50
if (ratonSobreRect() == true) { // Si el ratón está sobre el Rect
fill(0,0,0);
text("ON",85,100);
fill(0,255,0); // cambiamos su color y
miPuerto.write('1'); // y enviamos un 1 por el puerto
}
else {
fill(0,0,0);
text("OFF",85,100);
fill(255,0,0);
miPuerto.write('0');
}
}
boolean ratonSobreRect() { // función para ver si el ratón está sobre el Rect
return ((mouseX >= 50) && (mouseX <= 150) && (mouseY >= 50) && (mouseY <= 150));
}
CÓDIGO PROCESSING CON ALGO MÁS GRÁFICOS.
import processing.serial.*;
Serial miPuerto;
int R=155;
int G=155;
int B=155;
void setup(){
size(300, 300);
background(R,G,B);
textSize(50);
text("Hola", 80, 120);
miPuerto = new Serial(this, "COM4", 9600); //ajustar el puerto
}
void draw(){
if(mousePressed && (mouseButton == LEFT)){
miPuerto.write('1');
int R=0;
int G=200;
int B=100;
background(R,G,B);
text("LED ON", 80, 120);
}
if (mousePressed && (mouseButton == RIGHT)){
miPuerto.write('0');
int R=255;
int G=0;
int B=0;
background(R,G,B);
text("LED OFF", 80, 120);
}
}
2.- ON/OFF LED Y MONITORIZACIÓN TEMPERATURA LM35.
http://diymakers.es/arduino-processing-primeros-pasos/
CÓDIGO ARDUINO
int led = 13;
int temp;
void setup() {
pinMode(led, OUTPUT);
Serial.begin(9600);
}
void loop(){
if(Serial.available() > 0) {
char ledEstado = Serial.read();
if(ledEstado == '1'){
digitalWrite(led, HIGH);
}
if(ledEstado == '0'){
digitalWrite(led, LOW);
}
}
temp = analogRead(A0); //Lee los datos del sensor LM35
temp = (5.0 * temp * 100)/1023.0; //Formula para convertir a ºC
Serial.write(temp); //Enviamos los datos en forma de byte
delay(100);
}
CÓDIGO PROCESSING CON ALGO MÁS GRÁFICOS.
import processing.serial.*;
Serial miPuerto;
PrintWriter output;
int R;
int G;
int B;
int valor;
void setup(){
size(600,300);
background(155,155,155);
fill(0,0,0);
textSize(40);
text("Hola", 120, 120);
miPuerto = new Serial(this, "COM4", 9600); //ajustar el puerto
output = createWriter("temeratura_datos.txt");
}
void draw(){
if(mousePressed && (mouseButton == LEFT)){
miPuerto.write('1');
int R=0;
int G=200;
int B=100;
fill(R,G,B);
rect(100,100,100,50);
fill(0,0,0);
text("LED ON", 120, 120);
}
if (mousePressed && (mouseButton == RIGHT)){
miPuerto.write('0');
int R=255;
int G=0;
int B=0;
fill(R,G,B);
rect(100,100,100,50);
fill(0,0,0);
text("LED OFF", 120, 120);
}
if(miPuerto.available() > 0) { // representamos valor A0
valor=miPuerto.read();
background(150,155,155);
text("Temperatura =",10,200);
text(valor, 350, 200);
text("ºC",450,200);
}
//Escribimos los datos de la temperatura con el tiempo (h/m/s) en el archivo de texto
output.print(valor + " ºC ");
output.print(hour( )+":");
output.print(minute( )+":");
output.println(second( ));
output.println("");
}
void keyPressed() { //Pulsar la tecla E para salir del programa
if(key=='e' || key=='E') {
output.flush(); // Escribe los datos restantes en el archivo
output.close(); // Final del archivo
exit();//Salimos del programa
}
}
3.-LECTURA LDR EN ARDUINO Y GRÁFICO EN PROCESSING
CÓDIGO EN ARDUINO
int led = 13;
int LDR=0;
void setup() {
pinMode(led, OUTPUT);
Serial.begin(9600);
}
void loop(){
if(Serial.available() > 0) {
char ledEstado = Serial.read();
if(ledEstado == '1'){
digitalWrite(led, HIGH);
}
if(ledEstado == '0'){
digitalWrite(led, LOW);
}
}
LDR = analogRead(A1); //Lee los datos del sensor de luz
Serial.println(LDR); //Enviamos los datos en forma de byte
delay(100); //hacemos una pequeña pausa para que "respire" el programa
}
CÓDIGO EN PROCESSING
import processing.serial.*;
int x = 65, ancho = 700, alto = 600;
boolean p = true;
int cFondo = 240; //Color fondo
PrintWriter datos;
Serial puertoArduino; //puerto serie desde arduino
Graf g = new Graf(ancho, alto, cFondo);
void setup (){
size(700, 700);
background(cFondo);
print(Serial.list());
puertoArduino = new Serial(this, "COM3", 9600);
// Guardaremos los datos muestreados en un archivo de texto,
// asi podremos analizarlos con una hoja de calculo y otro programa.
datos = createWriter("medidas.txt");
fill(0, 0, 255);
text("LDR (Digital): ", 20, 40);
text("Muestras", ancho / 2, alto - 20);
g.cuadricula();
}
void draw(){
String inString = puertoArduino.readStringUntil('\n');
if (inString != null){
inString = trim(inString);
float val = float(inString);
datos.print(val + "\n"); // copia el dato en medidas.txt
g.puntos(x, val, p);
p = false;
x = x + 20;
if (x > ancho - 60) {x = 60;
g.borra();
g.cuadricula();
p = true;
}
}
}
void keyPressed() {//Presionar 'ESC' para salir
datos.flush();
datos.close();
exit();
}
class Graf {
int nX, nY, colF;
float coordAntX, coordAntY;
Graf (int x, int y, int cF){
nX = x;
nY = y;
colF = cF;
}
void cuadricula(){
stroke(0);
for (int j = 60 ; j <= nX - 60; j = j + 20){
line (j, 60, j, nY - 60); } // Vert
for (int j = 60 ; j <= nY - 60; j = j + 20){
line (60, j, nX - 60, j);} // Horiz
}
void borra(){
fill(colF); // Color del fondo
noStroke();
rectMode(CORNERS);
rect(50 , 50, nX , nY - 30 );
}
void puntos(int x, float nValor, boolean primera){
fill(255,255,255);
rectMode(CORNERS);
rect(140,25,200,45);//Borra lectura anterior
fill (0,0,255);
text(nValor, 142, 40);
fill(0, 0, 255);
float v = map(nValor, 0, 1023, nY - 60, 60); //Mapeo inverso entre
//los margenes sup e inf.
ellipse(x, v, 5, 5);
//Une los dos puntos con una linea excepto en la primera lectura.
if (primera == false){
line (coordAntX, coordAntY, x, v);
}
coordAntX = x;
coordAntY = v;
}
}
ACTIVIDAD: Ahora te toca a tí. Cambia el tipo de letra, colores, etc.
