Taller processing arduino

CRFP – EDUCACIÓN CASTILLA – LA MANCA

Manuel Hidalgo Díaz

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.

15/04/23 TALLER PROCESSING-ARDUINO. II

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



• 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);

}


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.• …


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);

}

15/04/23

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

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

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

14/11/13 815/04/23 TALLER PROCESSING-ARDUINO. II

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

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

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

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

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

• Saltos: break, continue, return


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

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

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

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

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

• Saltos: break, continue, return


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 1115/04/23

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)


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)


PROCESSING 2D.

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


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.


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


PROCESSING 2D.

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


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, 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)


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); }


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

MOVIMIENTO 2D.

// Movimiento de pelota con rebote

void setup(){

}

void draw(){

}


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

INTERACTUAR CON EL MUNDO FÍSICO.


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

Taller processing arduino

Technology