Notas sobre animación utilizando la variable especial frameCount.

1 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);
}

2 Loops: frameCount con módulo

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.

[Operador módulo]

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

3 Escalas de tiempo

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
frameCount*0.5 == frameCount/2

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

4 Mapeo

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.

[Mapeo/conversión de valores]

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.