DISERTANTES:

IEEE-UCSA 2015

18/04/23

¿Qué es processign?:

What is Processing?From http://www.processing.org:

Processing is an open source programming language and environment for people who want to program images, animation, and interactions.

It is used by students, artists, designers, researchers, and hobbyists for learning,prototyping, and production.

It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain.

18/04/23

OBJETIVOS DE LA PRESENTACION: PODER UTILIZAR EL SOFTWARE IDE + LEGUAJE PROCESSING PARA CONTROLAR LA LOGICA DEL ARDUINO MEDIANTE EL PROTOCOLO “FIRMATA”.

“Se necesitan para ello las librerías del Arduino del Estándar Firmata y las librerías del Arduino para enviar los comando que reconozcan el Arduino dentro del script Processing. Siendo el processing parte del compilador Arduino.”

Suena como trabalenguas, pero iremos viendo poco a poco.

ENTORNO DE PROGRAMACIÓN (IDE)

4

ENTORNO DE PROGRAMACIÓN (IDE)

• Ejemplo: prog01_prueba.pdeVamos a escribir un programa y lo vamos a guardar con el

nombre prog01_prueba.

ellipse(50, 50, 80, 80); //ellipse(x,y,a,h);

http://processing.org/reference/ellipse_.html

Es un programa con una sola instrucción.Otras primitivas básicas de dibujo- Punto- Línea

5

ENTORNO DE PROGRAMACIÓN (IDE)

• Ejemplo: prog02_prueba.pde Vamos a escribir un programa y lo vamos a guardar con el

nombre prog02_prueba.

6

void setup() {

size(480, 120);

}

void draw() {

if (mousePressed) {

fill(0);

} else {

fill(255);

}

ellipse(mouseX, mouseY, 80, 80);

}

ELEMENTOS DE PROGRAMACIÓN. SETUP()

• Partes fundamentales de la estructura del programa, son dos funciones: setup() y draw().

1ª.- La función setup(). Esta función sólo se ejecuta una vez

7

void setup() {

size(480, 120);

}

Esta función sirve para inicializar la aplicación:• Definir el tamaño del marco.• El color de fondo.• El color de relleno.• …

ELEMENTOS DE PROGRAMACIÓN. DRAW()

• 2ª.- La función draw(). Esta función se ejecuta continuamente hasta que se produzca una parada. La habitual es pulsar el icono de stop.

8

void draw() {

if (mousePressed) {

fill(0);

} else {

fill(255);

}

ellipse(mouseX, mouseY, 80, 80);

}

ELEMENTOS DE UN PROGRAMA. Resumen- TIPOS DE DATOS (variables):

- int, long, float, char, boolean,…- array

- OPERADORES.- Aritméticos, relacionales, lógicos,…

9

ELEMENTOS DE UN PROGRAMA. Resumen- ESTRUCTURAS DE CONTROL.• Delimitadores de bloque: { instrucciones; }

• while:while ( expr ) { instrucciones }do { instrucciones } while ( expr )

• forfor ( begin; end; inc ) {instrucciones }

• if/elseif ( expr ) {instrucciones }if ( expr ) {instrucciones } else { instrucciones }

• switchswitch ( var ) { case val: instrucciones default: }

• Saltos: break, continue, return

10

ELEMENTOS DE UN PROGRAMA. Resumen- ESTRUCTURAS DE CONTROL.• Delimitadores de bloque: { instrucciones; }

• while:while ( test ) { instrucciones }do { instrucciones } while ( test )

• forfor ( begin; test; inc ) {instrucciones }

• if/elseif ( test ) {instrucciones }if ( test ) {instrucciones } else { instrucciones }

• switchswitch ( val ) { case val_1: instrucciones default: }

• Saltos: break, continue, return

11

PROCESSING 2D.- SISTEMA DE COORDENADAS 2D.• El tamaño de la ventana se establece con la función size(), instrucción que se

escribe en la función setup().• El (0,0), origen, se encuentra situado en la esquina superior izquierda, donde

las x son positivas hacia a la izquierda y las y son positivas hacia abajo.

12

PROCESSING 2D.- COLOR Y RELLENO.

• El color de los trazos se determinan con la función stroke()stroke(255) => RGB(255, 255, 255) especifica un valor entre 0-256 niveles

