Download - Taller processing arduino
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
415/04/23 TALLER PROCESSING-ARDUINO. II
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);
}
15/04/23 TALLER PROCESSING-ARDUINO. II
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.• …
15/04/23 TALLER PROCESSING-ARDUINO. II
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
915/04/23 TALLER PROCESSING-ARDUINO. II
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
1015/04/23 TALLER PROCESSING-ARDUINO. II
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)
TALLER PROCESSING-ARDUINO. II 1215/04/23
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 1315/04/23
PROCESSING 2D.
• EJEMPLO SOBRE UNA LÍNEAEscribimos un programa “prog03_linea” y vamos añadiendo el siguiente código.
TALLER PROCESSING-ARDUINO. II 1415/04/23
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.
TALLER PROCESSING-ARDUINO. II 1515/04/23
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
TALLER PROCESSING-ARDUINO. II 1615/04/23
PROCESSING 2D.
• EJEMPLO DE ELIPSE Y CÍRCULOSEscribimos un programa “prog05_elipse” y vamos añadiendo el siguiente código.
TALLER PROCESSING-ARDUINO. II 1715/04/23
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)
TALLER PROCESSING-ARDUINO. II 1815/04/23
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 1915/04/23
A continuación vamos a realizar un programa “prog06_pelotaSinRebote” que realiza movimientos.
MOVIMIENTO 2D.
// Movimiento de pelota con rebote
void setup(){
}
void draw(){
}
TALLER PROCESSING-ARDUINO. II 2015/04/23
A continuación vamos a realizar un programa “prog07_pelotaRebote” mejorando el anterior.