Matematica e Informatica: dietro le quinte della grafica al calcolatore

Transcript

1 Matematica e Informatica: dietro le quinte della grafica al calcolatore Giulio Casciola Dipartimento di Matematica Università di Bologna casciola@dm.unibo.it

2 Motivazioni Matematica e Informatica Insegnare la Matematica sull onda dell Informatica Fare emergere lo spirito applicativo della matematica Fare acquisire competenze di problem solving Stimolare i ragazzi e farli ragionare Scoprire la matematica nelle cose che usiamo tutti i giorni

3 Grafica al Calcolatore Vector vs Raster: esempi Sommario La Matematica per disegnare con il calcolatore Disegno di Linee: algoritmo Incrementale e di Bresenham Disegno di curve di Bézier Un algoritmo di Rasterizing Un algoritmo di Tracing per Bitmap Un algoritmo di Color Tracing Conclusioni

4 Grafica al Calcolatore un disegno (o immagine) su un Display Raster Scan viene generato punto per punto un elemento, punto o pixel è l unità elementare di disegno disegnare consiste nel modificare l informazione intensità luminosa di ogni pixel del Display CPU Devices System Bus RAM Frame Buffer GPU CRT

5 GPU (Graphics Processor Unit) Frame Buffer Indirizzo x Indirizzo y Valore pixel Generatore Raster Scan Deflessione Intensità CRT Video Controller while (true) for (y=0; y<n; y++) for (x=0; x<m; x++).. A sistema funzionante, per accendere un pixel nella posizione (x,y), sarà sufficiente inserire nella corrispondente posizione del Frame Buffer, l informazione 1 (acceso in un sistema monocromatico). Tutti i sistemi grafici possiedono una funzione per far questo.

6 Grafica al Calcolatore Chiameremo la funzione per disegnare un pixel: draw_point(x,y,col) i parametri x ed y rappresentano le coordinate schermo del punto che vogliamo disegnare in un sistema Cartesiano a coordinate intere (per es. [0,1023]x[0,767] da cui risoluzione 1024x768); il parametro col rappresenta il colore con cui vogliamo disegnare il punto; Il modo usualmente adottato per disegnare curve o immagini è, come detto, punto per punto, ed in particolare ogni punto consecutivamente all altro.

7 Grafica al Calcolatore Ci sono due modi per definire un'immagine su calcolatore: modalità Raster: cioè una matrice di valori interi di intensità associata alla matrice dei pixel che costituiscono l'immagine; modalità Vector: descrizione matematica delle curve che separano le regioni di differente colore (outline); Raster Vector Le immagini vettoriali sono scalabili, le immagini raster no.

8 Vector vs Raster I principali vantaggi della grafica vector rispetto alla grafica raster sono la qualità, la maggior compressione dei dati e la più facile gestione delle eventuali modifiche. Le immagini raster sono ideali per rappresentare foto (real life images), o per simulare il colore di materiali (texture); Le immagini vettoriali, risultano migliori per tutti gli altri scopi. La maggior parte dei dispositivi come monitor, stampanti a matrici di punti e stampanti laser, sono dispositivi Raster. Ciò significa che tutti gli elementi prima di essere inviati a tali dispositivi (disegnati) devono essere trasformati in raster.

9 Un esempio: i font digitali Un font, ovvero un tipo di carattere informatico, è una collezione indicizzata di glifi contenente informazioni su come associarvi un particolare codice, visualizzarli in differenti dimensioni e stamparli correttamente. Solitamente un font contiene le lettere alfabetiche, numeri e segni di punteggiatura. I font esistono anche come ideogrammi e simboli (come ad esempio, formule matematiche, note musicali o simboli geografici). Ci sono due tipi di font digitali: Bitmap font: consiste in una matrice di pixel rappresentante l immagine di un glifo; Outline font: consiste in una descrizione di livello superiore delle curve che racchiudono lo spazio di un glifo;

10 Font Forge FontForge è un software libero OpenSource e licenza GPL che permette la creazione e modifica di font in molti formati standard.

11 Un esempio: le bitmap Le bitmap sono immagini in bianco e nero tipicamente memorizzate e rappresentate in modalità raster. Per quanto detto sui vantaggi della grafica vector, spesso è utile convertire una bitmap in modalità vector. Quando un immagine è in formato vector, per visualizzarla su un display o stampante è necessario riconvertirla in formato raster. Il procedimento di conversione di un'immagine raster in una vector è detto tracing (o vectorizing) mentre il viceversa è detto rasterizing. La Linea

12 Una dimostrazione pratica Dimostrazione con Acrobat Reader 7.08

13 Un esempio: SVG SVG (Scalable Vector Graphics) è un formato di grafica vettoriale, prodotto dal W3C (World Wide Web Consortium) consorzio noprofit che si occupa degli standard WEB. Il sorgente di un file SVG è puro testo XML, ed è quindi componibile modularmente con qualsiasi altra applicazione XML. Come linguaggio XML può essere processato con i tradizionali tool XML come parser, validatori, editor, e browser (SVG è già supportato dalle attuali versioni di browser in modo nativo o mediante appositi plug-in). SVG è anche utilizzato per cellulari e palmari.

14 InkScape InkScape è un software libero OpenSource e licenza GPL per il disegno vettoriale basato sul formato SVG.

