Mejorando el ejemplo
Después de enseñar el ejemplo anterior a varias personas, me han propuesto que el personaje mirara en todas direcciones en vez de sólo a los lados. Pues nada... aquí podemos ver como modificar el ejemplo anterior para conseguirlo:
| 01 int nImagenes = 11;//11 imágenes 0,1,...,10 02 int oculto=9; //la imagen 9 es la que oculta las caras 03 int riendo=10; //la imagen 10 será la cara sonriente 04 //las 9 restantes carar mirando 05 int actual = oculto;//la primera vez la imagen que se muestra es la que oculta las caras 06 int ancho = 102, alto = 102;//en esta ocasión las medidas de la imagen ya es múltiplo de tres 07 int tercioAncho= ancho/3,tercioAlto=alto/3; 08 PImage[] imagenes = new PImage[nImagenes]; 09 void setup() 10 { 11 size(ancho, alto); 12 framerate(30); 13 background(255); 14 for (int i=0;i<nImagenes;i++) 15 imagenes[i] = loadImage("ysm0"+i/3+""+i%3+".jpg"); 16 // ej. imagen 7. i=7 7/3 =2, 7%3=1. la imagen 7 se llama ysm021.jpg 17 // el operador % nos da el resto de la división. 18 } 19 void draw() 20 { 21 if (mousePressed==true) actual =riendo; 22 else if ((mouseY>0 && mouseY<alto)&&(mouseX>0 && mouseX<ancho)) 23 actual = (mouseY/tercioAlto)*3+(mouseX/tercioAncho); 24 else actual=oculto; 25 image(imagenes[actual], 0, 0); 26 } |
En las tres primeras líneas uso variables para indicar el número de imágenes, 11 en esta ocasión. Esta vez guardo en variables el número de la imagen que oculta las caras y el número de la imagen de la cara riendo, esto facilitará la comprensión en las líneas 05, 21 y 24.
En la línea 05 indicamos que la imagen inicial que se verá es la 9, la que oculta la animación. En la línea 06 indico las medidas de las imágenes, en esta ocasión ya he elegido un tamaño múltiplo de 3.
En este ejemplo las imágenes se llaman ysm001, ysm001, ysm002, ysm100, ysm101, ysm102, ... Para convertir un número del 0 al 10 en estos números, lo que hacemos es dividir entre 3 el contador y hallamos el resto de dividir entre tres, lo que explico en las líneas 16 y 17.
Ahora vamos a ver los cambios en el método draw: si pulsamos con el ratón mostramos la imagen riendo (la 10). Si movemos el ratón sobre la imagen, miramos en que sector se encuentra, lo hacemos con unas cuantas cuentas.
Una cosa que no expliqué en el ejemplo anterior es que && significa AND (Y), se ejecutará la siguiente orden si ambas condiciones son verdaderas. || significa OR (O), se ejecutará la siguiente orden si alguna de las dos condiciones son verdaderas.
Aquí podemos ver la mejora conseguida:
 |  |