Con i "se" e con i "ma"

Immaginiamo ora di voler cambiare solo una parte di un'immagine. Per esempio, di voler "sbiancare" tutti i pixel rossi. Ma cosa vuol dire che un pixel è rosso? Assumiamo, per semplificare, che un pixel sia rosso se le sue componenti blu e verde sono nulle, e quella rossa no (altrimenti il pixel sarebbe semplicemente nero).

Questa è ovviamente una semplificazione: Per esempio, un pixel con componenti [100,1,1] è rosso? E un pixel con componenti [200,100,100]?

"Essere rosso" a quanto pare è un concetto un po' scivoloso, anche se i nostri colori li rappresentiamo con il rigore dei numeri interi...

Ora, quello che ci piacerebbe fare è poter scrivere un comando che facesse qualcosa (nell'esempio di sopra, che sbiancasse il pixel selezionato, tipo con img.setPixel([255,255,255]) ma SOLO SE il pixel è rosso!

E' possibile fare questo?

Ma certo! Il linguaggio con cui componiamo le nostre API prevede un'espressione che fa proprio al caso nostro. Partiamo da un esempio:

p = img.getPixel()

if (p[0]>0) { img.setPixel([0,0,0])}}

Cosa fa la sequenza di comandi di sopra? Annerisce il pixel corrente selezionato, ma solo se la sua componente di rosso è maggiore di 0.

Se guardi bene l'espressione, vedrai che è fatta così:

if (condizione) {comandi}

'if' va scritto così, e in inglese vuol dire 'se': "se è vera condizione, allora esegui i comandi tra le parentesi graffe ( {...} )".

Il punto cruciale è quindi condizione.... che cosa è una "condizione", in questo contesto?

Semplice: è una cosa che può essere vera oppure falsa. Nel nostro esempio la condizione è:

p[0] > 0

Che cosa vuol dire? Beh, "a > b" in matematica vuol dire: "a è maggiore di b". In javascript, per fortuna, l'operatore '>' ha lo stesso significato che nella notazione matematica!

Quindi, "p[0] > 0" vuol dire "p[0] è maggiore di 0". Ora questa cosa può essere vera, oppure falsa. Dipende dal valore di p[0]! (Il quale a sua volta dipende, ovviamente, dal colore del pixel selezionato).

Vediamo se è tutto chiaro...

Sapresti "annerire" lo smiley di sotto?

Considera che i punti dello smiley di sotto sono di varie tonalità di verde, e hanno componenti rossa e blu a 0; i punti dello sfondo, invece, sono bianchi, cioè hanno componenti [255,255,255].

Clicca Coding-mooc Polimi per accedere all'esercizio.

Nell'esercizio precedente hai usato un'espressione condizionale, che ti consente di fare o non fare una cosa a seconda che una certa condizione sia vera.

A questo punto potreste chiedervi: questo tipo di espressione la potrò utilizzare anche se dovessi interfacciarmi con qualcosa di diverso da un'immagine?

Voglio dire: selectPixel, setPixel e getPixel sono elementi specifici dell'interazione con le immagini. Se mi capiterà di interagire con un motore, o con una luce da accendere, avrò API diverse (accendiMotore, o chissà cos'altro...).

Potrò anche utilizzare il costrutto if? La rispostà è sì! Perché il costrutto if fa parte del linguaggio che noi utilizziamo per "comporre" le API tra di loro. Il particolare linguaggio che stai vedendo qui si chiama Javascript, ed è molto popolare, anche perché è compreso da tutti i browser, incluso quello che stai utilizzando ora.

In questi primi esempi noi abbiamo usato Javascript per "comporre" i valori che ottentiamo dalle API delle immagini e le azioni che possiamo compiere con esse. Ma tutte le manipolazioni che impariamo a fare le potremo riutilizzare in qualsiasi altro "dominio" applicativo (per manipolare suoni, testi, robot, e chi più ne ha più ne metta).