Animación con processing - Capítulo 1

Después no escribir en todo este tiempo, estoy regresando con algunos de los grupos que tengo para ver algo sobre graficación con Processing, la cual es una herramienta con ya más de 15 años desarrollada por Casey Reas y Bejamin Fry, dos investigadores y profesores altamente interesados en el aprendizaje de sus alumnos. Para más información pueden visitar el sitio de processing.

En esta sección emplearemos dos archivos de imagen, con los cuales se irá desarrollando parte de está práctica introductoria. Primero describiremos las siguientes variables:

int x=0;  // servirá para indicar la posición de nuestro personaje en pantalla en el eje de las x's.
PImage p; // Contiene la imagen principal con todas las secuencias de nuestro personaje
PImage fondo; // Es el lugar donde se moverá el personaje
PImage m[]; // aquí se guardará de momento en un arreglo cada secuencia del personaje
int n; // servirá para indicar el índice en el arreglo   
int y; // indica la altura para la posición del personaje en pantalla

Un método importante es el setup(), este método se ejecuta al inicio y corre una sola vez, aquí se inicializa el "SKETCH".

public void setup(){
    size(1000,500);
    fondo = loadImage("calle.png"); // nombre del recurso imagen
    m = new PImage[8];
    p = loadImage("felipillo.png");   // nombre del recurso imagen
    m[0] = p.get(28,0,75,140);  //47
    m[1] = p.get(126,14,88,140);  // 
    m[2] = p.get(214,0,108,140);
    m[3] = p.get(334,-4,100,140);
    m[4] = p.get(450,-2,100,140);
    m[5] = p.get(551,12,100,140);
    m[6] = p.get(652,0,100,140);
    m[7] = p.get(766,-2,98,140);
    n=0;
    y = 300;
    frameRate(8);                           // Velocidad de cuadros a desplegar, a menor valor más lento
}

Una vez que se han cargado las imágenes es posible iniciar el Sketch, para esto existe un método que se llama "draw()", el cual es un método ciclo, siempre se ejecuta de forma ciclica a menos que sea detenido desde el mismo método.

public void draw(){
    image(fondo,0,-150);  // Se depliega primero el fondo de pantalla
    image(m[n],x,y);        // Después se depliega la imagen
     if(x > width)
        x=0;

}

El orden que se despliegan las imágenes obedece a que es como un efecto grafiti, la imagen que se vaya poniendo posteriormente estará sobre las demás imágenes previamente colocadas.

Finalmente hay que tener control sobre nuestro personaje al que llamaremos "Martincillo", esto se hará usando la tecla de flecha derecha del teclado.

public void keyPressed(){
       if(keyCode == RIGHT){
           n++;
           x += 8;
           if(n==8)
              n=0;
       }
}

Este método directamente monitorea si alguna tecla ha sido presionada, si es así usando el atributo "keyCode" se identifica de acuerdo al valor de la tecla presionada en este caso "RIGHT", si es así se incremente la posición en el eje de las x's y se incrementa el índice del arreglo para traer la imagen siguiente de la secuencia.

Finalmente tendrá algo como en la imagen mostrada, si usa la tecla de flecha derecha irá viendo la secuencia de animación de Martincillo.

Los recursos fueron tomados de la web, pero si se ha entendido el proceso, pueden crear sus propias imágenes para el proyecto:

Referencia 1  Personaje
Referencia 2  Fondo


¡Saludos y buena programación, hasta la próxima!