15 La Matematica per il disegno Linea per due punti: siano p 0 =(x 0,y 0 ) e p 1 =(x 1,y 1 ); p 0 L(t) = (1 - t) p 0 + t p 1 y t p 1 t t R ( retta) [0,1] ( segmento) x 0 1 t Se poniamo dx = x 1 -x 0,dy= y 1 -y 0 e d=(dx,dy) si può scrivere L(t) = p 0 + t d oppure x(t) = x 0 + t dx y(t) = y 0 + t dy

16 Algoritmo di de Casteljau Il matematico francese Paul de Casteljau, negli anni 60, diede una definizione algoritmica di curva in forma parametrica basata su interpolazioni lineari successive a partire da n+1 punti. Il risultato è una curva che interpola il primo ed ultimo punto assegnati e approssima in forma gli altri. p 3 p 2 p 0 p 1

17 Algoritmo di de Casteljau p 1 Sia n=2, cioè 3 punti L L 0 1 ( t) ( t) Q( t) = = (1 t) p = (1 t) p 1 0 (1 t) L + tp + tp 0 = (1 t) ( t) 2 p tl = (1 t)((1 t) p 1 ( t) 0 + tp p (1 t) tp ) + t((1 t) p 1 L 0 ( t ) + t 2 p 2 1 Q( t ) 0 t tp 2 ) L 1 ( t ) p 2 t R ( curva), t [0,1] ( tratto _ di _ curva)

18 Algoritmo di de Casteljau Sia n=3, cioè 4 punti 1 t t p 1 p 2 1 t t t 1 t 1 t 1 t t C( t ) 1 t t P 0 P 1 P 2 1 t 1 t 1 t t t t L 0 (t) ( 1 t ) P + tp L 1 (t) ( 1 t ) P + tp 0 1 L 2 (t) 2 p 0 ( 1 t ) P + tp t 1 t t t 0 t (1 + t 2 (1 + t 2 t ) P t ) P Q 0 (t) P P (1 Q 1 (t) t ) tp + 2 (1 t ) tp 1 2 t R t t 1 t + t + + ( curva), (1 3 (1 3 3 t ) t ) (1 t ) t t P C(t) p 3 tp 2 P 0 P 1 2 P 3 t [0,1] ( tratto _ di _ curva)

19 Algoritmo di de Casteljau Siano dati Pi i = 0,.., n e t [0,1] Algoritmo: P [k] i (t) = (1 t)p [k 1] i (t) + tp [k 1] i+ 1 (t) dove k = 1,..,n i = 0,..,n -k [0] i P (t) = p 0 P i [1] P 0 p 1 p 2 [1] P 1 [2] P [3] 0 P [2] 0 P 1 C( t ) [1] P 2 Risultato: P [n] 0 C(t) p 3

20 Valutazione punti della curva via Algoritmo di de Casteljau La definizione di de Casteljau è un algoritmo numericamente stabile per il calcolo di punti della curva modificato

21 Algoritmo di de Casteljau e base di Bernstein La base associata all algoritmo di de Casteljau è la ben nota base polinomiale di Bernstein: B dove B i, n i, n con ( ( t) B t n i ) = tbi 1, n 1( t) + (1 t) Bi, n 0,0 n = (1 t ) i = ( t) i! Definizione ricorsiva: = ( n! n 1 e i B )! i, n ( t) = n i 0 i t i 1 t [0,1] ( t) [0, n]

22 Caso grado n=3 Polinomi base di Bernstein 3 B 0, 3(t) = ( 1 t) 2 B, (t) = 3( -t) t B, = 2 3(t) ( 1 B, = 3 3 3(t) t 3 -t)t 2 B 0,3 B B 1,3 2, 3 B 3,3 t [0,1]

23 Le Curve di Bézier L ingegnere francese Pierre Bézier, negli anni 60, indipendentemente da de Casteljau, diede la seguente definizione di curva in forma parametrica. Siano dati i punti P i i=0,,n allora B i,n (t) P(t) PB (t) dove sono i polinomi base di Bernstein; = n i= 0 Si noti che ogni termine nella somma è il prodotto di una funzione polinomiale B i,n (t) per il punto P i detto punto di controllo. i i,n t [0,1] Esempio per n=3: P ( t ) i 3 = = 0 P i 3 i (1 t ) 3 i t i

24 Valutazione punti curva di Bézier via Algoritmo di de Casteljau La definizione di de Casteljau è anche un algoritmo numericamente stabile per il calcolo delle curve di Bézier.

25 Le Curve di Bézier Proprietà: 1.P(t) t [0,1] giace nel guscio convesso definito dai suoi punti di controllo; 2.P(0)=P 0 e P(1)=P n ; 3.P (0)=n(P 1 -P 0 ) e P (1)=n(P n -P n-1 ) ; 4.P(t) è invariante per trasformazioni affini; in particolare per traslazione, scala, rotazione e deformazione lineare (shear); 5.P(t) è approssimante in forma della poligonale di controllo. P 1 P 2 P 0 P 3

