Notas sobre animación utilizando la variable especial frameCount
.
La variable frameCount
es una variable especial de Processing de tipo int
que indica en qué número de frame está el sketch, creciendo indefinidamente.
La podemos usar directamente como parámetro en alguna parte de nuestro dibujo.
void setup(){
size( 640, 480 );
}
void draw(){
// reestablece el fondo:
background( 255 );
// dibuja un círculo en movimiento,
// la posición en X corresponde al número de frame:
ellipse( frameCount, 240, 50, 50);
}
La variable frameCount
crece indefinidamente. Podemos usar el operador módulo para obtener una secuencia de números que se repita y que vaya entre 0 y alguna cantidad.
Por ejemplo:
// 'frameLoop' irá de 0 a 29:
int frameLoop = frameCount % 30;
// la posición en X cambiará entre 0 y 29:
ellipse( frameLoop, 240, 50, 50);
Si necesitamos que nuestros parámetros cambien más lento, podemos dividirlos entre números mayores a 1:
// el círculo amarillo se moverá a la mitad de velocidad que el azul:
// color azul:
fill( 0, 0, 255);
ellipse( frameCount, 200, 50, 50);
// color amarillo:
fill( 255, 255, 0);
ellipse( frameCount/2, 300, 50, 50);
Nota: Dividir entre un número mayor a 1 es lo mismo que multiplicar por un número menor a uno.
// esta multiplicación regresa un float, y esta división un int
0.5 == frameCount/2 frameCount*
También podemos hacer lo contrario, multiplicar las variables por números mayores a 1 para ir más rápido:
// el círculo amarillo se moverá al doble de velocidad que el azul:
// color azul:
fill( 0, 0, 255);
ellipse( frameCount, 200, 50, 50);
// color amarillo:
fill( 255, 255, 0);
ellipse( frameCount*2, 300, 50, 50);
Estas operaciones también las podemos aplicar al resultado de frameCount % N
, ya sea directamente o en forma de variable:
// frameLoop irá de 0 a 99:
int frameLoop = frameCount % 100;
// alenta el movimiento, y reduce su rango:
ellipse( frameLoop*0.2, 200, 50, 50);
// también podríamos escribir:
ellipse( (frameCount % 100) * 0.2, 200, 50, 50);
La función map( )
nos da más flexibilidad, pues la podemos utilizar para “convertir” un número que está dentro de un rango inicial, a su equivalente en un rango final.
Por ejemplo, si queremos que la posición en x
de un círculo vaya de 0 a width
en el tiempo correspondiente a 30 frames de manera repetitiva, podríamos hacer lo siguiente:
// cuenta repetidamente de 0 a 29 el número de frame
int frameLoop = frameCount % 30;
// convierte frameLoop
// rango original: de 0 a 29
// rango nuevo: de 0 a width
float posicionX = map( frameLoop, 0, 29, 0, width);
ellipse(posicionX, 240, 50, 50);
O si queremos que el color de fondo vaya de blanco a negro en 300 frames al iniciar el programa, y se quede así:
// convierte frameCount
// rango original: de 0 a 300
// rango nuevo: de 255 (blanco) a 0 (negro)
float brillo = map( frameCount, 0, 300, 255, 0);
background( brillo );
En este caso, frameCount
sigue creciendo más allá de 300 y el valor del brillo sigue disminuyendo, pero background( )
convierte el valor negativo a 0.