de gris. stroke(128, 0, 128) => Cualquier valor RGB

• El grosor de los trazos se puede caracterizar con strokeWeight() strokeWeight(5) => Grosor 5

• El color de relleno de figuras 2D se especifica mediante la función fill() fill(128) => RGB(128, 128, 128) fill(200, 120, 90) => RGB(200, 120, 90)

13

PROCESSING 2D.• background()

Borra la ventana con el color especificado Ejemplos: background(0)background(128, 100, 128)

• noFill() Las figuras 2D se dibujaran sin relleno

• noStroke() Las figuras 2D se dibujaran sin trazo (especialmente útil en figuras cerradas, pero afecta a todas, incluso a líneas)

14

PROCESSING 2D.

• EJEMPLO SOBRE UNA LÍNEAEscribimos un programa “prog03_linea” y vamos añadiendo el siguiente código.

15

size(100, 100); //tamaño de la ventana

background(0); //color de fondostroke(255); //color del trazostrokeWeight(5); //grosor del trazoline(0, 0, 99, 99);

PROCESSING 2D.

• EJEMPLO SOBRE UNA LÍNEAEscribimos un programa “prog04_linea” y vamos añadiendo el siguiente código.

16

size(200, 200);background(0);

//utilizamos una estructura de control repetitivafor (int i=0; i<100; i++) {

stroke(random(255), random(255), random(255));strokeWeight(random(10));line(0, 0, random(200), random(200));

}

PROCESSING 2D.

• ELIPSE Y CÍRCULOS

• ellipse(x, y, ancho, alto) Dibuja una elipse en las coordenadas (x, y) y el ancho y alto suministrados

• ellipseMode() Cambia el modo en el que los parámetros de la elipse son interpretados

ellipseMode(CENTER) => (x, y) es el centro de la elipse (es elmodo por defecto). ellipseMode(RADIUS) => igual que el anterior, pero ancho y alto son radios y no diámetros ellipseMode(CORNER) => (x, y) hace referencia a la esquina superior izquierda del rectángulo envolvente de la elipse ellipseMode(CORNERS) => los cuatro parámetros de la elipse hacen referencia a dos puntos opuestos del rectángulo envolvente de la elipse

17

PROCESSING 2D.

• EJEMPLO DE ELIPSE Y CÍRCULOSEscribimos un programa “prog05_elipse” y vamos añadiendo el siguiente código.

18

size(200, 200);background(0);stroke(255, 0, 0); //color del trazostrokeWeight(5); //grosorfill(0, 255, 0);

// (x, y) y diámetrosellipse(100, 100, 100, 50);

// 2 esquinas opuestasellipseMode(CORNERS);ellipse(0, 0, 50, 100);50);

PROCESSING 2D.

• PRIMITIVAS DE 2DAdemás de las primitivas que hemos visto están también las siguientes:• Arcos• Rectángulos• Triángulos• Cuadriláteros• Curvas (Bézier y Catmull-Rom)• Shapes (formas libres)

19

MOVIMIENTO 2D.float x=0; // coordenadas float y=0;

float vy = 1; // velocidad eje X float vx = 2; // velocidad eje y

void setup(){ size(300,300); fill(255); }

void draw(){ background(0); x = x + vx; y = y + vy; ellipse(x,y,10,10); }

20

18/04/23

Trabajaremos con el IDE Arduino y con el IDE Processing para Gráficos en conjunto.

18/04/23

18/04/23

Metodos para controlar Arduino desde el IDE Processing:Existen dos metodos para controlar Arduino dese processing:

1. Mediante la Librería Arduino para Processing

2. Mediante la lectura/escritura de datos a través del puerto serie.

18/04/23

Firmata:A generic protocol for communicating with microcontrollers like the Arduino from software on a host computer. For the Arduino Library, it is included in Arduino since version 0012, so see the library reference page. For more on the Firmata protocol, see http://firmata.org.

18/04/23

Firmata is a generic protocol for communicating with microcontrollers from software on a host computer. It is intended to work with any host computer software package. Right now there is a matching object in a number of languages. It is easy to add objects for other software to use this protocol. Basically, this firmware establishes a protocol for talking to the Arduino from the host software. The aim is to allow people to completely control the Arduino from software on the host computer. If you are interested, we can help you use this protocol with any software whatsoever. The protocol is quite simple. We will all benefit if we use a common firmware. Then microcontroller boards become really cheap sensorboxes in addition to all the rest of the stuff you can already do with them. Check out the Examples page to see Firmata in action.

