GUIs, the user’s GUIs, the user’s perspectiveperspective

Antonio CisterninoAntonio Cisternino

Architettura di baseArchitettura di base

Semplificando al massimo in ogni sistema che Semplificando al massimo in ogni sistema che può fare della grafica l’architettura hw minima è può fare della grafica l’architettura hw minima è la seguente:la seguente:

Graphic Processing

Unit

Graphic Processing

Unit

Graphic Memory

+ Frame Buffer

Graphic Memory

+ Frame Buffer

I dispositivi di inputI dispositivi di input

Esempi: Mouse, tastiera, track ball, Esempi: Mouse, tastiera, track ball, touch pad, joystick, …touch pad, joystick, …

Generano interruptGenerano interruptIl gestore dell’interfaccia grafica Il gestore dell’interfaccia grafica

astrae e classifica gli input astrae e classifica gli input generando opportuni eventi verso le generando opportuni eventi verso le applicazioniapplicazioni

La banda non basta mai…La banda non basta mai…

Frame bufferFrame bufferUna porzione di memoria Una porzione di memoria

dedicata alla memorizzazione dedicata alla memorizzazione dell’immagine come insieme dell’immagine come insieme di pixel da mostrare a video. di pixel da mostrare a video.

CaratteristicheCaratteristicheRisoluzione (numero di pixel)Risoluzione (numero di pixel)

Range tipici 320x200 <-Range tipici 320x200 <->1600x1200>1600x1200

Profondità (bit per pixel)Profondità (bit per pixel)Range tipici 1 <-> 32 (128)Range tipici 1 <-> 32 (128)

Perché si usano i pixel?Perché si usano i pixel?

Display HardwareDisplay Hardware

Il tubo catodicoIl tubo catodico:: un fascio di elettroni viene diretto un fascio di elettroni viene diretto su una superficie su una superficie coperta di materiale fosforescentecoperta di materiale fosforescente

Display vettorialiDisplay vettorialiil fascio veniva il fascio veniva pilotato direttamente in pilotato direttamente in maniera totalmente liberamaniera totalmente libera

Display normali, rasterDisplay normali, rasterlinea per linea, dall’altolinea per linea, dall’alto verso il basso, si spazza verso il basso, si spazza tutto lo schermo un certo tutto lo schermo un certo numero di volte al secondo numero di volte al secondo (refresh rate) (refresh rate)

Le stampantiLe stampanti

Tecnologie principali: Ink jet, laserTecnologie principali: Ink jet, laser

Rendering: Approccio FisicoRendering: Approccio Fisico

Come si svolge fisicamente il Come si svolge fisicamente il processo della visione?processo della visione?

ColoreColore

La luce e’ una forma di radiazione La luce e’ una forma di radiazione elettromagnetica elettromagnetica

La retina umana ha tre tipi di recettori, i coni, La retina umana ha tre tipi di recettori, i coni, sensibili a particolari lunghezze d’ondasensibili a particolari lunghezze d’onda

Modelli di coloreModelli di colore

Gli spazi colore o modelli colore sono Gli spazi colore o modelli colore sono dei sistemi particolari di coordinate dei sistemi particolari di coordinate che consentono di definire all’interno che consentono di definire all’interno di un sottoinsieme di colori (detto di un sottoinsieme di colori (detto gamutgamut) un particolare elemento) un particolare elemento

A noi interessano gli spazi: RGB A noi interessano gli spazi: RGB (monitor, sintesi additiva), CMYK (monitor, sintesi additiva), CMYK (stampe, sintesi sottrattiva), HSV (stampe, sintesi sottrattiva), HSV (intuitivo)(intuitivo)

RGBRGB

Il gamut dei monitor a raggi catodici Il gamut dei monitor a raggi catodici (CRT), è definito dalle primarie rosso, (CRT), è definito dalle primarie rosso, verde e blu o RGB (dall’inglese Red, verde e blu o RGB (dall’inglese Red, Green, Blue)Green, Blue)

I monitor sintetizzano i colori I monitor sintetizzano i colori eccitando tre tipi di fosfori (RGB), per eccitando tre tipi di fosfori (RGB), per cui un colore è ottenuto miscelando cui un colore è ottenuto miscelando parti diverse di queste tre primarieparti diverse di queste tre primarie

RGBRGB

Queste tre Queste tre componenti si componenti si mescolano mescolano additivamente:additivamente:

