---
title: "Animación respecto al tiempo (*frameCount*)"
---

Notas sobre animación utilizando la variable especial `frameCount`.

# 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.

```java
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);
}
```

# 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]](/notas/modulo.html)

Por ejemplo:

```java
// '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);
``` 

# Escalas de tiempo

Si necesitamos que nuestros parámetros cambien más lento, podemos dividirlos entre números mayores a 1:

```java
// 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*. 

```java
// 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:

```java
// 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:

```java
// 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);
```

# 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]](/notas/map.html)

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:

```java
// 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í:

```java
// 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.