26 Le Curve di Bézier e la Suddivisione La definizione o algoritmo di valutazione di de Casteljau di una curva di Bézier fornisce anche i punti di controllo delle curve di Bézier corrispondenti agli intervalli [ 0,t] ˆ e [t, ˆ1. ] Vediamolo nel caso n=3: P0 P1 P2 P P1 P2 P 0 3 P 0 [1] P 0 [1] P1 P 1 P2 [2] P 0 [2] P 1 [3] P 0 [1] P 2 2 P 0 P 1 2 (1-t) t P 3 3 P 0 3 P(t) = Pi Bi, 3(t) t [ 0, 1] i= 0 0 = 3 i= 0 3 i= 0 i P0 B i, 3 3-i i 3 P Bi, (t) (t) t [ 0,t] ˆ t [t, ˆ1]

27 Curve di Bézier a tratti Nelle applicazioni, una curva complessa viene rappresentata con più curve di Bezier di grado 3 (o 2) raccordate fra loro con continuità C 0, C 1 o G 1, ecc. Date due curve di Bézier di punti di controllo rispettivamente P i e Q i, diremo che si raccordano: P 1 P 2 C 0 se P n = Q 0 C 1 se (P n P n-1 ) = (Q 1 Q 0 ) G 1 se (P n P n-1 ) = K (Q 1 Q 0 ) C 2.. G 2.. Q 0 P 3 n=3 Q 3 P 0 Curve di Bézier così raccordate vengono dette curve di Bézier a tratti. Q1 Q2

28 Esempi di Curve di Bézier a tratti g S Font Times New Roman

29 Esempi di Curve di Bézier a tratti Font Computer Modern

30 Esempi di Curve di Bézier a tratti Trasformazioni geometriche di curve

31 Una dimostrazione pratica Dimostrazione con InkScape 0.47

32 Disegno di Punti, Linee e Curve Abbiamo già visto in cosa consiste la primitiva di disegno di un singolo punto draw_point(x,y,col) Ma come si disegna una curva (di Bézier) su un display raster di un calcolatore? Affrontiamo prima il disegno di Linee (segmenti di retta) e poi di Curve.

33 Disegno di Linee Dati due punti (P 0, P 1 ) sullo schermo (a coordinate intere) determinare quali pixel devono essere disegnati per visualizzare il segmento retto (linea) che loro definiscono. P 1 P 0

34 Disegno di Linee Dati due punti (P 0, P 1 ) sullo schermo (a coordinate intere) determinare quali pixel devono essere disegnati per visualizzare il segmento retto (linea) che loro definiscono. P 1 P 0

35 Disegno di Linee Dati due punti (P 0, P 1 ) sullo schermo (a coordinate intere) determinare quali pixel devono essere disegnati per visualizzare il segmento retto (linea) che loro definiscono. P 1 P 0

36 Disegno di Linee Perché vengono disegnati questi pixel e non anche altri? P 1 P 0

37 Disegno Continuo a Pixel Si vuole procedere ad accendere pixel adiacenti per simulare un disegno continuo. Questo porta ad una definizione di pixel adiacenti; ci sono due differenti modi: 4-connected 8-connected

38 Linee Speciali - Orizzontale

39 Linee Speciali - Orizzontale Incrementa la x di 1, tenendo la y constante

40 Linee Speciali - Verticale

41 Linee Speciali - Verticale Tieni la x constante e incrementa la y di 1

42 Linee Speciali - Diagonale

43 Linee Speciali - Diagonale Incrementa la x di 1 e incrementa la y di 1

44 Come si procede per Linee Generiche?

45 Algoritmo di Linea Incrementale Sia L(t)= P 0 + (P 1 P 0 ) t con t [0, 1] l'espressione in forma parametrica del segmento di estremi P 0 =(x 0,y 0 ) e P 1 =(x 1,y 1 ). Dalla forma esplicita: x = x 0 +(x 1 x 0 )t y = y 0 +(y 1 y 0 )t t [0, 1] si possono determinare punti del segmento per opportuni valori del parametro; il numero di punti è dato dal numero di pixel necessari per rappresentare 8-connected il segmento. Algoritmo: n=max(abs(x1-x0),abs(y1-y0)) dx=(x1-x0)/n dy=(y1-y0)/n for ( i=0; i<=n; i++) { x=x0+i*dx y=y0+i*dy draw_point(round(x),round(y),col) } int round(float a) { int k; k=(int)(a + 0.5); return k; }

46 Algoritmo di Linea Incrementale Il metodo incrementale consiste nel determinare le coordinate del nuovo punto da quelle del punto precedente, anziché dall'espressione parametrica: x i+1 = x 0 + (i + 1) dx x i = x 0 + i dx sottraendo si ha: x i+1 = x i + dx; (analogamente y i+1 = y i + dy). Algoritmo: n=max(abs(x1-x0),abs(y1-y0)) dx=(x1-x0)/n dy=(y1-y0)/n x=x0 y=y0 draw_point(x,y,col) for (i=1; i<=n, i++) { x=x+dx y=y+dy draw_point(round(x),round(y),col) }

47 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (6, 4) sarà: n=6, dx=1 dy y = y x x = = (6,4) (0,2)

48 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (6, 4) n=6, dx=1, dy=1/ > (0,2) (6,4) (0,2)

49 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (6, 4) n=6, dx=1, dy=1/ > (0,2) (1,2.333) --> (1,2) (6,4) (0,2)

50 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (6, 4) n=6, dx=1, dy=1/ > (0,2) (1,2.333) --> (1,2) (2,2.666) --> (2,3) (6,4) (0,2)