L’aL’arereaa in cui si in cui si sovrappongono sovrappongono due due componenti il colore componenti il colore si somma (entrambi si somma (entrambi i recettori vengono i recettori vengono stimolati)stimolati)

RGBRGB

La La rappresentazione rappresentazione tipica dello spazio tipica dello spazio RGB è in forma di RGB è in forma di cubocubo

Sui vertici si Sui vertici si trovano il bianco, il trovano il bianco, il nero, le primarie e i nero, le primarie e i complementaricomplementari

Blu

Verde

Ciano

Rosso

Magenta

Giallo

Nero

RGBRGB

Le tre coordinate RGB Le tre coordinate RGB variano ciascuna da 0 variano ciascuna da 0 (intensità minima) a 1 (intensità minima) a 1 (intensità massima)(intensità massima)

Il colore nero si otterrà Il colore nero si otterrà spegnendo spegnendo tutti e tre i tutti e tre i fosfori (cioè R=0, fosfori (cioè R=0, G=0, B=0), G=0, B=0),

il colore bianco il colore bianco accendendo accendendo i fosfori al i fosfori al massimo (cioè R=1, massimo (cioè R=1, G=1, B=1)G=1, B=1)

Blu

Verde

Ciano

Rosso

Magenta

Giallo

Nero

RGBRGB

I colori ciano, magenta e giallo sono I colori ciano, magenta e giallo sono detti complementari dei colori primaridetti complementari dei colori primari

Ad esempio, il ciano è il complementare Ad esempio, il ciano è il complementare del rosso poiché deriva dalla sottrazione del rosso poiché deriva dalla sottrazione del rosso (1,0,0) dal bianco (1,1,1):del rosso (1,0,0) dal bianco (1,1,1):

bianco (1,1,1)bianco (1,1,1) rosso (1,0,0)rosso (1,0,0) ==

ciano (0,1,1)ciano (0,1,1)

RGBRGB

La diagonale che La diagonale che unisce il nero con il unisce il nero con il bianco è detta linea bianco è detta linea dei grigidei grigi

Infatti un grigio ha Infatti un grigio ha la caratteristica di la caratteristica di avere tutte le tre avere tutte le tre componenti uguali, componenti uguali, ad esempio, ad esempio, (0.5,0.5,0.5) è un (0.5,0.5,0.5) è un grigiogrigio

Blu

Verde

Ciano

Rosso

Magenta

Giallo

Nero

CMY(K)CMY(K)

Ciano, Magenta e Giallo (Cyan, Ciano, Magenta e Giallo (Cyan, Magenta, Yellow CMY) sono i colori Magenta, Yellow CMY) sono i colori complementari di Rosso, Verde e Blucomplementari di Rosso, Verde e Blu

Quando vengono usati come filtri per Quando vengono usati come filtri per sottrarre colore dalla luce bianca, sottrarre colore dalla luce bianca, questi colori sono chiamati questi colori sono chiamati primarie primarie sottrattivesottrattive

CMY(K)CMY(K)

Il modello CMY dal Il modello CMY dal punto di vista punto di vista geometrico è lo stesso geometrico è lo stesso di RGB con la di RGB con la differenza che, in differenza che, in questo caso, il bianco questo caso, il bianco è l’origine (al posto è l’origine (al posto del nero) e i colori del nero) e i colori sono definiti per sono definiti per sottrazione dalla luce sottrazione dalla luce bianca, anziché per bianca, anziché per addizioneaddizione

Blu

Verde

Ciano

Rosso

Magenta

Giallo

Bianco

CMY(K)CMY(K)

Il modello CMY è usato nei dispositivi Il modello CMY è usato nei dispositivi di stampa a colori (stampanti laser, di stampa a colori (stampanti laser, ink-jetink-jet, a sublimazione, , a sublimazione, elettrostatiche) dove l’inchiostro elettrostatiche) dove l’inchiostro colorato funziona come un filtro che colorato funziona come un filtro che sottrae alcune frequenze dal bianco sottrae alcune frequenze dal bianco del fogliodel foglio

CMY(K)CMY(K) Ad esempio, un Ad esempio, un

inchiostro ciano inchiostro ciano depositato su un foglio depositato su un foglio bianco riflette tutti i bianco riflette tutti i colori ad eccezione del colori ad eccezione del rosso (in termini di rosso (in termini di primarie additive, ciano primarie additive, ciano è dato da bianco è dato da bianco rosso rosso o da verde o da verde blu) blu)

