Informatica Grafica 2003 Lezione 1:

Transcript

1 Informatica Grafica 2003 Lezione 1: Le primitive grafiche base Marco Gribaudo La Computer Graphic studia la sintesi delle immagini al calcolatore. L'elaborazione delle immagini studia le tecniche per ritoccare e migliorare le immagini acquisite tramite opportuni strumenti (scanner, fotocamere digitali...) o generate dalla computer graphic. Esistono due tipologie d'immagini: Immagini raster Le immagini raster definiscono la figura mediante una griglia di colori. Immagini vettoriali Le immagini vettoriali descrivino la figura mediante una serie di comandi con cui un programma puo' effettuare il disegno. (Scalable Vector Graphics) e' un linguaggio simile ad HTML utilizzato per descrivere immagini vettoriali. I comandi utilizzati per disegnare un'immagine sono dati sotto forma di TAG

2 Attraverso appositi plug-in, ad esempio quella dell'adobe scaricabile all'indirizo i Browser possono visualizzare le immagini. sta quindi diventando di fatto il nuovo linguaggio standard per descrivere immagini vettoriali. Tutti i file hanno lo stesso preambolo e la stessa chiusura: <!DOCTYPE svg PUBLIC "-//W3C//DTD 1.0//EN" " Gli attributi height e width specificano le dimensioni del disegno che si sta definendo: Al posto dei puntini rossi si inseriscono le istruzioni che effettuano il disegno. <!DOCTYPE svg PUBLIC "-//W3C//DTD 1.0//EN" " <!DOCTYPE svg PUBLIC "-//W3C//DTD 1.0//EN" " CODICE I sistemi di coordinate Tutti disegni effettuabili mediante grafica vettoriale si basano su comandi che uniscono tra di loro in modo opportuno punti presenti sullo schermo. I punti vengono indicati mediante coordinate. I sistemi di coordinate Esistono diversi sitemi di coordinate: Coordinate cartesiane Coordinate schermo Coordinate polari

3 Coordinate cartesiane Coordinate schermo x y x y I punti vengono indicati da una ascissa (x) e da una ordinata (y): alla loro intersezione si trova il punto. Identiche alle coordinate cartesiane, solo che le ordinate sono orientate in senso inverso. Coordinate polari θ ρ Le coordinate devono essere espresse riferendosi ad opportune unità di misura. Bisogna sempre tenere conto del riferimento impiegato: metri, centimetri, pixel, percentuali... I punti vengono indicati mediante un angolo ed una distanza da un centro. In le unita' di misura si indicano aggiungendo due lettere dopo i valori numerici: em Dimensione delle lettere ex Altezza della lettera x px Pixels (dimensione di default) pt Punti (1/72 di pollice) pc Pica (1/6 di pollice) cm Centimetri mm Millimetri in Pollici Ad esempio si possono specifcare le dimensioni della figura in Pixel: <!DOCTYPE svg PUBLIC "-//W3C//DTD 1.0//EN" " <svg width="800px" height="600px">

4 In e' possibile utilizzare unita' di misura differenti per specificare i valori di differenti coordinate. E' comunque sconsigliabile farlo in quanto si rischia di fare confusione e di avere difficolta' a modificiare il file in momenti successivi. Le primitive grafiche I comandi grafici che posso effettuare dei disegni unendo punti sullo schermo vengono chiamati primitive. Alcune primitive sono standard e sono largamente utilizzate. Altre invece sono specifiche di alcuni programmi grafici. Le primitive grafiche Le primitive grafiche Alcune primitve rappresentano solo contorni di figure. Altre invece descrivono figure "piene" In le primitve grafiche vengono indicate utilizzando appositi TAG: <!DOCTYPE svg PUBLIC "-//W3C//DTD 1.0//EN" " <line x1="700" y1="20" x2="700" y2="25" style="stroke:white"/> <rect x="0" y="0" width="800" height="100" style="fill:#cccc99; stroke:none;"/> Quasi tutte le primitive grafiche, richiedono la specifica di uno o più colori. possono essere specificati scegliendoli da una tavolozza, oppure mediante opportune tecniche di miscelazione. Quando i colori vengono scelti da una tavolozza, il programma mostra tutti i colori disponibili ed invita l'utente a sceglierne uno.

5 Adoperando il sistema RGB, i colori vengono definiti specificando le proporzioni di 3 colori primari: rosso, verde e blu. Utilizzando il sistema HSB si specifica la tinta, la saturazione (quanto tende al grigio) e l'intensità. In i colori si indicano utilizzando il sistema RGB e possono essere specifcati in 4 modi diversi: red Utilizzando il nome del colore #ff0080 Con # ed il valore esadecimale come in HTML rgb(255,0,128) Con rgb() specificando tra parentesi le intensita' dei colori tra rgb(100%,0,50%) Con rgb() specificando tra parentesi le percentuali dei colori primari Quando una primitiva specifica un contorno, è generalmente possibile scegliere un tratto. Si può specificare il colore, lo stile e lo spessore della linea che percorre il contorno. Lo spessore specifica la "grandezza" della linea. Lo stile il modo in cui essa viene disegnata.

6 in si indica aggiungendo l'attributo style al tag della primitva: <line x1="700" y1="20" x2="700" y2="25" style="stroke:white; stroke-width:5;"/> Nel valore dell'attributo si indicano separati da un punto e virgola le caratteristiche del colore, dello spessore e dello stile. stroke:white; stroke-width:5px; Indica il colore del tratto. Indica lo spessore. stroke-dasharray:5,3; Indica lo stile del tratto: I valori che lo seguono (sempre in numero pari) specificano la lunghezza dei segmenti pieni e di quelli vuoti dello stile. La primitiva grafica più semplice è il segmento. Un segmento è semplicemente una linea retta che unisce due punti. In i segmenti si indicano attraverso il comando <line>: <line x1="700" y1="20" x2="700" y2="25" style="stroke:white"/> Gli attributi x1 e y1 indicano le coordinate del pirmo estremo del segmento, mentre x2 e y2 le coordinate dll'altro estremo. In molti programmi è possibile specificare una forma da disegnare agli estremi del segmento. In questo modo è possibile ottenere frecce ed altri oggetti simili. Si può generalmente specificare la forma dell'estremo iniziale e di quello finale del segmento.

7 In gli estremi dei segmenti possono essere definiti attraverso il concetto dei maker. I marker sono pero' molto complicati da utilizzare e vanno al di la' degli scopi di questo corso! Tutti i programmi grafici consentono di inserire rettangoli. possono essere costituiti solamente da un perimetro, da un'area o da entrambi. Molti software consentono anche l'inserimento di rettangoli con gli angoli arrotondati. In questo caso serve una specifica in più: quanto smussare gli spigoli. sono quasi sempre identificati dai punti corrispondenti a due vertici opposti. si indicano attraverso il comando <rect>: Aggiungendo gli attributi rx e ry si possono realizzare spigoli arrotondati: <rect x="0" y="0" width="800" height="100" style="fill:#cccc99; stroke:none;"/> Gli attributi x e y indicano le coordinate dell'angolo in alto a sinistra del retangolo, mentre width e heigth rispettivamente la larghezza e l'altezza del rettangolo. Il comando fill all'interno dello stile indica il colore di riempimento. <rect x="0" y="0" width="800" height="100" rx="10" ry="10" style="fill:#cccc99; stroke:none;"/> In si puo' specificare un fattore di smusso differente per le direzioni orizzontali e verticali.