18/04/23

18/04/23

REFERENCIAS:

INFORMACIÓN PARA CONFIGURAR PROCESSING :http://playground.arduino.cc/Interfacing/Processing

BAJAR EL PROCESSING:https://processing.org/download/

18/04/23

import processing.serial.*;import cc.arduino.*;

Arduino arduino;int ledPin = 13;

void setup(){  //println(Arduino.list());  arduino = new Arduino(this, Arduino.list()[0], 57600);  arduino.pinMode(ledPin, Arduino.OUTPUT);}

void draw(){  arduino.digitalWrite(ledPin, Arduino.HIGH);  delay(1000);  arduino.digitalWrite(ledPin, Arduino.LOW);  delay(1000);}

CODIGO PROCESSING CON LIBRERIAS DE ARDUINO.

18/04/23

Antes de nada debemos realizar los siguientes pasos para acondicionar el entorno Processing:

a.CARGAR LA LIBRERIA ARDUINO EN EL IDE DE PROCESSING:

No debemos olvidarnos antes de nada de cargar el firmare correspondiente en Arduino. El fichero de la librería Arduino para Processing esta en el archivo processing-arduino o arduino-processing-e231 que se encuentra en la página de arduino. Dentro de ellos hay una carpeta que se llama Arduino y contiene la librería. (\processing-arduino\arduino o \arduino-processing-e231\arduino).

http://www.arduino.cc/playground/uploads/Interfacing/processing-arduino.zipPara que Processing pueda trabajar con la librería de Arduino debemos incluir la carpeta Arduino dentro de la carpeta librerías del IDE Processing:\processing-0138\libraries

RESUMIENDO: A)DESCARGAR EL IDE PROCESSING 2 – B) INSTALAR EL PLUG IN “ARDUINO” DIRECTAMENTE DESDE EL IDE PROCESSING, MAS FACIL QUE SEGUIR ESTOS PASOS DE LA REFERENCIA. Y LISTO. YA ESTA PREPARADO PARA REALIZAR SUS PROGRAMAS DIRECTAMENTE DESDE EL PROCESSING 2.

18/04/23

b. CONFIGURAR ARDUINO PARA QUE PROCESSING PUEDA DIALOGAR CON EL PROCESSING 2.

Para cargar el firmware en Arduino nos vamos a la librería processign-arduino y en la carpeta\arduino\firmware\Standard_Firmata se encuentra el fichero“Standard_Firmata.pde”

EDITAR EL PROGRAMA Y TRANSFERIRLO AL ARDUINO.

18/04/23

import processing.serial.*;import cc.arduino.*;

Arduino arduino;int ledPin = 13;

