Contenido

1 Sesin: 14-11-13
Processing como lenguaje de programacin.
Entorno de programacin.
Elementos, modos y recurso de programacin.
2 Sesin: 21-11-13
Dibujar en Processing 2D
Interactuar con el mundo fsico.
Arduino y sensores.
3 Sesin: 28-11-13
Comunicacin entre Arduino y Processing.
Aplicaciones.

21/05/15

TALLER PROCESSING-ARDUINO. II

ENTORNO DE PROGRAMACIN (IDE)

21/05/15

TALLER PROCESSING-ARDUINO. II

ENTORNO DE PROGRAMACIN (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 instruccin.

Otras primitivas bsicas de dibujo
- Punto
- Lnea

21/05/15

TALLER PROCESSING-ARDUINO. II

ENTORNO DE PROGRAMACIN (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);
}
21/05/15

TALLER PROCESSING-ARDUINO. II

ELEMENTOS DE PROGRAMACIN. SETUP()

Partes fundamentales de la estructura del
programa, son dos funciones: setup() y draw
().
1.- La funcin setup(). Esta funcin slo se
ejecuta unavoid
vez
setup() {
size(480, 120);
}

Esta funcin sirve para inicializar la aplicacin:

Definir el tamao del marco.
El color de fondo.

El color de relleno.

21/05/15

TALLER PROCESSING-ARDUINO. II

ELEMENTOS DE PROGRAMACIN. DRAW()

2.- La funcin draw().
Esta funcin 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);
}

21/05/15
14/11/13

TALLER PROCESSING-ARDUINO. II

ELEMENTOS DE UN PROGRAMA. Resumen

- TIPOS DE DATOS (variables):
- int, long, float, char, boolean,
- array
- OPERADORES.
- Aritmticos, relacionales, lgicos,

21/05/15
14/11/13

TALLER PROCESSING-ARDUINO. II

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: }
Ejemplo
21/05/15
TALLER PROCESSING-ARDUINO. II
Saltos: break, continue, return

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: }
Ejemplo
21/05/15
TALLER PROCESSING-ARDUINO. II
Saltos: break, continue, return

10

PROCESSING 2D.
- SISTEMA DE COORDENADAS 2D.

El tamao de la ventana se establece con la funcin size(),

instruccin que se escribe en la funcin 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.

21/05/15

TALLER PROCESSING-ARDUINO. II

11

PROCESSING 2D.
- COLOR Y RELLENO.

El color de los trazos se determinan con la funcin

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 funcin fill()
fill(128) => RGB(128, 128, 128)
fill(200, 120, 90) => RGB(200, 120, 90)
21/05/15

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

21/05/15

TALLER PROCESSING-ARDUINO. II

13

PROCESSING 2D.
EJEMPLO SOBRE UNA LNEA
Escribimos un programa prog03_linea y vamos
aadiendo el siguiente cdigo.
size(100, 100);
background(0);
stroke(255);
strokeWeight(5);
line(0, 0, 99, 99);

21/05/15

//tamao de la ventana
//color de fondo
//color del trazo
//grosor del trazo

TALLER PROCESSING-ARDUINO. II

14

PROCESSING 2D.
EJEMPLO SOBRE UNA LNEA
Escribimos un programa prog04_linea y vamos
aadiendo el siguiente cdigo.
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));
}

21/05/15

TALLER PROCESSING-ARDUINO. II

15

PROCESSING 2D.
ELIPSE Y CRCULOS

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 parmetros 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 dimetros
ellipseMode(CORNER) => (x, y) hace referencia a la esquina
superior izquierda del rectngulo envolvente de la elipse
ellipseMode(CORNERS) => los cuatro parmetros de la elipse
hacen referencia a dos puntos opuestos del rectngulo envolvente
de la elipse
21/05/15

TALLER PROCESSING-ARDUINO. II

16

PROCESSING 2D.
EJEMPLO DE ELIPSE Y CRCULOS
Escribimos un programa prog05_elipse y vamos
aadiendo el siguiente cdigo.
size(200, 200);
background(0);
stroke(255, 0, 0);
strokeWeight(5);
fill(0, 255, 0);

//color del trazo

//grosor

// (x, y) y dimetros
ellipse(100, 100, 100, 50);
// 2 esquinas opuestas
ellipseMode(CORNERS);
ellipse(0, 0, 50, 50);

21/05/15

TALLER PROCESSING-ARDUINO. II

17

PROCESSING 2D.
PRIMITIVAS DE 2D
Adems de las primitivas que hemos visto estn
tambin las siguientes:
Arcos
Rectngulos
Tringulos
Cuadrilteros
Curvas (Bzier y Catmull-Rom)
Shapes (formas libres)

21/05/15

TALLER PROCESSING-ARDUINO. II

18

MOVIMIENTO 2D.
A continuacin vamos a realizar un programa prog06_pelotaSinRebote
que realiza movimientos.
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);
}

21/05/15

void draw(){
background(0);
x = x + vx;
y = y + vy;
ellipse(x,y,10,10);
TALLER PROCESSING-ARDUINO. II
}

19