Vai al contenuto

📣 sulla piattaforma e-learning di Codice Inutile sono disponibili i miei corsi: Introduzione alla programmazione e 🆕 Introduzione all'Arte Generativa

Modificare le immagini: tint(), filter()

📬 Per rimanere aggiornato sui prossimi articoli e su altri contenuti di creative coding, puoi iscriverti a questa newsletter. Per farlo è sufficiente inserire il tuo indirizzo e-mail nel campo qui sotto.

Puoi leggere l'archivio qui. Powered by TinyLetter

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()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:

Immagine di partenza, presa da Pixabay (CC)
Passiamo alla funzione un solo parametro per applicare un filtro “grigio”:

/*
 * 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.

Processing use tint()

Se avete un background in web design, sappiate che Processing accetta anche valori esadecimali tint(#FF55EE);

Processing tint hexadecimal

È 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:

Processing tint e trasparenza

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.

Articolo precedente

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

Articolo successivo

Array di pixel: loadPixels() e updatePixels()

Unisciti alla discussione

  1. 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?!

  2. 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?

    1. 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

      
        size(640, 535);
        immagine = loadImage("cat.jpg");
        tint(100);
        image(immagine, 0, 0);
        fill(255);
        rect(0, 0, width, 50);
      
      
    1. 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

  3. 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’.

    1. 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.

    1. 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)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.