Le aLe aree in cui si ree in cui si sovrappongono ciano e sovrappongono ciano e magenta riflettono tutti i magenta riflettono tutti i colori ad eccezione del colori ad eccezione del rosso e del verde: quindi rosso e del verde: quindi appaiono blu!appaiono blu!

CMY(K)CMY(K)

La relazione esistente tra CMY e RGB è La relazione esistente tra CMY e RGB è definita dalle semplici formuledefinita dalle semplici formule

C=1C=1RRM=1M=1GGY=1Y=1BB

Usando questo modello per ottenere Usando questo modello per ottenere una superficie nera dobbiamo evitare una superficie nera dobbiamo evitare che rifletta tutti i primari (rosso, verde e che rifletta tutti i primari (rosso, verde e blu), dobbiamo quindi colorarla di ciano, blu), dobbiamo quindi colorarla di ciano, magenta e giallo alla massima intensitàmagenta e giallo alla massima intensità

CMY(K)CMY(K)

Nei dispositivi di stampa a colori si è Nei dispositivi di stampa a colori si è pensato di aggiungere ai tre inchiostri pensato di aggiungere ai tre inchiostri CMY del vero e proprio inchiostro nero CMY del vero e proprio inchiostro nero (detto colore K) per due motivi:(detto colore K) per due motivi:mettendo insieme C, M e Y non si ottiene mettendo insieme C, M e Y non si ottiene

un un nero puronero puro poiché i tre inchiostri non poiché i tre inchiostri non sono filtri perfetti sono filtri perfetti

l’inchiostro nero costa meno di quelli l’inchiostro nero costa meno di quelli colorati!colorati!

CMY(K)CMY(K)

Quindi, anziché usare parti uguali di Quindi, anziché usare parti uguali di C, M e Y si usa KC, M e Y si usa K

Si ha così il cosiddetto modello CMYKSi ha così il cosiddetto modello CMYKSi passa da CMY a CMYK con le Si passa da CMY a CMYK con le

formule:formule:K=min(C,M,Y)K=min(C,M,Y)

CC’’=C=CKKMM’’=M=MKKYY’’=Y=YKK

HSVHSV

Sia RGB che CMYK sono modelli Sia RGB che CMYK sono modelli hardware-hardware-orientedoriented, destinati a semplificare la , destinati a semplificare la descrizione dei colore utilizzando descrizione dei colore utilizzando dispositivi di visualizzazione o stampadispositivi di visualizzazione o stampa

Per un operatore umano non esperto Per un operatore umano non esperto selezionare un rosa, un viola o un marrone selezionare un rosa, un viola o un marrone (in questi spazi) è un’impresa molto (in questi spazi) è un’impresa molto faticosa e necessita di numerosi tentativifaticosa e necessita di numerosi tentativi

HSVHSV

Per questo problemi si introduce il modello Per questo problemi si introduce il modello HSV (Hue, Saturation, Value)HSV (Hue, Saturation, Value)

Il modello nasce dall’idea di cercare di Il modello nasce dall’idea di cercare di riprodurre il modo con cui un pittore riprodurre il modo con cui un pittore prepara un suo colore sulla tavolozza: prepara un suo colore sulla tavolozza: prende un colore puro e aggiunge del prende un colore puro e aggiunge del bianco per ottenere una tinta; poi bianco per ottenere una tinta; poi aggiunge del nero per cambiare la aggiunge del nero per cambiare la luminosità ed ottiene un tonoluminosità ed ottiene un tono

HSVHSV

La sua La sua tipica tipica rappresentazione rappresentazione geometrica è su un geometrica è su un sistema di sistema di coordinate coordinate cilindriche come cilindriche come cono (o prisma a cono (o prisma a base esagonale) base esagonale) con il vertice rivolto con il vertice rivolto verso il basso verso il basso

HSVHSV

La coordinata V La coordinata V ((ValueValue) corrisponde ) corrisponde alla luminosità e alla luminosità e assume valori assume valori nell’intervallo da 0 nell’intervallo da 0 (scuro) a 1 (chiaro)(scuro) a 1 (chiaro)

V è rappresentata V è rappresentata dall’asse verticaledall’asse verticale

V

HSVHSV