51 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (6, 4) n=6, dx=1, dy=1/ > (0,2) (1,2.333) --> (1,2) (2,2.666) --> (2,3) (3,3.000) --> (3,3) (0,2) (6,4)

52 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (6, 4) n=6, dx=1, dy=1/ > (0,2) (1,2.333) --> (1,2) (2,2.666) --> (2,3) (3,3.000) --> (3,3) (4,3.333) --> (4,3) (0,2) (6,4)

53 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (6, 4) n=6, dx=1, dy=1/ > (0,2) (1,2.333) --> (1,2) (2,2.666) --> (2,3) (3,3.000) --> (3,3) (4,3.333) --> (4,3) (5,3.666) --> (5,4) (0,2) (6,4)

54 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (6, 4) n=6, dx=1, dy=1/ > (0,2) (1,2.333) --> (1,2) (2,2.666) --> (2,3) (3,3.000) --> (3,3) (4,3.333) --> (4,3) (5,3.666) --> (5,4) (6,4.000) --> (6,4) (0,2) (6,4)

55 Algoritmo di Linea Incrementale: : note Operazioni aritmetiche floating point Arrotondamento (funzione round( ) ) Si può fare meglio?

56 Algoritmo di Linea di Bresenham Si procede alla descrizione dell algoritmo facendo uso del metodo dei due punti nel caso 8-connected. Senza perdere in generalità, limiteremo la trattazione a segmenti di estremi P 0 =(0,0) e P 1 =(a,b) con a,b N, a b 0 (pendenza 1). Una semplice simmetria e traslazione permetterà di considerare segmenti negli altri ottanti e con estremi qualunque. y P 1 =(a,b) P 0 =(0,0) x

57 Algoritmo di Linea di Bresenham Dato un punto disegnato del segmento,, per le ipotesi in cui ci siamo messi, basterà determinare se il successivo punto (8- connected) sarà in posizione Est (E) o NordEst(NE)

58 Algoritmo di Linea di Bresenham Dato un punto disegnato del segmento,, per le ipotesi in cui ci siamo messi, basterà determinare se il successivo punto (8- connected) sarà in posizione Est (E) o NordEst(NE) Il punto a E, sia C=(x+1,y), è più vicino o più lontano di quello a NE, sia B=(x+1,y+1), dalla linea? se è più vicino C: muovi verso Est se è più vicino B: muovi verso Nord Est B C

59 Algoritmo di Linea di Bresenham Sia f(x,y) = bx ay = 0 l equazione della retta passante per (0,0) e (a,b) con a,b N, a b 0 Noto il pixel (x i,y i ) che al passo i-esimo meglio approssima il segmento, il metodo dei due punti sceglie al passo (i+1)-esimo fra i pixel B=(x i +1, y i +1) e C=(x i +1, y i ). y i +1 B y i C x i x i +1 I valori f(b) e f(c) vengono presi come indicatori lineari di quanto i pixel/punti B e C siano lontani dalla retta.

60 Algoritmo di Linea di Bresenham Infatti, sia f(x,y) = ax + by + c = 0 l equazione di una retta del piano. La distanza d di un punto (x,y ) dalla retta f(x,y)=0 è data da f(x,y ) d = ± a 2 + b 2 Da cui il valore di f(x,y ) è proporzionale a d. Per valutare, dati due punti B e C, chi è meno distante dalla retta f(x,y)=0 è sufficiente confrontare f(b) ed f(c) in valore assoluto. se f(b) < f(c) allora pixel B altrimenti pixel C od anche: se f(b) + f(c ) 0 allora pixel B altrimenti pixel C B C

61 Algoritmo di Linea di Bresenham Sostituendo le coordinate di B=(x i +1, y i +1) e C=(x i +1, y i ) nell espressione della f(x,y) = bx ay, si ha: f(c) + f(b) = = b (x i +1) a y i + b (x i +1) a (y i +1) = 2 b (x i +1) 2 a y i -a Si definisce d i, discriminatore per il passo (i+1)-esimo, come: d i = 2 b (x i +1) 2 a y i -a

62 Algoritmo di Linea di Bresenham Algoritmo: x=0 y=0 draw_point(x,y,col) for (i=1; i<=a; i++) { x=x + 1 d=2*b*x 2*a*y a if (d 0) y=y + 1 draw_point(x,y,col) } Questo segmento di codice comporta, per ogni pixel, il calcolo del discriminatore; sebbene tutti i calcoli siano in aritmetica intera, la valutazione del discriminatore è pesante. Si cerca un metodo per determinare il valore del discriminatore al passo (i+1)-esimo utilizzando il valore del discriminatore al passo i-esimo.

63 Algoritmo di Linea di Bresenham Caso 1: al passo i-esimo sia d i 0 e quindi si debba scegliere B=(x i +1,y i +1) (x i+1 +1,y i+1 +1) B (x i+1 +1,y i+1 ) Allora: (x i,y i ) d i+1 = f(x i+1 +1,y i+1 +1) + f(x i+1 +1,y i+1 ) = b(x i+1 +1) - a(y i+1 +1) + b(x i+1 +1) - ay i+1 = b(x i +1) + b - ay i - 2a + b(x i +1) + b - ay i -a = 2b(x i +1) - 2ay i a + 2b - 2a = d i + 2b - 2a d i+1 = d i + 2b - 2a

