Este documento presenta una introducción a Processing y Arduino. Cubre temas como el entorno de programación de Processing, elementos básicos como setup() y draw(), dibujo 2D, movimiento 2D, e interacción con Arduino. El taller consiste en 3 sesiones para cubrir Processing como lenguaje de programación, dibujo 2D e interacción con sensores, y comunicación entre Arduino y Processing para aplicaciones.

1. CRFP – EDUCACIÓN CASTILLA – LA MANCA
Manuel Hidalgo Díaz

2. 2
Contenido
1ª Sesión: 14-11-13
Processing como lenguaje de programación.
Entorno de programación.
Elementos, modos y recurso de programación.
2ª Sesión: 21-11-13
Dibujar en Processing 2D
Interactuar con el mundo físico.
Arduino y sensores.
3ª Sesión: 28-11-13
Comunicación entre Arduino y Processing.
Aplicaciones.
28/04/15 TALLER PROCESSING-ARDUINO. II

3. ENTORNO DE PROGRAMACIÓN (IDE)
328/04/15 TALLER PROCESSING-ARDUINO. II

4. ENTORNO DE PROGRAMACIÓN (IDE)
• Ejemplo: prog01_prueba.pde
Vamos 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
428/04/15 TALLER PROCESSING-ARDUINO. II

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.
5
void setup() {
size(480, 120);
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
28/04/15 TALLER PROCESSING-ARDUINO. II

6. 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
6
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.
• …
28/04/15 TALLER PROCESSING-ARDUINO. II

7. 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.
14/11/13 TALLER PROCESSING-ARDUINO. II 7
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
28/04/15

8. ELEMENTOS DE UN PROGRAMA. Resumen
- TIPOS DE DATOS (variables):
- int, long, float, char, boolean,…
- array
- OPERADORES.
- Aritméticos, relacionales, lógicos,…
14/11/13 828/04/15 TALLER PROCESSING-ARDUINO. II

9. ELEMENTOS DE UN PROGRAMA. Resumen
- ESTRUCTURAS DE CONTROL.
• Delimitadores de bloque: { instrucciones; }
• while:
while ( expr ) { instrucciones } Ejemplo
do { instrucciones } while ( expr )
• for
for ( begin; end; inc ) {instrucciones } Ejemplo
• if/else
if ( expr ) {instrucciones }
if ( expr ) {instrucciones } else { instrucciones } Ejemplo
• switch
switch ( var ) { case val: instrucciones default: } Ejemplo
• Saltos: break, continue, return
928/04/15 TALLER PROCESSING-ARDUINO. II

10. ELEMENTOS DE UN PROGRAMA. Resumen
- ESTRUCTURAS DE CONTROL.
• Delimitadores de bloque: { instrucciones; }
• while:
while ( test ) { instrucciones } Ejemplo
do { instrucciones } while ( test )
• for
for ( begin; test; inc ) {instrucciones } Ejemplo
• if/else
if ( test ) {instrucciones }
if ( test ) {instrucciones } else { instrucciones } Ejemplo
• switch
switch ( val ) { case val_1: instrucciones default: } Ejemplo
• Saltos: break, continue, return
1028/04/15 TALLER PROCESSING-ARDUINO. II

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.
TALLER PROCESSING-ARDUINO. II 1128/04/15

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)
TALLER PROCESSING-ARDUINO. II 1228/04/15

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)
TALLER PROCESSING-ARDUINO. II 1328/04/15

14. PROCESSING 2D.
• EJEMPLO SOBRE UNA LÍNEA
Escribimos un programa “prog03_linea” y vamos añadiendo
el siguiente código.
TALLER PROCESSING-ARDUINO. II 1428/04/15
size(100, 100); //tamaño de la ventana
background(0); //color de fondo
stroke(255); //color del trazo
strokeWeight(5); //grosor del trazo
line(0, 0, 99, 99);

15. PROCESSING 2D.
• EJEMPLO SOBRE UNA LÍNEA
Escribimos un programa “prog04_linea” y vamos añadiendo
el siguiente código.
TALLER PROCESSING-ARDUINO. II 1528/04/15
size(200, 200);
background(0);
//utilizamos una estructura de control repetitiva
for (int i=0; i<100; i++) {
stroke(random(255), random(255), random(255));
strokeWeight(random(10));
line(0, 0, random(200), random(200));
}

16. 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
TALLER PROCESSING-ARDUINO. II 1628/04/15

17. PROCESSING 2D.
• EJEMPLO DE ELIPSE Y CÍRCULOS
Escribimos un programa “prog05_elipse” y vamos añadiendo
el siguiente código.
TALLER PROCESSING-ARDUINO. II 1728/04/15
size(200, 200);
background(0);
stroke(255, 0, 0); //color del trazo
strokeWeight(5); //grosor
fill(0, 255, 0);
// (x, y) y diámetros
ellipse(100, 100, 100, 50);
// 2 esquinas opuestas
ellipseMode(CORNERS);
ellipse(0, 0, 50, 50);

18. PROCESSING 2D.
• PRIMITIVAS DE 2D
Ademá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)
TALLER PROCESSING-ARDUINO. II 1828/04/15

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);
}
TALLER PROCESSING-ARDUINO. II 1928/04/15
A continuación vamos a realizar un programa “prog06_pelotaSinRebote” que realiza
movimientos.

20. MOVIMIENTO 2D.
// Movimiento de pelota con rebote
void setup()
{
}
void draw()
{
}
TALLER PROCESSING-ARDUINO. II 2028/04/15
A continuación vamos a realizar un programa “prog07_pelotaRebote” mejorando el
anterior.

21. INTERACTUAR CON EL MUNDO FÍSICO.
TALLER PROCESSING-ARDUINO. II 2128/04/15
www.arduino.cc
https://www.dropbox.com/s/7ymvgdy24r8z0aw/Practicas%20Arduino%2BProcessing.pdf