Processing és una aplicació de codi obert amb un llenguatge per a la programació d'imatges, animació, i so.

La seva sintaxi, està basada en Java però és més senzilla. És utilitzat per estudiants, artistes, dissenyadors, arquitectes, investigadors i aficionats.

En aquest CodeLab implementarem una aplicació, utilitzant Processing, per mostrar una galeria d'imatges.

Descarrega Processing de la seva web oficial:

Download Processing

Descomprimeix l'arxiu que has descarregat i executa Processing.

S'obrirà l'entorn de programació de Processing. Anomena i desa el projecte amb el nom NasaGallery

Necessitaràs aquestes imatges. Descarrega-les a la carpeta del projecte amb el nom indicat:

Un projecte Processing, té habitualment dos mètodes principals: setup() i draw()

El bloc del mètode setup() s'executa un cop quan s'executa el nostre projecte i té la finalitat de configurar aspectes com el tamany de la finestra i carregar els recursos que utilitzarà el nostre projecte (imatges, sons, ...).

El bloc del mètode draw() s'executa de forma repetida durant tota l'execució del nostre projecte. En aquest mètode és on es dibuixen els elements que s'han de veure a la pantalla, o es reprodueixen els sons, etc.

Comencem amb un petit codi:

PImage img;

void setup() {
  size(180, 150);
  img = loadImage("mercury.jpg");  
}

void draw() {
  image(img, 15, 0);
}

Al mètode setup() establim el tamany de la pantalla de la nostra aplicació a 180 píxels d'amplada i 150 d'alçada. A continuació carreguem la imatge mercury.jpg a la variable img.

Al mètode draw() dibuixem aquesta imatge a la posició X=15 Y=0

Si executes la aplicació veuràs això:

Avançar i retrocedir a la galeria

El següent pas serà afegir dos botons per a poder anar cap endavant i cap enrere en la llista d'imatges.

Primer haurem de carregar totes les imatges al mètode setup(). Tindrem la variable img que indicarà la imatge que s'està mostrant actualment, que establirem inicialment a mercury.

Al mètode draw() només hem de dibuixar la imatge indicada per la variable img, i també els botons d'avançar i retrocedir.

Per útlim, afegirem un tercer mètode mousePressed() que s'executa un cop quan es fa clic al ratolí. En funció de la posició on s'hagi fet clic (mouseX), mostrarem una imatge o una altra, depenent de quina s'estigui mostrant actualment.

El codi final quedarà així:

PImage img, mercury, venus, earth, mars, prev, next;

void setup() {
  size(180, 150);
  mercury = loadImage("mercury.jpg");  
  venus =  loadImage("venus.jpg");
  earth = loadImage("earth.jpg");
  mars = loadImage("mars.jpg");
  
  prev = loadImage("prev.jpg");
  next = loadImage("next.jpg");
  
  img = mercury;
}

void draw() {
  image(prev, 0, 0);
  image(img, 15, 0);
  image(next, 165, 0);
}

void mousePressed(){
  if(mouseX < 15){
    if(img == mercury){
       img = mars; 
    } else if(img == venus){
       img = mercury; 
    } else if(img == earth){
       img = venus; 
    } else if(img == mars){
       img = earth; 
    }
  } else if(mouseX > 165){
    if(img == mercury){
       img = venus; 
    } else if(img == venus){
       img = earth; 
    } else if(img == earth){
       img = mars; 
    } else if(img == mars){
       img = mercury; 
    }
  }
}

Aquest és el resultat final: