CRFP – EDUCACIÓN CASTILLA – LA MANCA Manuel Hidalgo Díaz Noviembre 2013

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.

26/04/2020 TALLER PROCESSING-ARDUINO. II 2

ENTORNO DE PROGRAMACIÓN (IDE)

26/04/2020 TALLER PROCESSING-ARDUINO. II 3

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

26/04/2020 TALLER PROCESSING-ARDUINO. II 4

ENTORNO DE PROGRAMACIÓN (IDE)

•

Ejemplo: prog02_prueba.pde

Vamos a escribir un programa y lo vamos a guardar con el nombre prog02_prueba.

} void setup() { size(480, 120); } void draw() { if (mousePressed) { fill(0); } } else { fill(255); ellipse(mouseX, mouseY, 80, 80);

26/04/2020 TALLER PROCESSING-ARDUINO. II 5

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

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.

•

…

26/04/2020 TALLER PROCESSING-ARDUINO. II 6

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.

} void draw() { if (mousePressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80);

TALLER PROCESSING-ARDUINO. II 7

ELEMENTOS DE UN PROGRAMA. Resumen

- TIPOS DE DATOS (variables): - int, long, float, char, boolean,… - array - OPERADORES. - Aritméticos, relacionales, lógicos,… TALLER PROCESSING-ARDUINO. II 8

ELEMENTOS DE UN PROGRAMA. Resumen

- ESTRUCTURAS DE CONTROL. • Delimitadores de bloque: { instrucciones; }

• while:

while ( expr ) { instrucciones } do { instrucciones } while ( expr ) Ejemplo

• 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: } • Saltos: break, continue, return Ejemplo 26/04/2020 TALLER PROCESSING-ARDUINO. II 9

ELEMENTOS DE UN PROGRAMA. Resumen

- ESTRUCTURAS DE CONTROL. • Delimitadores de bloque: { instrucciones; }

• while:

while ( test ) { instrucciones } do { instrucciones } while ( test ) Ejemplo

• 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: } • Saltos: break, continue, return 26/04/2020 TALLER PROCESSING-ARDUINO. II Ejemplo 10

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.

26/04/2020 TALLER PROCESSING-ARDUINO. II 11

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) 26/04/2020 TALLER PROCESSING-ARDUINO. II 12

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) 26/04/2020 TALLER PROCESSING-ARDUINO. II 13

PROCESSING 2D.

•

EJEMPLO SOBRE UNA LÍNEA

Escribimos un programa “prog03_linea” y vamos añadiendo el siguiente código.

size(100, 100); background(0); stroke(255); strokeWeight(5); line(0, 0, 99, 99); //tamaño de la ventana //color de fondo //color del trazo //grosor del trazo 26/04/2020 TALLER PROCESSING-ARDUINO. II 14

PROCESSING 2D.

•

EJEMPLO SOBRE UNA LÍNEA

Escribimos un programa “prog04_linea” y vamos añadiendo el siguiente código.

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)); } 26/04/2020 TALLER PROCESSING-ARDUINO. II 15

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

PROCESSING 2D.

•

EJEMPLO DE ELIPSE Y CÍRCULOS

Escribimos un programa “prog05_elipse” y vamos añadiendo el siguiente código.

size(200, 200); background(0); stroke(255, 0, 0); strokeWeight(5); fill(0, 255, 0);

// (x, y) y diámetros

ellipse(100, 100, 100, 50);

// 2 esquinas opuestas

ellipseMode(CORNERS); ellipse(0, 0, 50, 50); //color del trazo //grosor 26/04/2020 TALLER PROCESSING-ARDUINO. II 17

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) 26/04/2020 TALLER PROCESSING-ARDUINO. II 18

MOVIMIENTO 2D.

A continuación vamos a realizar un programa “prog06_pelotaSinRebote” que realiza movimientos.

26/04/2020

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 19

MOVIMIENTO 2D.

A continuación vamos a realizar un programa “prog07_pelotaRebote” mejorando el anterior.

} // Movimiento de pelota con rebote { void setup() } { void draw()

26/04/2020 TALLER PROCESSING-ARDUINO. II 20

INTERACTUAR CON EL MUNDO FÍSICO.

www.arduino.cc

https://www.dropbox.com/s/7ymvgdy24r8z0aw/Practicas%20Arduino%2BProcessing.pdf

26/04/2020 TALLER PROCESSING-ARDUINO. II 21