Ableton Certified Trainer, Music Technologist, Creative Coder, Educator

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.


12 responses to “Modificare le immagini: tint(), filter()”

  1. Gianna avatar
    Gianna

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

    1. Federico avatar

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

  2. Gianna avatar
    Gianna

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

    1. Federico avatar

      In che senso delimitare l’inizio e la fine? Intendi rimpicciolirla/ingrandirla?

  3. Gianna avatar
    Gianna

    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. Federico avatar

      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 avatar
    Gianna

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

    1. Federico avatar

      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 avatar
    Elisabetta

    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. Federico avatar

      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 avatar
    Elisabetta

    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?

    1. Federico avatar

      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)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.