64 Algoritmo di Linea di Bresenham Caso 2: al passo i-esimo sia d i < 0 e quindi si debba scegliere C=(x i +1,y i ) (x i+1 +1,y i+1 +1) (x i,y i ) C (x i+1 +1,y i+1 ) Allora: d i+1 = f(x i+1 +1,y i+1 +1) + f(x i+1 +1,y i+1 ) = b(x i+1 +1) - a(y i+1 +1) + b(x i+1 +1) - ay i+1 = b(x i +1) + b - ay i -a + b(x i +1) + b ay i = 2b(x i +1) - 2ay i a + 2b = d i + 2b d i+1 = d i + 2b

65 Algoritmo di Linea di Bresenham Al passo i=0, essendo x=y=0, dall espressione del discriminatore si ha: d 0 = 2b -a Algoritmo: x=0 y=0 ince=2*b d=ince-a incne=d-a draw_point(x,y,col) for (i=1; i<=a; i++) { x=x + 1 if (d<0) d=d+ince else { d=d+incne y=y + 1 } draw_point(x,y,col) } Si noti, che vengono effettuate solo addizioni e sottrazioni fra interi e moltiplicazioni per 2 (shift di bit)

66 Algoritmo di Linea di Bresenham void qoriz(int x, int y, int dx, int dy, int sx, int sy, int col) { int i,d,ince,incne; ince=2*dy; d=ince-dx; incne=d-dx; draw_point(x,y,col); for (i=1; i<=dx; i++) { x=x+sx; if (d<0) d=d+ince; else { d=d+incne; y=y+sy; } draw_point(x,y,col); } } void qvert(int x, int y, int dx, int dy, int sx, int sy, int col) { int i,d,ince,incne; ince=2*dx; d=ince-dy; incne=d-dy; draw_point(x,y,col); for (i=1; i<=dy; i++) { y=y+sy; if (d<0) d=d+ince; else { d=d+incne; x=x+sx; } draw_point(x,y,col); } }

67 Algoritmo di Linea di Bresenham void draw_line(int x0, int y0, int x1,int y1, int col) { int dx, dy, temp, sx, sy; if (y0<y1) { temp=x0; x0=x1; x1=temp; temp=y0; y0=y1; y1=temp; } dx=x1-x0; sx=sgn(dx); dx=abs(dx); sy=-1; dy=y0-y1; if (dy<=dx) qoriz(x0,y0,dx,dy,sx,sy,col); else qvert(x0,y0,dx,dy,sx,sy,col); } int sgn(int n) { int sn; } if (n>0) sn=1; else if (n<0) sn=-1; else sn=0; return(sn);

68 Algoritmo di Linea di Bresenham: : Esempio Esempio: segmento di estremi (0,0) e (6,2); sarà a=6, b=2, ince=4, d= - 2, incne= - 8. i d -2 (6,2) (0,0)

69 Algoritmo di Linea di Bresenham: : Esempio Esempio: segmento di estremi (0,0) e (6,2); sarà a=6, b=2, ince=4, d= - 2, incne= - 8. i d (0,0) (6,2)

70 Algoritmo di Linea di Bresenham: : Esempio Esempio: segmento di estremi (0,0) e (6,2); sarà a=6, b=2, ince=4, d= - 2, incne= - 8. i d (0,0) (6,2)

71 Algoritmo di Linea di Bresenham: : Esempio Esempio: segmento di estremi (0,0) e (6,2); sarà a=6, b=2, ince=4, d= - 2, incne= - 8. i d (0,0) (6,2)

72 Algoritmo di Linea di Bresenham: : Esempio Esempio: segmento di estremi (0,0) e (6,2); sarà a=6, b=2, ince=4, d= - 2, incne= - 8. i d (0,0) (6,2)

73 Algoritmo di Linea di Bresenham: : Esempio Esempio: segmento di estremi (0,0) e (6,2); sarà a=6, b=2, ince=4, d= - 2, incne= - 8. i d (0,0) (6,2)

74 Algoritmo di Linea di Bresenham: : Esempio Esempio: segmento di estremi (0,0) e (6,2); sarà a=6, b=2, ince=4, d= - 2, incne= - 8. i d (0,0) (6,2)

75 Algoritmo di Linea di Bresenham: : note Solo operazioni aritmetiche fra interi Più precisamente addizioni, sottrazioni e shift di bit (moltiplicazioni per 2) Si estende ad altri tipi di forme (circonferenza, coniche,, ma non ad una generica curva polinomiale)

76 Disegno di Curve di Bézier Un algoritmo di disegno di una curva di Bézier, per essere efficiente, deve determinare una lineare a tratti approssimante la curva stessa con precisione al pixel. Questa verrà disegnata richiamando ripetutamente la primitiva grafica linea che a sua volta richiamerà la primitiva grafica punto. Curva di Bezier 8 connected

77 Disegno di Curve di Bézier via Suddivisione Nel caso n=3, le formule per la determinazione dei punti di controllo della suddivisione quando t ˆ = 1/ 2 sono date da: 0 P 0 3 = P P 0 = P P 0 0 P1 P2 P3 1 P2 + P3 P 1 P0 + P 2 = P0 = 2 P0 P1 P P1 + P2 P2 P 1 = P0 P1 + P P0 = + P 0 P 1 [1] 2 4 P1 P 1 P P0 + P [2] 1 P0 = P 0 [1] P 0 [2] P 2 0 P 1 [3] P 0 [1] P 2 P 0 P 3 Suddivisioni ripetute produrranno una sequenza di punti di controllo sempre più prossimi alla curva

