Modificare le immagini: tint(), filter()

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.

Federico

Federico Pepe è un Ableton Certified Trainer, un esperto di tecnologie musicali, un creative coder per passione e, soprattutto, una persona a cui piace molto insegnare. Questo sito è il luogo dove, da diversi anni, raccoglie articoli, tutorial e guide. Per maggiori informazioni, visita la pagina "About me".

Potrebbero interessarti anche...

12 risposte

  1. Gianna ha detto:

    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. Gianna ha detto:

    Come è possibile delimitare l’inizio e la fine dell’immagine?

  3. Gianna ha detto:

    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?

    • Federico ha detto:

      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);
      
      
  4. Gianna ha detto:

    Ed esiste qualche comando per salvare solo l’immagine con il filtro applicato?

    • Federico ha detto:

      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

  5. Elisabetta ha detto:

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

    • Federico ha detto:

      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.

  6. Elisabetta ha detto:

    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?

    • Federico ha detto:

      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.