---
title: "Ciclo de animación"
---

# Estructura general

Para que un sketch de Processing pueda tener movimiento, ya sea autónomo o a partir de interacción, necesita estar construido con la siguiente estructura:

```java
// declara VARIABLES GLOBALES (opcional)

// SETUP
void setup(){
  // crea ventana
  size( 640, 480 );

  // prepara variables y parámetros
}

// DRAW
void draw(){
  // dibuja!
}
```

Las variables globales son las que usaremos en todo nuestro programa; en especial las que guardan valores que no se reinician constantemente, como acumuladores, contadores, y banderas (flags)

[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables.html)

El bloque de código dentro de `setup()` se ejecuta solo una vez, y al inicio del programa.

El bloque de código dentro de `draw()` se ejecuta repetidamente, 30 veces por segundo (por default), y así se mantiene indefinidamente.


# Fondo

Podemos manejar el fondo del sketch de diferentes maneras. Los siguientes ejemplos de animación se basan en la variable `frameCount`.

[[Animación en función del tiempo (*frameCount*)]](/notas/animacion-frameCount.html)

## Limpiar en cada *frame*

Si usamos la función `background( )` en el inicio de la función `draw()`, efectivamente estaremos "limpiando" todo lo dibujado previamente para empezar con un cuadro limpio:

```java
void setup(){
  size( 640, 480 );
}

void draw(){
  // reestablece el fondo:
  background( 255 );

  // dibuja un círculo en movimiento:
  ellipse( frameCount, 240, 50, 50);
}
```

## Dibujar encima

Si no usamos la función `background( )` en el ciclo de animación, cada elemento dibujado en la función de `draw()` se agregará a lo dibujado previamente.

```java
void setup(){
  size( 640, 480 );

  // fondo inicial:
  background( 255 );
}

void draw(){
  // dibuja un círculo en movimiento,
  // dejando marca por donde pasa:
  ellipse( frameCount, 240, 50, 50);
}
```

## Marcas temporales

Un punto medio consiste en no usar la función `background( )` pero sí un rectángulo con dimensiones del canvas, y color de relleno parcialmente transparente.

En cada *frame*, este rectángulo ocultará parte de lo dibujado previamente. Lo más antiguo tenderá a desaparecer:

```java
void setup(){
  size( 640, 480 );

  // fondo inicial:
  background( 255 );
}

void draw(){
  // relleno blanco con muy poca opacidad
  fill( 255, 10);

  // rectángulo que ocupa todo el canvas:
  rect(0, 0, width, height);
 
  // dibuja un círculo en movimiento,
  // dejando marca por donde pasa:
  ellipse( frameCount, 240, 50, 50);
}
```
