40

Punto 9 Continuidad en el tiempo: de la imagen esttica a la

dinmica
Ejecucin contnua
Todos los bocetos programados hasta el momento son ejecutados por nica vez y luego se detienen.
Programas animados o sensibles a informacin en vivo deben ejecutarse de forma continua.

Funcin draw()
Los programas que se ejecutan de forma continua deben incluir una funcin llamada draw().
voiddraw(){
instrucciones
}

El cdigo incluido en el bloque de la funcin draw() se ejecuta en forma de bucle hasta que el
usuario presione el botn de detencin o cierre la ventana de visualizacin.
Un programa puede tener un nico bloque draw().
Cada vez que el bloque draw() finaliza, dibuja un nuevo fotograma (frame) y comienza
nuevamente el cdigo del bloque desde su primera lnea.

Bloque de funcin draw()

Por defecto, el ordenador intenta dibujar 60 fotogramas por segundo. Si utilizamos la variable de
sistema frameRate podremos saber cuantos cuadros mximos por segundo puede renderizar
nuestro ordenador.
voiddraw(){
println(frameRate);
}

Funcin frameRate()
La funcin frameRate() determina el nmero mximo de fotogramas por segundo que renderizar
el programa siempre y cuando no exceda los valores posibles a realizar por el sistema.
Si utilizamos la variable de sistema frameCount podremos llevar un registro de la cantidad de
cuadros renderizados hasta el momento:
voiddraw(){
frameRate(1);
println(frameCount);
}

Veamos a continuacin ocho ejemplos de cdigo que general algn tipo de animacin.

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

41
Creamos animaciones cuando cambiamos atributos visuales de un cuadro al otro:
floaty=0.0;
voiddraw(){
frameRate(30);
line(0,y,100,y);
y=y+0.5;
}

Debemos observar que la variable se define por fuera del bloque draw(). Qu hubiera pasado si la
incluamos dentro?
voiddraw(){
frameRate(30);
floaty=0.0;
line(0,y,100,y);
y=y+0.5;
}

Para que tengamos una animacin la variable y debe ser declarada fuera del bloque, ya que de lo
contrario esta se redefinira y reasignara al mismo valor cada vez que se vuelve a iniciar el bucle.
Como podemos observar, el fondo del lienzo va cambiando de color de acuerdo a cada nueva lnea
que aparece. Si deseamos poder ver el avance de la lnea sobre el fondo, debemos refrescar el
fondo cada vez que reiniciemos el draw() mediante la funcin background().
floaty=0.0;
voiddraw(){
frameRate(30);
background(204);
line(0,y,100,y);
y=y+0.5;
}

Incorporando una pequea expresin en los parmetros de background(), la animacin va

ganando inters!
floaty=0.0;
voiddraw(){
frameRate(30);
background(y*2.5);
line(0,y,100,y);
y=y+0.5;
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

42
Y si incorporamos una pequea estructura de condicional generamos ciclos visibles.
floaty=0.0;
voiddraw(){
frameRate(30);
background(204);
line(0,y,100,y);
y=y+0.5;
if(y>height){
y=0;
}
}

O bien podemos volver a tomar la animacin IV y modificarla para obtener otro resultado visual:
inty=0;
intdireccion=1;
voiddraw(){
frameRate(30);
background(204);
if(y>100){
direccion=1;
}
if(y<0){
direccion=1;
}
y=y+(1*direccion);
line(0,y,100,y);
}

Esta es otra manera de resolver la animacin anterior. No existen formas fijas de resolver un
problema, por suerte podemos abordar diferentes enfoques para la resolucin del mismo:
inty=0;
intdireccion=1;
voiddraw(){
frameRate(30);
background(204);
if(y>100||y<0){
direccion*=1;
}
y=y+direccion;
line(0,y,100,y);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

43

Lectura recomendada

Buioli, I. & Prez Marn, J. "Processing: un lenguaje al alcance de todos", Autoedicin,

2013, Unidad 18 "Estructuras: Continuidad" (pag. 89).
Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and
Artists, MIT Press, 2007, Captulo "Structure 2: Continuous" (pag. 173).

Ejercicio 11

Utilizar la estructura draw() y dos variables para animar:

una elipse y tres lneas.
Comentar todas las instrucciones.

IntroduccinaProcessingv1.5+

Docente:RalLacabanne