78 Disegno di Curve di Bézier Allo scopo di visualizzare graficamente una curva di Bèzier, risulta efficiente suddividerla ricorsivamente nel punto ˆt = 1/2 fino a che ogni tratto sia approssimato da un segmento retto ad una precisione fissata. Il criterio di arresto può essere basato su un test di linearità applicato al guscio convesso. P 3 P 1 P 2 dist(p,p P ) < tol 1 0 and dist(p,p P ) < tol P 0

79 Disegno di Curve di Bézier Algoritmo Ricorsivo void draw_bez(int *n, float x0, float y0, float x1, float y1, float x2, float y2, float x3,float y3, int col) { float xab,yab,xbc,ybc,xcd,ycd,xabc,yabc,xbcd,ybcd,xabcd,yabcd; if (bez_test(x0,y0,x1,y1,x2,y2,x3,y3)) { draw_line(round(x0),round(y0),round(x3),round(y3),col); end_points_x[*n] = round(x0); end_points_y[*n] = round(y0); (*n)++; } else { xab = 0.5*(x0+x1); yab = 0.5*(y0+y1); xcd = 0.5*(x2+x3); ycd = 0.5*(y2+y3); xbc = 0.5*(x1+x2); ybc = 0.5*(y1+y2); xabc = 0.5*(xab+xbc); yabc = 0.5*(yab+ybc); xbcd = 0.5*(xbc+xcd); ybcd = 0.5*(ybc+ycd); xabcd = 0.5*(xabc+xbcd); yabcd = 0.5*(yabc+ybcd); draw_bez(x0,y0,xab,yab,xabc,yabc,xabcd,yabcd,col); draw_bez(xabcd,yabcd,xbcd,ybcd,xcd,ycd,x3,y3,col); } }

