Movimiento

Processing permite la reproducción de secuencias de imágenes que crean una animación.

Imágenes secuenciales

Antes de presentarse las imagenes de manera secuencial, primero deben ser cargadas, la variable de las imágenes debe ser declarada antes fuera del setup() y draw() y asignarla dentro del setup(). En el siguiente ejemplo se cargan y reproducen 12 imágenes:

int numFrames = 12; // Número de imagenes en la animación
int frame = 0;
PImage[] images = new PImage[numFrames]; // Array de imágenes
void setup() {
size(100, 100);
frameRate(30); // Velocidad en fps
images[0] = loadImage("0.jpg");
images[1] = loadImage("1.jpg");
images[2] = loadImage("2.jpg");
images[3] = loadImage("3.jpg");
images[4] = loadImage("4.jpg");
images[5] = loadImage("5.jpg");
images[6] = loadImage("6.jpg");
images[7] = loadImage("7.jpg");
images[8] = loadImage("8.jpg");
images[9] = loadImage("9.jpg");
images[10] = loadImage("10.jpg");
images[11] = loadImage("11.jpg");
}
void draw() {
frame++;
if (frame == numFrames) {
frame = 0;
}
image(images[frame], 0, 0);
}

El próximo ejemplo muestra una alternative para leer imágenes utilizando una estructura for. Este código nos puede valer para utilizarlo en cualquier sistema que tenga entre 1 y 999 imágenes tan solo con cambiar el valor del número de frames. Cuando termina la animación regresa a la primera imagen.

La función nf() puede usarse para formatear el nombre de la imagen a leer. Con nf(i, 2) el número crece, empezando con un cero a la izquierda.

El operador % operator se usa para la variable frameCount para hacer que variable se incremente en cada frame y devuelve 0 si se pasa de 11.

int numFrames = 12;
PImage[] images = new PImage[numFrames];
void setup() {
size(400, 500);
frameRate(3);
for (int i = 0; i < images.length; i++) {
String imageName = + i + ".jpg";
images[i] = loadImage(imageName);
}
}
void draw() {
int frame = frameCount % numFrames;
image(images[frame], 0, 0);
}

Para mostrar las imágenes en un orden aleatorio, y con un tming (frames por segundo) también aleatorio. Puede dar el aspecto de mas framediferentes de los que realmente existen.

int numFrames = 12;
PImage[] images = new PImage[numFrames];
void setup() {
size(400, 500);
frameRate(3);
for (int i = 0; i < images.length; i++) {
String imageName = + i + ".jpg";
images[i] = loadImage(imageName);
}
}
void draw() {
int frame = int(random(0, numFrames));
image(images[frame], 0, 0);
frameRate(random(1, 60.0));
}

Hay muchas formas de controlar la velocidad de ejecución de una animación. La function frameRate() es la manera mas simple. Colocar la función frameRate() en setup() como en el ejemplo anterior.

Imagenes en movimiento

Otra posibilidad de animación con imagenes además de cargar una secuencia es moverlas, En el siguiente ejemplo movemos una imagen de izquierda a derecha y regresa a la izquierda cuando desaparece de la pantalla.

PImage img;
float x;
void setup() {
size(400, 500);
img = loadImage("0.jpg");
}
void draw() {
background(204);
x += 0.5;
if (x > width) {
x = -width;
}
image(img, x, 0);
}

Las funciones de transformación también se pueden aplicar a las imágenes. Se pueden trasladar, rotar y escalar. En el siguiente ejemplo una imagen se traslada al centro de la pantalla y se rota alrededor de centro.

PImage img;
float angle;
void setup() {
size(400, 500);
img = loadImage("0.jpg");
}
void draw() {
background(204);
angle += 0.01;
translate(200, 250);
rotate(angle);
image(img, -200, -250);
}

Las imágenes también pueden ser animadas cambiando sus atributos de dibujo. En el siguiente ejemplo la opacidad de una imagen se incrementa 0.5 en cada frame.

PImage img;
float opacity = 0;
void setup() {
size(200, 200);
img = loadImage("vg.jpg");
}
void draw() {
background(0);
if (opacity < 255) {
opacity += 0.5;
}
tint(255, opacity);
image(img, 0, 0);
}