Un ejemplo breve
Aquí os muestro un ejemplo de como podríamos crear un pequeño programa, una pequeña animación, en Processing.
Como ya dijimos, se basa en Java y genera Java, por lo que la sintaxis del lenguaje es la misma que dicho lenguaje. Lo que nos aporta Processing es la simplificación en el desarrollo de una aplicación gráfica. No hace falta que nos preocupemos demasiado en objetos, eventos, y conceptos avanzados de programación.
Os expongo el ejemplo y lo estudiamos:
| 01 // by Daniel Sancho <http://www.teclas.org> 02 // Created 06 Noviembre 2005 03 int nImagenes = 5; int actual = 4; 04 int ancho = 68, alto = 100; 05 int tercio= (ancho+1)/3; 06 PImage[] imagenes = new PImage[nImagenes]; 07 void setup() 08 { 09 size(ancho, alto); 10 framerate(30); 11 for (int i=0;i<nImagenes;i++) 12 imagenes[i] = loadImage("dse00"+i+".jpg"); 13 } 14 void draw() 15 { 16 if (mousePressed==true) actual =3; 17 else if (mouseX>0 && mouseX<ancho) actual = mouseX/tercio; 18 else actual=4; 19 if (mouseY<0 || mouseY>alto) actual=4; 20 image(imagenes[actual], 0, 0); 21 } |
Las dos primeras líneas son comentarios, anotaciones que serán ignoradas por el programa. Se ignora todo lo escrito detrás de //.
En las líneas 03, 04 y 05 creamos variables y le damos valores iniciales. En nImagenes guardo el número de imágenes que usaremos; actual es la variable que indicará cual es la imagen actual a mostrar (inicialmente la cuatro, el monigote. Las variables ancho y alto almacenan el alto y el ancho de las imágenes y de la ventana en que se ejecutará el programita. La variable tercio guarda el tercio del ancho de la imagen, para que sea múltiplo de tres le sumo uno (69/3 = 23).
en la línea 06 indicamos que necesitamos 6 imágenes, 6 objetos de tipo PImage. UFF, esto ya se complica... ¿cómo puedo saber yo eso? ... pues simplemente estudiando los numerosos ejemplos incluidos.
Bueno, ahora nos encontramos dos métodos, dos funciones, una llamada setup, que se ejecutará al comienzo y que inicializará todo lo necesario. Otra llamada draw que se repetirá a lo largo de la ejecución del programita.
En setup vemos:
línea 09 size(ancho,alto): esta orden indica el ancho y el alto de la ventana de la aplicación. Yo le doy el mismo valor que las imágenes.
línea 10 framerate(30): indicamos que queremos 30 imágenes por segundo, la velocidad con la que se ejecutará draw
líneas 11 y 12: con for... indico que repita la línea 12 para los valores de i: 0,1,2,3,4. Así que la línea 12 la repetirá 5 veces. La línea 12 se encarga de cargar las imágenes y guardarlas en la tabla que habíamos creado en la línea 6. Las imágenes se llaman "dse000.jpg", "dse001.jpg" ... y así sucesivamente.
El método draw se repetirá a razón de 30 veces por segundo, como indicamos en setup.:
línea 16: si está pulsado el botón del ratón, la imágen actual será la 0 (cara sonriente)
línea 17: si no está pulsado el botón y el ratón está encima de la imagen, la imagen actual será la cero, uno o dos en función de donde se encuentre el ratón, para ello basta con dividir el ancho de la imagen por su tercio (divido la imagen en tres partes si el ratón está en el lado izquierdo el resultado de la división será cero, así que se mostrará la imagen cero (mirando hacia la izquierda), si el ratón está por la zona central, la división dará resultado 1, mirando al frente, si está por la derecha la división dará dos, se mostrará la imagen mirando a la derecha).
línea 18: si el ratón está fuera de la imagen mostrará la imagen 4 (monigote)
línea 19: si el ratón está fuera de la imagen (compruebo la altura) mostrará la imangen 4.
línea 20: en líneas anteriores lo que hacíamos era guardar en la variable actual el número de la imagen que queremos mostrar. Es en esta línea donde decimos que muestre la imagen en pantalla. Como tenemos una tabla de imagenes le indicamos cual queremos que se muestre. los dos ceros indican la posición dentro de la ventana donde debe mostrar la imagen.
Espero no haber aburrido al personal. Ahora veamos el resultado:
 |  |