Lezione 3: Immagini (3)

Informatica e Produzione Multimediale

Docente: Umberto Castellani

Cenno al colore: spazio colore

I colori possono essere ambientati in uno spazio colore che generalmente è uno spazio tridimensionale

I colori sono rappresentati da una terna di numeri XYZ Ogni colore è rappresentato da un vettore nello spazio

tridimensionale Ci sono diverse rappresentazioni dello spazio colore:

– RGB (red, green, blue)– CMY (cian, magenta, yellow)– HSL (hue, saturation, lightness) – YCrCb (luminance, crominance r and crominance b)

E’ possibile passare da una rappresentazione all’altra attraverso delle formule di conversione

Spazio RGB

Nel modello RGB, un colore è definito da 3 componenti che rappresentano i colori primari

Per convenienza, si normalizzano le componenti in modo da avere un cubo con componenti RGB appartenenti all’intervallo [0,1]

Tutti i colori che giacciono all’interno del cubo possono essere riprodotti da un sistema di riproduzione che si basa sui colori primari (eg., monitor).

Adotta un tipo di sintesi additiva

60251128

Final pixel in the image

(0,0)

Sintesi additiva

Original ImageOriginal Image R-ComponentR-Component

G-ComponentG-Component B-ComponentB-Component

Spazio CMY (o CMYK)

Il formato CMYK è tipicamente usato nelle stampanti poiché la carta è bianca e quindi si sottrae dal bianco piuttosto che aggiungere al nero come nel modello RGB.

Il ciano (C) assorbe l’illuminazione rossa Il magenta (M) assorbe il verde Il giallo (Y) assorbe il blu. In questo modo, quando illuminiamo l’immagine

stampata con luce bianca, si creano le corrette riflessioni di colore.

Il K (quando specificato), indica l’intensità del nero Adotta un tipo di sintesi sottrattiva

Spazio HSL (o HSI, o HSV)

Hue (tinta) = è il livello del colore secondo lo spettro della luce solare deviata da un prisma (o dall’arcobaleno)

Saturation (saturazione) = è la purezza del colore, ovvero quanto è diluito con il bianco

Lightness (luminosità) = rappresenta il livello di luminosità del colore

Mentre RGB e CMY sono legati ai dispositivi di visualizzazione (i.e., monitor e stampanti), lo spazio HSL è legato alla percezione umana

60251128

Final pixel in the image

= H

= S

= L

Original Image Hue

Saturation Intensity

Esempio

Tinta costante, saturazione decrescente

Tinta 80Saturazione 175Luminosità 156

Tinta 80Saturazione 201Luminosità 156

Tinta 80Saturazione 250Luminosità 200

Tinta 80Saturazione 100Luminosità 100

Tinta 80Saturazione 173Luminosità 180

Tinta 80Saturazione 250Luminosità 100

Spazio YCrCb

YCrCb (3 numeri) per codificare le immagini:– Y(luminanza): rappresenta l’intensità del colore– Cr (crominanza rossa): rappresenta il valore su

una scala di rossi – Cb (crominanza blu): rappresenta il valore sulla

scala di blu

Operazioni sul colore

Conversione da colore a livelli di grigio Cambio dello spazio di rappresentazione Contrasto/luminosità Bilanciamento del colore

– Aggiustamento del colore– Manipolazione di curve

Color replacement Modifica del canale alpha

Aggiustamento del colore

N.b. queste elaborazioni si basano su uno tipo specifico di rappresentazione dello spazio colore

Manipolazione delle curve

La variazione della scala di un canale non è più lineare ma varia secondo una curva specificata manualmente dall’utente

Manipolazione di curve: esempio

Immagine prima dell’aggiustamento

Immagine dopo l’aggiustamento

Modifica del canale alpha

Anche il canale alpha può essere modificato analogamente agli altri canali

@Autore sconosciuto

Modellare nel 2D

Con la modellazione l’immagine è interpretata come un insieme di oggetti che l’utente (il disegnatore) può creare e modificare.

In generale si definisce grafica 2D quando l’enfasi è sul fatto che l’immagine è sintetica ovvero creata dal disegnatore (eventualmente usando ‘pezzi’ di immagini reali).

Oggetti grafici

Punti o nodi: rappresentano l’unità elementare. Sono identificati dalle rispettive coordinate 2D (in pixel).

Segmenti: si identificano come un tratto rettilineo tra due punti.

Tracciati: si identificano come insiemi congiunti di segmenti.

Primitive geometriche: Rettangoli, Cerchi/elissoidi, Curve di bézier.

Testo: anche il testo è un oggetto dell’immagine le cui proprietà vengono gestite in modo autonoma

Sprite: oggetti grafici predefiniti (tipo clip-art)

Modifica del livello di priorità

Foglia in primo piano

Foglia in secondo piano

Foglia sullo sfondo

Modifica trasparenze

Trasparenza uniformeTrasparenza definita da una maschera

Maschera di trasparenza

Formati vettoriali

Per conservare le informazioni sugli oggetti occorre salvare l’immagine in formati appropriati (formati vettoriali). In alternativa l’immagine viene salvata semplicemente come matrice di pixel (formato raster).

