1 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:

// 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]

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.

2 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)]

2.1 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:

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

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

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

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

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

2.3 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:

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