La coordinata H La coordinata H ((HueHue) corrisponde ) corrisponde al colore ed è la al colore ed è la misura dell’angolo misura dell’angolo attorno all’asse attorno all’asse verticale (V)verticale (V)

Il rosso vale 0°, il Il rosso vale 0°, il verde vale 120° e il verde vale 120° e il blu 240°blu 240°

H

120

240

0

HSVHSV

I colori I colori complementari complementari sono opposti sono opposti (+180°) ai primari(+180°) ai primari

H

120

240

0

HSVHSVLa coordinata S La coordinata S

((SaturationSaturation) ) corrisponde al livello corrisponde al livello di saturazione ed è di saturazione ed è rappresentato da un rappresentato da un asse orizzontale asse orizzontale avente angolo Havente angolo H

S varia da 0 (bianco o S varia da 0 (bianco o completamente completamente desaturo) a 1 (colore desaturo) a 1 (colore puro o puro o completamente completamente saturo)saturo)

S

HSVHSVLa coordinata S La coordinata S

((SaturationSaturation) ) corrisponde al livello corrisponde al livello di saturazione ed è di saturazione ed è rappresentato da un rappresentato da un asse orizzontale asse orizzontale avente angolo Havente angolo H

S varia da 0 (bianco o S varia da 0 (bianco o completamente completamente desaturo) a 1 (colore desaturo) a 1 (colore puro o puro o completamente completamente saturosaturo

S

CaveatCaveat

Gli spazi dei colori sono un astrazioneGli spazi dei colori sono un astrazione

In realtà ci sono vari aspetti da tenere in In realtà ci sono vari aspetti da tenere in considerazioneconsiderazione

I device di output non possono visualizzare I device di output non possono visualizzare tutti tutti i colori che possiamo vedere.i colori che possiamo vedere.

Limitazioni sull’insieme dei colori Limitazioni sull’insieme dei colori sintetizzabilisintetizzabili

Non linearità nel mappaggio di colori dallo Non linearità nel mappaggio di colori dallo spazio in cui sono definiti a quelli reali spazio in cui sono definiti a quelli reali

GamutGamut

Ogni device può sintetizzare solo un Ogni device può sintetizzare solo un sottoinsieme dello spazio dei colori detto sottoinsieme dello spazio dei colori detto gamutgamut

Gamma CorrectionGamma Correction

I device fisici mappano i colori in maniera I device fisici mappano i colori in maniera fortemente non lineare: fortemente non lineare:

in generale non e’ vero che il grigio RGB (.5,.5,.5) in generale non e’ vero che il grigio RGB (.5,.5,.5) e’ luminoso la metà di (1,1,1)e’ luminoso la metà di (1,1,1)

Gamma correction si mappa ogni colore Gamma correction si mappa ogni colore ((r, g, br, g, b) in () in (rr, , gg, , bb) ) dove dove è un valore nel range 0.2 ~ 4 è un valore nel range 0.2 ~ 4

RangeRangeUn altro problema: il significato di nero e Un altro problema: il significato di nero e

bianco. bianco. NeroNero = assenza totale di luce. = assenza totale di luce.

In realta’ se va bene significa “il colore del monitor In realta’ se va bene significa “il colore del monitor da spento”, grigio scuro o del telo di proiezione a da spento”, grigio scuro o del telo di proiezione a proiettore spento.proiettore spento.

BiancoBianco: che significa? : che significa? esposizioneesposizione. Quello che si percepisce come bianco e’ . Quello che si percepisce come bianco e’

dipendente dall’illuminazione complessiva dipendente dall’illuminazione complessiva dell’ambiente. dell’ambiente. Bianco overflow rispetto alla percezione della nostra retina. Bianco overflow rispetto alla percezione della nostra retina. Nero underflow rispetto alla percezione della nostra retinaNero underflow rispetto alla percezione della nostra retina

Ovviamente dipende dalla chiusura della pupilla.Ovviamente dipende dalla chiusura della pupilla.

RangeRange

8 bit sono sufficienti 8 bit sono sufficienti per rappresentare la per rappresentare la luminosita’ una volta luminosita’ una volta scelto il rangescelto il range

Per rappresentare Per rappresentare correttamente le correttamente le immagini in maniera immagini in maniera indipendente indipendente dall’esposizione dall’esposizione occorrerebbe canali occorrerebbe canali rgb in floating point.rgb in floating point.