Proseguiamo l’approfondimento su Processing e immagini. Nell’era di Instagram siamo abituati a cambiare l’aspetto delle nostre foto prima di condividerle con gli altri. Le funzioni tint() e filter() – già incluse all’interno del linguaggio – ci consentono di alterare le immagini a nostro piacimento.
La funzione tint()
Questa funzione consente di alterare il colore generale delle foto. L’effetto non è permanente tanto che invocando la funzione noTint() è possibile ritornare all’originale.
I parametri accettati vanno da uno a quattro come specificato nel reference. Prendendo quest’immagine di partenza –chi non ama i gatti? – facciamo qualche esempio:
/*
* Immagini: tint(), filter() e masking
* Federico Pepe, 19.03.2017
* http://blog.federicopepe.com/processing
*/
PImage immagine;
void setup() {
size(640, 535);
immagine = loadImage("cat.jpg");
tint(100);
image(immagine, 0, 0);
}
void draw() {
}
Passiamo a tint() tre parametri: tint(255, 255, 50);. È possibile usare tre valori RGB che HSB in base alla funzione colorMode() precedentemente impostata.
Se avete un background in web design, sappiate che Processing accetta anche valori esadecimali tint(#FF55EE);
È possibile anche sfruttare il parametro della trasparenza alpha.
tint(#FF55EE, 70);
image(immagine, 0, 0);
tint(255, 255, 50, 50);
image(immagine, 0, 0);Questo codice darà il seguente risultato:
Aggiungere un filtro con la funzione filter()
Oltre alla funzione tint(), Processing ha al suo interno la funzione filter() che, come i comuni programmi di grafica come Adobe Photoshop o GIMP, permette di applicare dei filtri alle foto.
I parametri sono otto e devono essere sempre indicati in maiuscolo: THRESHOLD, GRAY, INVERT, POSTERIZE, BLUR, OPAQUE, ERODE e DILATE. Alcuni di essi accettano un secondo parametro mentre altri no.
Mentre la funzione tint() doveva essere dichiarata prima di mostrare l’immagine, la funzione filter() è inserita successivamente, come indicato nel seguente esempio:
/*
* Immagini: tint(), filter() e masking
* Federico Pepe, 19.03.2017
* http://blog.federicopepe.com/processing
*/
PImage immagine;
void setup() {
size(640, 535);
immagine = loadImage("cat.jpg");
tint(100);
image(immagine, 0, 0);
}
void draw() {
}THRESHOLD
Converte i pixel di un’immagine in bianco o nero in base alla soglia impostata che può assumere un valore compreso tra 0 e 1. Se non viene indicato, il valore di default è 0.5.
BLUR
Applica un filtro di sfocatura gaussiana. Il secondo parametro indica il raggio della sfocatura.
POSTERIZE
Limita ciascun canale dell’immagine al numero di colori passati come parametro. I valori accettati vanno da 2 a 255.
GRAY
Converte i colori dell’immagine nel loro valore corrispondente in scala di grigi.
OPAQUE
Imposta il canale trasparenza (alpha) opaco.
INVERT
Inverte il valore di ciascun pixel.
ERODE e DILATE
Il primo riduce le aree illuminate mentre il secondo le aumenta.
Le funzioni che abbiamo visto oggi sono solo l’inizio; prossimamente vedremo come creare i nostri filtri personalizzati andando a lavorare sui singoli pixel.
Ciao Federico,
è possibile applicare il filtro solo all’immagine e non all’intera finestra?
Ad esempio nel caso in cui fosse presente all’interno di quest’ultima anche una barra contente una palette colori?!
È sufficiente disegnare la palette dopo aver creato il filtro sull’immagine. In alternativa si può lavorare con i pixel direttamente. Dai un’occhiata agli altri articoli che ho pubblicato nella sezione “lavorare con le immagini”
https://blog.federicopepe.com/category/processing/processing-images/
Come è possibile delimitare l’inizio e la fine dell’immagine?
In che senso delimitare l’inizio e la fine? Intendi rimpicciolirla/ingrandirla?
Poniamo il caso che io abbia all’interno della finestra, una barra in alto, un’immagine e una barra in basso.
Voglio applicare un filtro, ad esempio “BLUR”, solo alla mia immagine e non all’intera finestra, quindi voglio che ai rettangoli non venga applicato filtro.
Come posso delimitare inizio e fine dell’immagine in modo tale da poter applicare il filtro solo a questa?
Come ti scrivevo ieri, se tu disegni la barra successivamente all’immagine sarà “sopra” e quindi non verrà coperta dal filtro. Questo è un esempio semplice partendo dal codice nell’articolo
Ed esiste qualche comando per salvare solo l’immagine con il filtro applicato?
Con saveFrame puoi salvare tutto quello che vedi sullo schermo. Se vuoi salvare solo l’immagine devi lavorare direttamente con i pixel quindi ti rimando sempre agli altri tutorial che ti ho linkato in precedenza
Salve Federico, mi ricollego al commento di Gianna chiedendoti come dovrei procedere al salvataggio utilizzando i seguenti comandi: usando un oggetto’PImage’, la funzione ‘get()’ e il metodo ‘save()’ dell’oggetto ‘PImage’.
Ciao Elisabetta, con la funzione get(x, y) su un oggetto di tipo PImage ottieni il contenuto specifico di un pixel nella posizione da te definita con i parametri x e y. Se devi processare un’intera immagine è necessario creare due cicli for() come ho spiegato qui. Come indicato nel reference di Processing, la funzione get() è comunque sconsigliata rispetto all’array di pixel[] perché è più lenta. Una volta che hai tutti i pixel che compongono l’immagine, se usi la funzione .save() viene salvata l’immagine nel formato che ti serve (sono supportati TIFF, TARGA, JPEG, PNG). Ti consiglio di dare un’occhiata al tutorial sul sito di Processing relativo alle immagini e ai pixel che è ben fatto e contiene tutte le informazioni che ti servono.
Salve Federico, non ho ben capito il perchè l’utilizzo del doppio ciclo for.
Sono andata a curiosare in questo link https://www.processing.org/reference/get_.html .
Con la funzione get (), non si può processare l’intera immagine utilizzando oltre i parametri x e y, anche width e height ?
Oppure ho capito male?
Ciao Elisabetta, il doppio ciclo for serve per essere sicuri di leggere tutti i pixel. Come hai letto bene nel reference, l’alternativa è usare la formula pixels[y*width+x] dove, però, usi l’array di pixel invece della funzione get (ricordati che l’array di pixel è monodimensionale ovvero è come se tutti i pixel dell’immagine fossero messi uno in fila all’altro dal primo all’ultimo)