PROCESSING

PROCESSING

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.