View
31
Download
0
Category
Preview:
DESCRIPTION
GUIs, the user’s perspective. Antonio Cisternino. Graphic Memory + Frame Buffer. Graphic Processing Unit. Architettura di base. Semplificando al massimo in ogni sistema che può fare della grafica l’architettura hw minima è la seguente:. I dispositivi di input. - PowerPoint PPT Presentation
Citation preview
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.
Recommended