void setup(){  //println(Arduino.list());  arduino = new Arduino(this, Arduino.list()[0], 57600);  arduino.pinMode(ledPin, Arduino.OUTPUT);}

void draw(){  arduino.digitalWrite(ledPin, Arduino.HIGH);  delay(1000);  arduino.digitalWrite(ledPin, Arduino.LOW);  delay(1000);}

COPIAR EL SIGUIENTE CODIGO AL PROCESSING 2. Y EJECUTARLO.

18/04/23

Su primera aplicación con processing 2 está realizada!!!

18/04/23

Referencia de las funciones de la librería Arduino para Processing 2:Las siguientes funciones se encuentran en la Librería Arduino para Processing y comunican (a partir de Processing) con un Arduino, una vez que el Firmata se ha instalado en la tarjeta.

Arduino.list():devuelve una lista con los dispositivos serie (puertos serie) disponibles. Su tarjeta Arduino está conectada a la computadora cuando usted llama a esta función, su dispositivo estará en la lista.

Arduino(parent, name, rate): crea un “objeto” Arduino (objeto a nivel de elemento de programación). parent debe aparecer sin comillas; name es el nombre del dispositivo serie (es decir, uno de los nombres devueltos por Arduino.list ()); rate es la velocidad de la conexión (57600 para la versión actual del de firmware).

pinMode(pin, mode): pin configura un pin digital como entrada (input) o como salida (output) mode (Arduino.INPUT o Arduino.OUTPUT).

18/04/23

digitalRead(pin): devuelve el valor leído de una de las entradas digitales, Arduino.LOW o bien Arduino.HIGH (el pin debe estar configurado como entrada).

digitalWrite(pin, value): escribe Arduino.LOW o Arduino.HIGH en un pin digital.

analogRead(pin): devuelve el valor de una entrada analógica leída (de 0 a 1023).

analogWrite(pin, value): escribe un valor analógico (señal tipo PWM) en un pin digital que soporta salida analógica (pines 3, 5, 6, 9, 10, y 11 para ATMEGA 168); valores debes estar comprendidos entre 0 (equivalente a off) y 255 (equivalente a on).

18/04/23

NOTA: OTRA FORMA DE PROCESAR CON EL ARDUINO CON EL PROCESSING 2:

Se puede controlar Arduino desde Processing sin necesidad de incluir la libraria Arduino en processing, en este caso se trata de recoger datos del puerto que la tarjeta Arduino envia al puerto serie.

Procedimiento:1.- Se carga en la tarjeta Arduino el programa que se encargue de escribir en el puerto el dato que después leera Procesing y lo incorporara en el programa que este ejecutando.

2.- Cargar y ejecutar el programa en el IDE Processing que recogerá los datos que Arduino le envía por el puerto serie.

18/04/23

EMPEZAREMOS A REALIZAR UNA SERIE DE

EJECICIOS PRACTICOS

18/04/23

/** enciende el led cuando se presiona el botón del ratón* apaga cuando levantamos el botón*/import processing.serial.*; //Importamos las librerías necesariasimport cc.arduino.*;Arduino arduino; // Crea el objeto Arduinoint ledPin = 13; // Designa el numero de PIN para el LEDvoid setup() { //Configura el puerto y las señales con las que va a trabajarsize(200, 200);arduino = new Arduino(this, Arduino.list()[0], 57600);

arduino.pinMode(ledPin, Arduino.OUTPUT); // Configura el PIN13 como salidaarduino.digitalWrite(ledPin, Arduino.HIGH); //Enciende el LED}void draw() { //Dibuja una ventana de interacciónif (mousePressed == true) { //pregunta si se ha pulsado el botón del ratónarduino.digitalWrite(13,Arduino.LOW); // Si se ha pulsado apaga el LED} else {arduino.digitalWrite(13,Arduino.HIGH); // Si no esta pulsado enciende el LED}}

18/04/23

/** Raton sin presionar-> LED off**/import processing.serial.*;import cc.arduino.*;Arduino arduino;int ledPin = 13;void setup() {size(200, 200);arduino = new Arduino(this, Arduino.list()[0], 57600);arduino.pinMode(ledPin, Arduino.OUTPUT);arduino.digitalWrite(ledPin, Arduino.HIGH);}void draw() {}void mousePressed() { // Procedimiento para botón pulsadoarduino.digitalWrite(ledPin, Arduino.LOW);}void mouseReleased() { //Procedimiento para botón levantadoarduino.digitalWrite(ledPin, Arduino.HIGH);}

18/04/23

/* * El led se enciende y apaga al cambiar el estado del ratón (conmutador on/off)**/import processing.serial.*;import cc.arduino.*;Arduino arduino;int ledPin = 13;boolean isLedOn = false;void setup() {size(200, 200);arduino = new Arduino(this, Arduino.list()[0], 57600);arduino.pinMode(ledPin, Arduino.OUTPUT);arduino.digitalWrite(ledPin, Arduino.HIGH);}void draw() {}void mousePressed() { //Procedimiento para testear el estado del ratón if(isLedOn) {arduino.digitalWrite(ledPin, Arduino.HIGH);} else { arduino.digitalWrite(ledPin, Arduino.LOW); } isLedOn = !isLedOn;}

18/04/23

/** Al pulsar con el ratón de forma conmutada el LED parpadea*/import processing.serial.*;import cc.arduino.*;Arduino arduino;int ledPin = 13;boolean blinkLed = false; //Variable que indica si el LED esta parpadeandovoid setup() {size(200, 200);arduino = new Arduino(this, Arduino.list()[0], 57600);arduino.pinMode(ledPin, Arduino.OUTPUT);arduino.digitalWrite(ledPin, Arduino.LOW); }void draw() {if(blinkLed) {arduino.digitalWrite(ledPin, Arduino.LOW);delay(50);arduino.digitalWrite(ledPin, Arduino.HIGH);delay(50);} else {arduino.digitalWrite(ledPin, Arduino.LOW);}}void mousePressed() { // Detecta si el ratón esta pulsadoblinkLed = !blinkLed;}

18/04/23

18/04/23

import processing.serial.*; import cc.arduino.*; Arduino arduino;color off = color(4, 79, 111); // Definimos los colores del botón en estado offcolor on = color(84, 145, 158); // Definimos los colores del botón en estado on// designamos en un array de tamaño 13 el estado de cada una de las entradasint[] values = { Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW,Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW,Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW };void setup() {size(470, 200); arduino = new Arduino(this, Arduino.list()[0], 57600);for (int i = 0; i <= 13; i++){arduino.pinMode(i, Arduino.OUTPUT);}void draw() {background(off); stroke(on);for (int i = 0; i <= 13; i++) { if (values[i] == Arduino.HIGH) fill(on); else fill(off); rect(420 - i * 30, 30, 20, 20);}}// Procedimiento para detectar si el ratón se ha pulsado sobe uno de los botonesvoid mousePressed() { int pin = (450 - mouseX) / 30; if (values[pin] == Arduino.LOW) {arduino.digitalWrite(pin, Arduino.HIGH); values[pin] = Arduino.HIGH;} else {arduino.digitalWrite(pin, Arduino.LOW);values[pin] = Arduino.LOW;}}

18/04/23

/** encendido y apagado gradual de un LED - PWM -*/import processing.serial.*; import cc.arduino.*; Arduino arduino;int pwm=0; //Variable nivel de iluminación del LEDint ledPin=9;boolean rising=true; // indica si el encendido es hacia arriba de 0-255void setup() {size(200, 200);arduino = new Arduino(this, Arduino.list()[0], 57600);arduino.pinMode(ledPin, Arduino.OUTPUT);arduino.analogWrite(ledPin, pwm);}void draw() {arduino.analogWrite(ledPin, pwm); // Escribe el valor pwm en la salida PIN9 del LEDprintln(pwm); // Escribe en la ventana de datos el valor de la variable pwmif(rising) { // contador ascendente hasta llegar a 255pwm+=2;if(pwm>=255) {rising=false;}}else {pwm-=2; // contador descendente hasta llegar a 0if(pwm<=0) {rising=true;}}}

18/04/23

18/04/23

/** Gobierno del nivel de encendido de un led mediante un potenciómetro*/import processing.serial.*;import cc.arduino.*;Arduino arduino;int ledPin=9; int potPin=0;int val;

void setup() {size(200, 200);arduino = new Arduino(this, Arduino.list()[0], 57600);arduino.pinMode(ledPin, Arduino.OUTPUT);}void draw() {//lee la señal del potenciometro (0..1024), divide por cuatro (0..255)val = arduino.analogRead(potPin)/4;/envia al LED el valor leido y ajustado (0..255) señal PWMarduino.analogWrite(ledPin, val);//varia la intensidad del color de la ventana de processingbackground(255-val,0,0);}

18/04/23

Lectura de un sensor y representación en modo graficoy texto del valor leído.

18/04/23

/*** Representación de valor procedente de un sensor.*/import processing.serial.*;import cc.arduino.*; int[] xvals; // SAVE valores leídosint val; // Valor leídoint arrayindex = 0; // Puntero o índice del arrayArduino arduino;int potPin=0;void setup(){size(256, 256);xvals = new int[width];arduino = new Arduino(this, Arduino.list()[0], 57600);}void draw(){background(0); // shift array left by onefor(int i=1; i<width; i++) {xvals[i-1] = xvals[i];}// añade un nuevo valor al final del array - //lee la entrada analógica (0..1024), divide su valor por 4 (0..255) // to stay within canvas drawing limitsval = arduino.analogRead(potPin);xvals[width-1] = val/4;// dibuja el arrayfor(int i=1; i<width; i++) {stroke(255);point(i, 255-xvals[i]); //flip y coordinate so 0 is at bottom}textAlign(RIGHT);text(val, 200, 30);text(5.0*(xvals[width-1]/255.0)+"V",200,60);}

18/04/23