Operazioni sui layer Laboratorio di Multimedia 1 Modulo Grafica 15-3-2010 Davide Gadia gadia@dico.unimi.it
Sommario Blending tra layer colore Posterizzazione
Approccio a livelli (layer) Tipico di molti programmi per image processing o grafica vettoriale Photoshop\Gimp Illustrator\Inkscape
Blending tra layer colore Possibilità di operazioni avanzate sui colori Esempio 1: Stessa immagine Diverse operazioni applicate ma poste su livelli diversi Possono essere combinate e\o scambiate in seguito Esempio 2 Livelli contenenti informazione differente Possono essere combinati mediante operazioni matematiche semplici Livelli come mappa di coefficienti per il colore di altri livelli Pregi Modularità Riutilizzo
Blending tra layer colore: possibili operazioni Addizione, Sottrazione, Differenza Moltiplicazione e Divisione Solo Toni scuri e Solo Toni Chiari Tinta, Saturazione, Valore
Addizione Somma i valori di due livelli Normalizza i valori oltre 255 L3 = min(l1+l2, W) L1 L2 L1+L2 = [r1+r2, g1+g2, b1+b2] W = [255, 255, 255] L3
Sottrazione Sottrae i valori di due livelli Normalizza i valori sotto 0 L3 = max(l2-l1, 0) L1 L2 L2-L1 = [r2-r1, g2-g1, b2-b1] 0 = [0, 0, 0] L3
Differenza Sottrae i valori di due livelli Considera i valori assoluti delle differenze E' quindi un'operazione commutativa Al contrario della sottrazione L1 L2 L3 = L1-L2 L1-L2 = [ r1-r2, g1-g2, b1-b2 ] L3
Moltiplicazione Moltiplica i valori di due livelli Normalizza i valori nel range [0,255] L3 = (L1xL2)/255 L1 L2 L1xL2 = [(r1*r2)/255, (g1*g2)/255, (b1*b2)/255] L3
Divisione Divide i valori di due livelli Evita divisione per 0 Normalizza i valori nel range [0,255] L1 L2 L3 = min(w, L2 (L1+1)/256) W = [255, 255, 255] L3
Solo Toni Scuri Confronta i valori di due livelli Prende il valore minore in ogni componente L1 L2 L3 = min(l1, L2) min(l1, L2) = [min(r1,r2), min(g1,g2), min(b1,b2)] L3
Solo Toni chiari Confronta i valori di due livelli Prende il valore maggiore in ogni componente L1 L2 L3 = max(l1, L2) max(l1, L2) = [max(r1,r2), max(g1,g2), max(b1,b2)] L3
Tinta Dati due livelli Il colore risultante ha: La Tinta (H) del primo Saturazione (S) e Valore (V) del secondo L1 L2 L3 = (H(L1), S(L2), V(L2)) L3
Saturazione Dati due livelli Il colore risultante ha: La tinta (H) del secondo Saturazione (S) del primo Valore (V) del secondo L1 L2 L3 = (H(L2), S(L1), V(L2)) L3
Valore Dati due livelli Il colore risultante ha: La Tinta (H) e Saturazione (S) del secondo Valore (V) del primo L1 L2 L3 = (H(L2), S(L2), V(L1)) L3
Posterizzazione Riduzione del valore di profondità colore (bpp) Abbassamento numero di colori rappresentabili Crea aree uniformi Adatte per operazioni di segmentazione basate su colore
Posterizzazione: esempi Livello Posterizzazione 2 Livello Posterizzazione 4 Livello Posterizzazione 8
Introduzione a tecniche di compositing e blending Laboratorio di Multimedia 1 Modulo Grafica 15-3-2010 Davide Gadia gadia@dico.unimi.it
Compositing Unione di più immagini Diversi soggetti Diverse tecniche di acquisizione\generazione Al fine di creare una nuova immagine. Diversi obiettivi di compositing Non fotorealistici: no verosimiglianza composizione Es: collage per editoria, ecc.. Fotorealistici: la scena deve essere credibile Es: cinematografia, ecc... Diverse tecniche e parametri da considerare
Compositing: esempi
Compositing: esempi
Compositing: chroma key
Compositing: approcci Approccio a layer Adobe After Effects... Approccio a nodi Eyeon Fusion...
Approccio a layer Approccio classico Stack di layer Ogni componente su un layer separato Elaborato singolarmente Primo layer in basso renderizzato per primo Rendering progressivo introducendo i layer successivi Adatto per: Motion graphics Progetti relativamente semplici Non adatto per progetti complessi: Numero livelli elevato Numero elevato di rendering intermedi
Interazione tra layer Mediante operazioni tra colori Vedere prima parte slide Operazioni globali Mediante operazioni di blending tra layer Operazioni locali Alpha channel Maschere di trasparenza Selezione\estrazione di feature dalle immagini
Alpha channel Contiene un valore di opacità per ogni pixel α=0 : pixel trasparente α=1 : pixel opaco 0<α<1 : pixel parzialmente trasparente Colore in primo piano C1 con valore di alpha α Colore in secondo piano C2 C3 = C1*α + C2*(1.0-α)
Alpha channel C1 α C3 C2
Alpha channel C1 α C3 C2
Maschere di trasparenza Definizione trasparenza tramite maschere Definite tramite selezione di particolari elementi Selezione effettuata: Tramite strumenti automatici (o semi-automatici) Tramite selezione manuale Combinazione di entrambi gli approcci La selezione convertita in maschere di livello Operazione tra livelli come in alpha blending.
Maschere di trasparenza
Maschere di trasparenza
Selezione manuale Selezione a forme fisse Rettangolare Ellittica Ecc.. Utile solo per selezione di elementi di forma regolare Es: Loghi,... Selezione a forma libera Coerente con il soggetto da estrarre dalla scena Procedimento manuale, lento e complesso Curve di Bezier per profili curvi Strumenti di selezione a mano libera
Selezione avanzata Strumenti sull'istogramma/contrasto Soglia Edge detection Cercano di isolare elementi dallo sfondo Sfruttando contrasto locale Efficace per scene con sfondi uniformi (poca alta frequenza) Strumenti su colore Selezione per colore Aree contigue Tutta la scena Utile per estrarre feature con colori uniformi Può essere utile effettuare prima posterizzazione
Approccio a nodi Approccio avanzato Grafo Elementi e operazioni come nodi del grafo Connessi tra loro Coerenza con rappresentazione\processing interno Vantaggi: Flessibilità Possibilità di agire su parametri di nodi intermedi in maniera interattiva Svantaggi: Workflow non legato a una timeline Scarsa gestione keyframing ed effetti temporali
Approccio a nodi
Introduzione alla Grafica Vettoriale Laboratorio di Multimedia 1 Modulo Grafica 15-3-2010 Davide Gadia gadia@dico.unimi.it
Sommario Definizione grafica vettoriale Differenze tra grafica raster e grafica vettoriale Aliasing e Anti-aliasing Formati immagini vettoriali Svg Eps
Grafica vettoriale Immagine definita tramite primitive matematiche Punti Rette Poligoni Curve di Bezier Visualizzazione: Analisi parametri di visualizzazione (Es: dimensione) Elaborazione delle componenti matematiche Rasterizzazione
Grafica vettoriale Vantaggi: Scalabilità Applicazione trasformazioni senza perdita di qualità File di minor dimensione Adatto per grafici o per composizioni non fotorealitiche Adatto per applicazioni multimediali interattive Formati supportati da browser Svantaggi: Necessità di elaborazione per la visualizzazione Non adatto per fotografie
Grafica raster vs Grafica vettoriale Es: cerchio Grafica raster: Matrice di pixel Ognuno con il proprio colore Grafica vettoriale: Equazione del cerchio Raggio e posizione iniziale del cerchio Parametri di colore e dimensione tratto, ecc
Grafica raster vs Grafica vettoriale Es: cerchio Es: ingrandimento di 10 volte Grafica raster: Pixel mancanti vengono interpolati Bordi non uniformi e frastagliati (aliasing) Grafica vettoriale: Vengono cambiati i parametri relativi al raggio Nuovo raggio applicato nell'equazione Rasterizzazione Visualizzazione finale: Ho sempre bisogno di una rappresentazione raster Con grafica vettoriale: la uso il più tardi possibile!
Grafica raster vs Grafica vettoriale 10x raster 10x vettoriale
Grafica raster vs Grafica vettoriale
Grafica raster vs Grafica vettoriale Codifica dei font Codifica Raster: ASCII Unicode Codifica vettoriale: PostScript Type 1 TrueType Nella codifica vettoriale: In memoria, contorno (outline) del font Curve di Beziér Permette di visualizzare il font alla massima qualità A qualunque risoluzione Con qualunque stile, colore, effetto...
Immagini raster: aliasing e anti-aliasing Processo di digitalizzazione di un'immagine: Campionamento spaziale Quantizzazione dell'informazione luminosa Frequenza spaziale: Numero di eventi per unità di spazio Cicli per pixel Aliasing: Frequenza di campionamento più bassa delle componenti di frequenza dell'immagine Visivamente: scalettatura dei bordi Alte frequenze non presenti nel segnale originale
Immagini raster: aliasing e anti-aliasing Altro tipo di aliasing in immagini digitali: Moiré pattern Immagini con linee sottili Densità matrice di sensori non sufficiente Sottocampionamento sbagliato Campionamento corretto Campionamento errato
Immagini raster: aliasing e anti-aliasing Tecnica anti-aliasing: supersampling Più campioni per ogni pixel Colore finale: media dei campioni Come considerare più campioni per ogni pixel? Immagine input di dimensioni nxn Si lavora su sovracampionata (2x, 4x, 8x,...) Si applica schema di supersampling Si ritorna a dimensioni originali facendo la media dei campioni
Immagini raster: aliasing e anti-aliasing Originale Dopo supersampling
Formati per grafica vettoriale Scalable Vector Graphics (SVG) Encapsulated PostScript (EPS) Shockwave Flash Object (SWF) Proprietario (Adobe Flash) Animazioni
Scalable Vector Graphics (SVG) Formato aperto Proposto da W3C (World Wide Web Consortium) Gestisce Elementi grafica vettoriale Immagini raster Testo Animazioni
Scalable Vector Graphics (SVG) Grammatica XML per descrizione oggetti grafici 2D: Può essere utilizzato in qualunque applicazione XML-based Organizzazione gerarchica dei dati Possibilità di associare attributi agli oggetti grafici Sfrutta potenzialità trasformazioni XSL: Cambio di rappresentazione dinamica Supporta CSS Supporta DOM (Document Object Model) Supporta linguaggi scripting Associazione eventi ad oggetti Visualizzazione interattiva e dinamica Applicazioni web
Scalable Vector Graphics (SVG) Supporto in browser Nativo (anche se non sempre completo) Firefox Opera Safari Tramite plugin Internet Explorer Possibilità di creare oggetti grafici dinamici Database oggetti grafici SVG Supporta linguaggi di scripting Disponibilità di profili specifici: Dispositivi mobili Stampa di alta qualità
Scalable Vector Graphics (SVG) <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
Encapsulated PostScript (EPS) PostScript Linguaggio di descrizione di pagina Indipendente da risoluzione e dispositivo di visualizzazione Encapsulated PostScript File PostScript con particolari restrizioni Bounding Box Documento di una sola pagine No uso operatori di stato globale Ideato come formato per oggetti di grafica 2D Utilizzato per la stampa e l'editoria (Latex) Può essere inglobato in altri documenti PostScript Può includere una preview TIFF