Joan Soler-Adillon || Programació: Conceptes
Despatx 52.803 (Campus de la comunicació, UPF) || 93 542 1238
----------------------------------------------------------------
----------------------------------------------------------------
PROGRAMACIÓN: CONCEPTOS || MASTER EN ARTES DIGITALES
Sección 4: Setup y Draw, Procesing en movimiento
1. Setup y Draw
1.- Setup y Draw: Processing en movimiento
Si hay algo muy específico de Processing (y que pone especialmente nerviosos a algunos programadores de verdad) son el void setup() y el void draw().
Podéis ignorar por ahora el "void" y los paréntesis del final sin nada dentro (és un tema de funciones).
Lo importante es que setup y draw son las dos funciones principales de Processing. Las que se ejecutan siempre. Primero setup, una sola vez, y luego draw repetidamente. Esto es lo que rompe la lineariedad estricta en la lectura y ejecución del código, y lo que nos permite hacer cosas mucho más interesantes que simples dibujos.
Hasta ahora las hemos ignorado porque el código que utilizábamos se ejecutaba una sola vez, de arriba a abajo. Ahora, todo lo que esté dentro de draw se va a ejecutar repetidamente, también de arriba a abajo, hasta que paremos el programa (también hay la opción de pararlo con código, pero por ahora lo ignoramos).
Con los dos ejemplos que siguen debería verse claro. Mirad el código, analizadlo, y después lo ejecutáis a ver si se cumplen vuestras predicciones:
int numero;
void setup(){
numero = 13;
}
void draw(){
numero = numero + 1;
println(numero);
}
y
float pos;
void setup(){
size(400,100);
pos = 13;
}
void draw(){
pos = pos + 0.1;
ellipse(pos,50,20,20);
}
y si retomamos el último ejemplo de las variables de sistema, con la ellipse, podemos ver como combinando éstas con una variable convencional y con setup() y draw() podemos por fin tener una cierta (aunque básica) interactividad:
int sz = 30;
void setup(){
size(200,200);
}
void draw(){
ellipse(mouseX,mouseY,sz,sz);
}
Y finalmente, añadiendo una sola línea, borramos en cada frame el dibujo anterior para dar la sensación de movimiento:
int sz = 30;
void setup(){
size(200,200);
}
void draw(){
background(0);
ellipse(mouseX,mouseY,sz,sz);
}
...y como siempre, la referéncia de Processing:
----------------------------------------------------------------------------------------------------