Vai al contenuto

Utilizzare immagini in Processing: PImage, loadimage() e image()

In tutti gli sketch che abbiamo creato fino a oggi abbiamo sempre utilizzato Processing per generare forme sullo schermo. Con questo post, invece, cominceremo ad ampliare i nostri orizzonti e inizieremo a utilizzare nei nostri programmi immagini esterne.

A differenza dei programmi di editing più comuni – penso per esempio a Photoshop o Pixelmator – con Processing possiamo lavorare in modo più preciso e dettagliato su ogni singola foto andando a regolare, a nostro piacimento, ogni pixel.

Le immagini sono dati

Le immagini digitali non sono altro che un insieme di dati, ovvero numeri. Per cercare di spiegarlo nel modo più semplice possibile, ciascun dato rappresenta i valori di rosso, verde e blu (RGB) di un punto preciso all'interno di una griglia.

Di fatto possiamo immaginare ogni foto come una griglia di pixel dove ciascun pixel avrà diversi valori di rosso, verde e blu. Con la programmazione e un po' di fantasia possiamo avere accesso a tutti questi dati e usarli a nostro piacimento.

PImage, loadImage() e image()

Abbiamo già parlato di tipi di dati e classi. Processing ha al suo interno la classe PImage la cui funzione principale è quella di permetterci di caricare e visualizzare un'immagine.

La funzione loadImage(), che accetta un parametro di tipo String, carica il file all'interno della memoria. Nell'esempio riportato in seguito, il parametro passato alla funzione è il nome del file comprensivo di estensione. La funzione andrà a cercare se quel file è presente all'interno della sottocartella data presente all'interno del nostro sketch.

Per chi non lo ricordasse, in questo post abbiamo già trattato come caricare file esterni all'interno del nostro sketch in Processing.

Mettiamo tutto insieme:

/*
 * Utilizzare immagini in Processing: PImage, loadimage() e image()
 * Federico Pepe, 12.03.2017
 * http://blog.federicopepe.com/processing
*/

PImage immagine;

void setup() {
  size(500, 500);
  immagine = loadImage("logo_federicopepe.png");
}

void draw() {
  image(immagine, 0, 0);
}

Ho creato una variabile di tipo PImage chiamata immagine; attraverso la funzione loadImage() carico il file chiamato logo_federicopepe.png che, in precedenza, avevo già spostato all'interno della cartella data e, infine, con la funzione image() visualizzo l'immagine facendo in modo che il bordo in alto a sinistra corrisponda alle coordinate 0, 0.

Ecco il risultato:

loadImage(), image() e PImage

L'immagine viene visualizzata correttamente perché il file originale è di 500 x 500 pixel. Per completezza condivido anche lo screenshot della cartella dello sketch.

La cartella dello sketch che contiene l'immagine

Processing accetta i seguenti tipi di file: GIF, JPG, TGA e PNG.

Un paio di precisazioni

Abbiamo detto che PImage è una classe. Perché non abbiamo mai chiamato un constructor per inizializzarla? La funzione loadImage() in questo caso ha la funzione del constructor restituendo una nuova istanza dell'oggetto PImage generata dal file che carichiamo.

Se quest'ultima frase vi sembra arabo, consiglio di ripassare i post dedicati alla programmazione ad oggetti:

Come illustrato nel reference la funzione image() richiede un minimo di tre parametri: immagine da caricare, posizione x e y. È possibile passare alla funzione due parametri ulteriori per specificare la larghezza e l'altezza dell'immagine: un metodo comodo e veloce per ridimensionare le foto:

/*
 * Utilizzare immagini in Processing: PImage, loadimage() e image()
 * Federico Pepe, 12.03.2017
 * http://blog.federicopepe.com/processing
*/

PImage immagine;

void setup() {
  size(500, 500);
  immagine = loadImage("logo_federicopepe.png");
}

void draw() {
  // Utilizzo due parametri aggiuntivi per ridimensionare la foto
  image(immagine, 0, 0, 100, 100);
}

Immagine ridimensionata