Quando l’immagine viene stampata o visualizzata si effettua il processo di rasterizzazione

– Aliasing: effetto a dente di sega degli oggetti dovuto alla pixellizzazione

– Clipping: come si effettua il taglio degli oggetti sui bordi dell’immagine ? (occorre trovare le intersezioni tra i segmenti compongono il bordo e tutti gli oggetti).

Trasformazioni planari

Sulle immagini 2D (sia vettoriali che raster) si possono effettuare delle modifiche spaziali sugli oggetti (sia quelli sintetici e sia quelli derivanti da una selezione su una immagine bitmap).

Tipicamente le trasformazioni planari riguardano:– Traslazioni– Scalatura– Riflessioni– Rotazioni

Traslazione

Si somma un valore prestabilito a tutte le coordinate dell’oggetto (possono essere le coordinate di un oggetto vettoriale oppure l’insieme dei pixel che compongono l’area selezionata).

Es. se si vuole traslare il punto (x,y) di una quantità t=(tx, ty)

x’=x+ tx

y’=y+ ty

– Tipicamente la traslazione si effettua selezionando e trascinando l’oggetto

(x,y)tx

ty(x’,y’)

tx

ty

(x,y)

(x’,y’)

Scalatura

Si moltiplica un valore s = (sx, sy) prestabilito a tutte le coordinate dei pixel (o dei nodi)

Si ottiene

x’ = x ⋅ sx

y’ = y ⋅ sy– Se sx o sy sono > 1 si ottiene un

ingrandimento se sono tra 0 e 1 si ottiene una riduzione, se sono negativi si ottiene una riflessione

– Tipicamente la scalatura si effettua selezionando l’opportuna opzione e trascinando l’oggetto

Rotazione

Occorre la trigonometria Ogni pixel (o nodo) viene ruotato dello

stesso angolo α Si ottiene:

x’= x cos α – y sin α y’= x sin α – y cos α

Per avere una rotazione dell’oggetto su se stesso occorre prima traslarlo sull’origine, ruotarlo e riportarlo alla posizione originale.

– Tipicamente la rotazione si effettua selezionando l’oggetto e spostando il mouse, dopo aver selezionato l’opportuna opzione sull’interfaccia

α

α

Trasformazioni complesse: tiepoints

Spesso non tutti i pixel si muovono secondo la stessa legge ma la legge vale solo per gruppi di pixel.

Si individuano diverse classi di parametri, ciascuna associata ad un gruppo di pixel (o segmento di immagine).

Spesso le singole classi vengono calcolate sulla base di un sottogruppo di pixel rappresentativi o tiepoints. Sugli altri pixel del gruppo il valore trasformato si ricava per interpolazione.

In generale in questi casi si parla di warping dell’immagine

Tiepoints: dai tiepoints si ricava la trasformazione per l’area selezionata

La trasformazione ricavata si applica a tutti i pixel dell’area

Esempi: Morphing

Si permette il passaggio da un’immagine ad un’altra con continuità operando un’interpolazione tra due immagini successive differenti

Esempi: Rimozione di distorsione

Original Image

Distortion Model

Distorted Image

Restored Image

Tipicamente, ogni volta che il pixel si sposta dalla sua posizione originale occorre tener presente che:

– La nuova posizione difficilmente cadrà su un pixel preciso– Anche il livello di grigio (o colore) dovrà essere cambiato,

ma come?

Le procedure matematiche che risolvono questi tipi di problematiche prendono il nome di tecniche di interpolazione

Interpolazione

x

y y’

x’

Nearest Neighbour interpolation

Il pixel sorgente – in generale -- cade in mezzo a 4 pixel nella destinazione.

Il ldg f(x,y) viene assegnato al pixel di destinazione più vicino a (x’,y’).

x

y y’

x’

Interpolazione bilineare

Usa i lgd dei 4 vicini f(x,y) nota ai vertici di un quadrato

unitario e si deve determinare il valore di f all’interno di tale quadrato

Si fa il fitting (interpolazione) di un paraboloide sui 4 vicini osservati: si prende una funzione nota (il parabolode) e si calcolano i suoi parametri in modo che ‘passi al meglio’ sui punti osservati.

1,0

0,1

0,0 1,1

f(x,y)

x,0

0,y

f(0,0)

f(1,0)

f(0,1)

f(1,1)

La resa visiva migliora, buona resa nei contorni, ma non in orientazione (superfici continue ma con derivata discontinua: scalettatura)

Interpolazione bilineare (II)

Interpolazione bicubica

Si usa un’altra classe di funzioni più smooth

Si interpola sui 16 vicini del pixel

L’effetto visivo è generalmente migliore

Introduce della distorsione (non è sempre adatta per applicazioni mediche)

Interpolazione: confronti

Funzione di partenza

Interpolazione bilineare interpolazione bicubica

Interpolazione nearest neighbour

DEMO

Prova con il l’InkScape– Crea oggetti– Cambia le proprietà– Raggruppa e separa– Operazioni logiche– Trasparenze– Inserimento e elaborazione del testo

InkScape

http://www.inkscape.org

C’e’ anche per windows Ci sono dei tutorial

Help > Tutorials in Inkscape