Intro Processing v1.5 - 09.pdf

40

Punto 9 – Continuidad en el tiempo: de la imagen estática a la dinámica

Ejecución contínua

Todos los bocetos programados hasta el momento son ejecutados por única vez y luego se detienen. Programas animados o sensibles a información en vivo deben ejecutarse de forma continua.

Función draw()

Los programas que se ejecutan de forma continua deben incluir una función llamada draw().

void draw() { instrucciones}

El código incluido en el bloque de la función draw() se ejecuta en forma de bucle hasta que el usuario presione el botón de detención o cierre la ventana de visualización.Un programa puede tener un único bloque draw().Cada vez que el bloque draw() finaliza, dibuja un nuevo fotograma (frame) y comienza nuevamente el código del bloque desde su primera línea.

Bloque de función draw()

Por defecto, el ordenador intenta dibujar 60 fotogramas por segundo. Si utilizamos la variable de sistema frameRate podremos saber cuantos cuadros máximos por segundo puede renderizar nuestro ordenador.

void draw() { println(frameRate);}

Función frameRate()

La función frameRate() determina el número máximo 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:

void draw() { frameRate(1); println(frameCount);}

Veamos a continuación ocho ejemplos de código que general algún tipo de animación.

Introducción a Processing v1.5+ Docente: Raúl Lacabanne

41

Creamos animaciones cuando cambiamos atributos visuales de un cuadro al otro:

float y = 0.0;

void draw() {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 incluíamos dentro?

void draw() {frameRate(30);float y = 0.0;line(0, y, 100, y);y = y + 0.5;}

Para que tengamos una animación la variable y debe ser declarada fuera del bloque, ya que de lo contrario esta se redefiniría y reasignaría 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 línea que aparece. Si deseamos poder ver el avance de la línea sobre el fondo, debemos “refrescar” el fondo cada vez que reiniciemos el draw() mediante la función background().

float y = 0.0;

void draw() {frameRate(30);background(204);line(0, y, 100, y);y = y + 0.5;}

Incorporando una pequeña expresión en los parámetros de background(), ¡la animación va ganando interés!

float y = 0.0;

void draw() {frameRate(30);background(y * 2.5);line(0, y, 100, y);y = y + 0.5;}


42

Y si incorporamos una pequeña estructura de condicional generamos ciclos visibles.

float y = 0.0;

void draw() { 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 animación IV y modificarla para obtener otro resultado visual:

int y = 0;int direccion = 1;

void draw() { 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 animación anterior. No existen formas fijas de resolver un problema, por suerte podemos abordar diferentes enfoques para la resolución del mismo:

int y = 0;int direccion = 1;

void draw() { frameRate(30); background(204);

if (y > 100 || y < 0) { direccion *= 1; }

y = y + direccion; line(0, y, 100, y);}


43

Lectura recomendada

• Buioli, I. & Pérez Marín, J. "Processing: un lenguaje al alcance de todos", Autoedición, 2013, Unidad 18 "Estructuras: Continuidad" (pag. 89).

• Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and Artists”, MIT Press, 2007, Capítulo "Structure 2: Continuous" (pag. 173).

Ejercicio 11

• Utilizar la estructura draw() y dos variables para animar:◦ una elipse y tres líneas.

• Comentar todas las instrucciones.


Documents

Intro Processing v1.5 - 09.pdf