80 Disegno di Curve di Bézier Algoritmo Ricorsivo int bez_test(float x0, float y0, float x1,float y1, float x2, float y2, float x3,float y3) { float dmax; float nx,ny,norm_n; nx = y0-y3; ny = x3-x0; norm_n = sqrt( nx*nx + ny*ny ); dmax = abs( (nx*(x1 - x0) + ny*(y1 - y0) )/norm_n); dmax = max(dmax, abs( (nx*(x2 - x0) + ny*(y2 - y0) )/norm_n) ); if(dmax > 0.5) // tolleranza al pixel return(0); else return(1); } In conclusione l algoritmo di disegno di una curva di Bézier determina e disegna una lineare a tratti approssimante la curva al pixel. Quest ultima può essere disegnata richiamando ripetutamente la primitiva grafica linea.

81 Sul Test di Linearità Nell ottica di avere un test di linearità più robusto rispetto al bez_test esposto si può considerare il test di linearità proposto da R.Willcocks autore di RoPS PostScript Interpreter. Infatti come si comporterebbe il nostro test sulla seguente curva degenere di Bezier? P 1 P 0 P 3 P 2 Se la chiamata a dist(p1,p0 P 3 ) ritorna la distanza del primo punto P 1 dalla retta definita dagli altri due, il test darà esito positivo e verrà disegnato il segmento P 0 P 3!!!

82 Le Curve Subdivision Il principio sui cui si basa uno schema Subdivision è molto semplice. Sia dato un insieme di punti del piano; in ogni passo di suddivisione viene generato un insieme di punti doppio del precedente. Ogni nuovo punto viene calcolato usando una regola locale. Ripetute applicazioni del processo di suddivisione portano ad un insieme sempre più denso di punti che definiscono una curva continua e regolare. Si noti che Subdivision è un metodo discreto e non è detto che esista una rappresentazione matematica della curva così definita. Questo non deve essere visto come uno svantaggio, infatti per esempio nella grafica, il risultato finale deve essere visualizzato su un display e questo implica che ogni dettaglio più piccolo di un pixel venga scartato.

83 Lo schema di Chaikin ( k + 1) 1 p2i 1 = p 4 ( k + 1) 3 p2i = p 4 k = 0,1,... i ( k ) i 1 ( k ) i p p ( k ) i ( k ) i+ 1 (0) p i 1 3 : 1 (0) p i 1 : 3 (0) p i+1 ( k + 1) ( k ) P = SP

84 Lo schema di Chaikin

85 Lo schema di Chaikin 3 : 1 1 : 3

86 Lo schema di Chaikin

87 Lo schema di Chaikin

88 Lo schema di Chaikin

89 Lo schema di Chaikin

90 Lo schema di Chaikin Punto di Controlo Curva Limite Curva Spline Quadratica Poligono di Controllo

91 Un algoritmo di Rasterizing Dato un poligono in coordinate schermo, la sua rasterizzazione consiste nel disegnare con un colore tutti i pixel del poligono (i pixel interni o sui lati del poligono). L idea base dell algoritmo che descriveremo è determinare i pixel del poligono una riga (scanline) alla volta scanline 8

92 Un algoritmo di Rasterizing L algoritmo di rasterizzazione si può sintetizzare nei seguenti passi: 1. Trovare l intersezione della scanline con tutti i lati del poligono x x x x scanline 8

93 Un algoritmo di Rasterizing L algoritmo di rasterizzazione si può sintetizzare nei seguenti passi: 1. Trovare l intersezione della scanline con tutti i lati del poligono 2. Ordinare le intersezioni secondo le ascisse x x 2 x x scanline 8

94 Un algoritmo di Rasterizing L algoritmo di rasterizzazione si può sintetizzare nei seguenti passi: 1. Trovare l intersezione della scanline con tutti i lati del poligono 2. Ordinare le intersezioni secondo le ascisse 3. Accendere i pixel della scanline fra coppie di intersezioni scanline 8 Nell esempio la lista ordinata delle ascisse è: (2, 5, 8, 13); si accenderanno quindi i pixel da 2 a 5 e da 8 a 13.

95 Un algoritmo di Rasterizing Osservazioni sulla fase di intersezione: i segmenti orizzontali vengono scartati perché non producono intersezioni; i lati vengono accorciati per garantire che ogni scanline intersecata con tutti i lati fornisca un numero pari di intersezioni (teorema di Jordan); utilizzo dell algoritmo di Linea incrementale per determinare le intersezioni in modo semplice I lati siano definiti da (x 0,y 0 ) e (x 1,y 1 ) e (x 0,y 0 ) sia sempre l estremo con ordinata maggiore, allora: n=y 1 -y 0 (numero di scanline 1) m=n/(x 1 -x 0 ) (pendenza) dx=1/m dy= -1 x i+1 = x i + dx y i+1 = y i + dy

96 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (5, 5) sia: dy=1, n=3 dx x = x y y = = (5,5) (0,2)

97 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (5, 5) n=3, dy=1, dx=1.6 (0,2) (5,5) (0,2)

98 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (5, 5) n=3, dy=1, dx=1.6 (0,2) (1.6,3) (2,3) (5,5) (0,2)

99 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (5, 5) n=3, dy=1, dx=1.6 (0,2) (1.6,3) (2,3) (3.3,4) (3,4) (5,5) (0,2)

100 Algoritmo di Linea Incrementale: esempio P 0 = (0, 2) P 1 = (5, 5) n=3, dy=1, dx=1.6 (0,2) (1.6,3) (2,3) (3.3,4) (3,4) (5,5) (5,5) (5,5) (0,2)

101 ET Un algoritmo di Rasterizing Per implementare l algoritmo faremo uso di due strutture dati: Edge Table (ET): contiene le informazioni sui lati secondo la loro ordinata maggiore; Active Edge Table (AET): contiene la situazione dell intersezione fra la scanline corrente e i lati del poligono, così che sia facile determinare la sequenza dei pixel da disegnare. Ymin Xmax 1/m / / / Ymin X 1/m / AET /

102 Un algoritmo di Rasterizing Una volta costruito l ET, i passi dell algoritmo sono: 1.Porre Y alla più grande ordinata dell ET; 2.Inizializzare l AET a vuoto; 3.Ripetere fino a che l AET o l ET sono vuoti: 3.1 muovere l informazione relativa a Y dall ET all AET, mantenendo l AET ordinato sulle X; 3.2 disegnare sulla scanline Y i pixel utilizzando coppie di ascisse dall AET; 3.3 rimuovere dall AET quelle informazioni per cui Y=Ymin; 3.4 per ciascuna informazione rimasta nell AET, aggiornare X con X+1/m; 3.5 ordinare l AET in base alle ascisse; 3.6 Y=Y-1;

103 Simulazione dell Algoritmo

104 Simulazione dell Algoritmo

105 Esempi di Rasterizing di Curve di Bézier a tratti

106 Esempi di Rasterizing di Curve di Bézier a tratti Bitmap: 736x815 pixel Bitmap: 640x801 pixel Bitmap: 672x777 pixel

107 Esempi di Rasterizing di Curve di Bézier a tratti Bitmap: 672x777 pixel Trova le differenze!

108 Un algoritmo di Tracing L'algoritmo di tracing chiamato Potrace si compone di 4 fasi: 1. Decomposizione dell'immagine in path 2. Ricerca dei poligoni ottimali di approssimazione dei path 3. Approssimazione dei poligoni con curve 4. Ottimizzazione delle curve outline Bitmap 34x25

109 Un algoritmo di Tracing: : fase 1 Si definisce path p la sequenza dei vertici dei pixel che compongono un contorno dell immagine: p={v 1,..,v n }, dove i vertici v i =(x i,y i ) sono a coordinate intere. In questa fase si procede a: isolare i path chiusi dell immagine (il primo vertice coincide con l ultimo) risolvere i casi di decomposizione ambigua eliminare il rumore dell immagine (despeckling) Tre path vertice pixel

110 Un algoritmo di Tracing: : fase 2 Costruire un poligono ottimale di approssimazione per ogni singolo path. si definisce poligono di approssimazione di un path p={v 1,..,v n }, un poligono con vertici in p, i cui lati v i v j sono segmenti retti che approssimano il sottopath s={v i,..,v j } ad ogni possibile lato v i v j si associa una penalità P ij che indica l errore commesso nell approssimare il sottopath s si applica un algoritmo di cammino minimo (teoria dei grafi) per minimizzare lessicograficamente la coppia (n,p), con n numero di lati del poligono di approssimazione e P la penalità totale dei suoi lati. Poligono ottimale a coord. intere

111 Un algoritmo di Tracing: : fase 2 Il poligono ottimale a vertici interi viene ulteriormente ottimizzato in modo che: i nuovi vertici v i abbiano distanza uniforme dagli originali v i : d(v i,v i ) 1/2 i lati v i v j siano di miglior approssimazione dei sottopath s={v i,..,v j } Poligono ottimale

112 Una classe di Cubiche di Bézier Sia data una cubica di Bézier C(t) con punti di controllo P 0, P 1, P 2 e P 3 ; allora C(t) è una cubica simmetrica e convessa se e solo se: I prolungamenti retti di P 0 P 1 e P 2 P 3 si incontrano in un unico punto Q; Il cambio di direzione totale di C(t) è inferiore a 180 ; Convessità: P 1 sta sul segmento P 0 Q e P 2 su QP 3 Simmetria: d(p 0,P 1 )/d(p 0 Q) = d(p 2,P 3 )/d(p 3 Q) = def α Q P 2 P 1 P 3 Proprietà: 0 < α 1 C(t) resta univocamente def. da: α, P 0, Q, P 3 P 0

113 Un algoritmo di Tracing: : fase 3 In questa fase si approssima il poligono ottimale, i cui vertici chiameremo ancora v i,, con una curva cubica di Bézier simmetrica e convessa a tratti. Per l esattezza si chiamino b i i punti medi dei lati v i v i+1 e ogni sottopoligonale b i-1 v i b i venga approssimata con una curva cubica di Bèzier di estremi b i-1 e b i e tangenti negli estremi definite dai segmenti b i-1 v i e v i b i. v i-1 b i-1 v i b i v i+1 (a) 0.55 α 1 (b) α < 0.55 (c) α > 1

114 Un algoritmo di Tracing: : fase 3 In base al parametro 0<α 1, che stima la distanza fra il segmento b i-1 b i e la retta l i a lui parallela e passante per il vertice più prossimo del pixel, si procede al seguente corner detection : 0.55 α 1: si assume che la cubica di Bézier simmetrica e convessa di altezza α sia l'approssimante del poligono nel tratto b i-1 v i b i α>1: il poligono nel tratto b i-1 v i b i viene approssimato con i segmenti b i-1 v i ev i b i (la cubica potrebbe non essere convessa) α<0.55: per evitare che in b i-1 eb i la curvatura sia troppo accentuata, si impone che la cubica di Bézier approssimante abbia altezza α=0.55. α

115 Un algoritmo di Tracing: : fase 4 In questa fase si ottimizzano le curve outline finali cercando di approssimare una sequenza di cubiche con un unica cubica a meno di una tolleranza di approssimazione fissata. In questo passo si hanno i seguenti vincoli: i segmenti devono restare segmenti; si approssimano solo sequenze di cubiche che non presentino cambi di convessità; si deve mantenere la continuità geometrica; si minimizza il numero di curve cubiche di Bézier approssimanti finali. Ottimizzazione delle outline

116 Un algoritmo di Tracing: : fase 4 L algoritmo Potrace permette di scegliere alcuni parametri che influenzeranno il risultato del tracing: Turn policies: specificano come risolvere casi di decomposizione in path ambigui; Despeckling: specifica la soglia di eliminazione di rumore; αmax: soglia di riconoscimento degli angoli; Errore di ottimizzazione: specifica l errore massimo consentito in fase di ottimizzazione finale.

117 Esempi di Tracing Bitmap: 736x815 pixel Bitmap: 384x344 pixel Bitmap: 400x453 pixel

118 Conversione a bitmap avendo scalato l immagine e scelta una soglia Esempi di Tracing

119 Esempi di Tracing Tracing, modifica di curve outline, rasterizing

120 Esempi di Tracing

121 Un algoritmo di Color Tracing Uno degli algoritmi di color tracing implementato in InkScape fa uso di Potrace e si compone di 4 fasi: Quantizzazione dell immagine ad N colori (N può essere scelto) L immagine viene convertita in N-1 bitmap, ognuna elaborata con soglia definita dal passaggio fra due colori, una volta ordinati Applicazione di Potrace ad ogni bitmap Generazione dell immagine vettoriale sovrapponendo il risultato degli N-1 tracing, a cui viene applicato il colore opportuno

122 Esempi di Color Tracing Immagine: 500x395 pixel 2 Colori 8 Colori

123 Conclusioni L informatica è basata sulla matematica e fornisce numerosi spunti per fare matematica in modo accattivante. Questo modo di procedere fa inoltre emergere lo spirito applicativo della matematica, spesso dimenticato.

124 Domande?!

125 Argomenti toccati Retta, parabola e cubica nel piano cartesiano (estensione a circonferenza e coniche in genere); Forma algebrica e parametrica; Polinomi e Interpolazione polinomiale; Derivate e tangenti; Definizione ricorsiva, successioni; Trasformazioni geometriche nel piano; Distanza punto/retta; Intersezione retta/retta (rasterizing, clipping); Teoria dei Grafi (cammino minimo); Approssimazione minimi quadrati (retta di regressione lineare);

126 Riferimenti A.Van Dam, S.Feiner, J.Hughes, Computer Graphics principles and practice in C (II edition), Addison Wesley, D.F.Rogers, J.A.Adams, Mathematical Elements for Computer Graphics (second edition), McGraw-Hill, P.Selinger, Potrace: a polygonal-based tracing algorithm, (2003)