Università degli Studi di Parma - cs.unipr.it · Tesi di Laurea Triennale ... 5.4 abTelle del...

Università degli Studi di Parma

Facoltà di Scienze

Matematiche, Fisiche e Naturali

Corso di Laurea in Informatica

Tesi di Laurea Triennale

Sperimentazione delle Funzionalità

Gra�che di HTML5

Mediante il Google Web Toolkit

Candidato: Relatore:Beatrice Demaldè Chiar.mo Prof. Federico Bergenti

Anno Accademico 2010/2011

Ringraziamenti

Il primo ringraziamento va ai miei genitori, che mi hanno costantemente

spronata a superare le di�coltà piccole e grandi incontrate in questo percorso

di studi;

ringrazio i compagni di università con cui ho condiviso molte esperienze;

il Dott. Bergenti, relatore di questa tesi, per la disponibilità e cortesia di-

mostratemi, e per tutto l'aiuto fornitomi durante la stesura;

Carlo, che ha sempre creduto in me;

gli amici che mi sono stati vicini...

e tutti coloro che mi hanno aiutata a portare a termine questo percorso.

i

Indice

1 Introduzione 1

1.1 HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21.1.1 Novità . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 Strumenti e Tecnologie 7

2.1 GWT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.1.1 Introduzione . . . . . . . . . . . . . . . . . . . . . . . . 72.1.2 Google Web Toolkit . . . . . . . . . . . . . . . . . . . 122.1.3 Con�gurazione dell'Ambiente di Sviluppo . . . . . . . . 12

2.2 Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.2.1 Canvas con GWT . . . . . . . . . . . . . . . . . . . . . 16

3 Curve e Super�ci di Bézier 18

3.1 Curve di Bezier . . . . . . . . . . . . . . . . . . . . . . . . . . 183.1.1 Contesto storico . . . . . . . . . . . . . . . . . . . . . . 183.1.2 De�nizione nel Piano . . . . . . . . . . . . . . . . . . . 203.1.3 De�nizione per Induzione . . . . . . . . . . . . . . . . 243.1.4 Proprietà delle curve di Beziér . . . . . . . . . . . . . . 253.1.5 Limiti delle curve di Bézier . . . . . . . . . . . . . . . . 29

3.2 Super�ci di Bézier . . . . . . . . . . . . . . . . . . . . . . . . . 303.2.1 De�nizione nello Spazio . . . . . . . . . . . . . . . . . 313.2.2 De�nizione matriciale . . . . . . . . . . . . . . . . . . . 323.2.3 Proprietà delle super�ci di Bézier . . . . . . . . . . . . 353.2.4 Limiti delle super�ci di Bézier . . . . . . . . . . . . . . 37

3.3 Algoritmo di De Casteljau . . . . . . . . . . . . . . . . . . . . 383.3.1 Algoritmo di De Casteljau per curve di Bézier . . . . . 393.3.2 Algoritmo di De Casteljau per super�ci di Bézier . . . 42

4 Sperimentazione del Canvas HTML5 mediante GWT 45

4.1 Struttura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464.1.1 Classi . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

ii

INDICE iii

4.2 Z-bu�ering e illuminazione . . . . . . . . . . . . . . . . . . . . 594.2.1 Back Face Culling . . . . . . . . . . . . . . . . . . . . . 594.2.2 Colore e Illuminazione . . . . . . . . . . . . . . . . . . 61

4.3 Trasformazioni Geometriche . . . . . . . . . . . . . . . . . . . 664.3.1 De�nizione . . . . . . . . . . . . . . . . . . . . . . . . . 67

5 Conclusioni e sviluppi futuri 70

Appendice A 72

5.1 Utah Teapot . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725.2 Teapot con OpenGL . . . . . . . . . . . . . . . . . . . . . . . 735.3 Punti di controllo . . . . . . . . . . . . . . . . . . . . . . . . . 76

Appendice B 79

5.4 Tabelle del supporto sui browser di HTML5 . . . . . . . . . . 79

Bibliogra�a 83

Capitolo 1

Introduzione

l'HTML è sempre più la base di vere e proprie applicazioni Web (Google

docs, Google Maps, Meebo, etc.), dove la forma ipertestuale è marginale,

quando non completamente assente. L'HTML5 mette a disposizione dello

sviluppatore una ricca serie di nuove API studiate per permettere lo sviluppo

di complesse applicazioni all'interno di un browser.

Nonostante non sia ancora riconosciuto come standard dal W3C, l'HTML5

è ormai diventato un punto di riferimento per lo sviluppo di siti Web per la

sua eleganza e leggibilità.

Tra le novità più rilevanti, ci sono l'introduzione di interfacce di program-

mazione per la gra�ca 2D e 3D, l'integrazione e il controllo di contenuti au-

dio e video, l'archiviazione persistente dei dati sul client, Web application in

modalità o�ine, compatibilità con iPhone e iPad, microformati e semantica.

Nel presente lavoro è stato sperimentato l'aspetto riguardante la gra�ca

sul Canvas, elemento supportato da HTML5.

1

CAPITOLO 1. INTRODUZIONE 2

1.1 HTML 5

Nel corso degli anni, seguendo lo sviluppo di Internet, l'HTML (Hyper-

Text Markup Language) ha subito molte revisioni, ampliamenti e miglio-

ramenti, che sono stati indicati secondo la classica numerazione usata per

descrivere le versioni dei software. L'ultima versione disponibile è la versione

4.01, resa pubblica il 24 dicembre 1999. Dopo un periodo di sospensione,

in cui il W3C (World Wide Web Consortium) si è focalizzato soprattutto

sulle de�nizioni di XHTML (applicazione a HTML di regole e sintassi in stile

XML) e dei fogli di stile (CSS), nel 2007 è ricominciata l'attività di speci�-

ca con la de�nizione, ancora in corso, di HTML5, attualmente allo stato di

bozza.

La de�nizione delle speci�che iniziali del linguaggio è stata e�ettuata

da un gruppo di lavoro esterno al W3C : il WHATWG (Web Hypertext

Application Technology Working Group). Attualmente i lavori sono seguiti

sia dal WHATWG che dal W3C HTML working group.

Il panorama di Internet è cambiato molto negli ultimi anni. Inizialmente il

Web era strettamente legato al concetto di ipertesto e l'azione più comune per

l'utente era la fruizione di contenuti, tipicamente in forma testuale. La bassa

velocità di connessione contribuiva ad una scarsa presenza di applicazioni

Web, più care da sviluppare ed esigenti in termini di banda.

Tutto questo era ben rappresentato da un linguaggio, HTML, principal-

mente orientato ad agevolare la stesura di semplici documenti testuali colle-


gati fra loro. Negli anni successivi l'interesse intorno alla rete ha subito una

brusca accelerazione e questo ha condizionato positivamente sia la di�usione

che la velocità di connessione, attirando maggiori investimenti e ricerca. Al

modello di fruizione dei contenuti si è aggiunta la possibilità per l'utente �-

nale di divenire esso stesso creatore attraverso applicazioni Web sempre più

elaborate ed interessanti.

Questo nuovo livello di complessità, si è dovuto scontrare con un set di

speci�che poco inclini ad essere utilizzate per tali �ni e che quindi si sono

prestate al compito solo tramite in�niti workaround.

Parallelamente il percorso di crescita del Web ha fatto emergere alcune

strutture di contenuto ricorrenti, ben caratterizzate dal fenomeno dei blog:

informazioni di testata, menu di navigazione, elenchi di articoli, testo a pie'

di pagina, ed altri. La parte dedicata al singolo articolo presenta anch'essa

solitamente lo stesso set di informazioni quali autore, data di pubblicazione,

titolo e corpo del messaggio. Anche in questo caso l'HTML4 non ha sa-

puto fornire gli strumenti adatti a consentire una corretta gestione e classi�-

cazione del contenuto obbligando gli sviluppatori Web a ripiegare su strutture

anonime, quali <div> e <p>, arricchite di valore semantico con l'utilizzo di

attributi quali class e id.

L'HTML5 nasce per risolvere questi problemi, o�rendo agli sviluppatori

Web un linguaggio pronto ad essere plasmato secondo le più recenti necessità,

sia dal lato della strutturazione del contenuto che da quello dello sviluppo di

vere e proprie applicazioni.

L'intento iniziale che ha guidato il gruppo di lavoro è stato quello di

proporre nuovi comandi e funzionalità �no ad allora ottenute in maniera

non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie

dei vari browser. Altro obiettivo è garantire una buona compatibilità con i


browser esistenti, compresi quelli obsoleti o presenti su piattaforme mobili.

Il World Wide Web Consortium ha annunciato che sarà pronto per il

luglio 2014.

1.1.1 Novità

Le principali novità sono le seguenti:

� Regole per la strutturazione del testo in capitoli, paragra� e sezioni

rese più stringenti;

� Introdotti elementi di controllo per i menu di navigazione;

� Migliorati ed estesi gli elementi di controllo per i moduli elettronici;

� Viene supportato il Canvas, che permette di utilizzare JavaScript per

creare animazioni e gra�ca bitmap;

� Introdotti elementi speci�ci per il controllo di contenuti multimediali

(tag <video> e <audio>);

� Deprecati o eliminati alcuni elementi che hanno dimostrato scarso o

nessun utilizzo e�ettivo;

� Estesi a tutti i tag una serie di attributi, specialmente quelli �nalizzati

all'accessibilità, �nora previsti solo per alcuni tag: per ogni tag HTML

possiamo speci�care degli attributi che ci permettono di de�nire gli

oggetti semantici (microdati);

� Introduzione della geolocalizzazione, dovuta ad una forte espansione di

sistemi operativi mobili (quali Android e iOS, tra i più di�usi);


� Sistema alternativo ai normali cookie, chiamato Web Storage, più e�-

ciente, che consente un notevole risparmio di banda;

� Standardizzazione di programmi JavaScript, chiamati Web Workers e

possibilitá di utilizzare alcuni siti o�ine: tramite un'applicazione de-

nominata O�ine Web applications sarà possibile, sfruttando la cache

in locale di continuare ad operare su un sito anche se la rete è momen-

taneamente assente;

� Sostituzione del lungo e complesso doctype, con un semplice <!DOC-

TYPE html>, che velocizza i browser e il caricamento delle pagine.

� Sostituiti i tag di HTML4 in altri più semantici e validi, che aiutano

i motori di ricerca a comprendere meglio l'importanza del contenuto e

delle varie sezioni di un sito.

Le novità introdotte sono �nalizzate soprattutto a migliorare il disaccop-

piamento tra struttura, de�nita dal markup, caratteristiche di resa, de�nite

dalle direttive di stile, e contenuti di una pagina Web, de�niti dal testo vero

e proprio. Inoltre l'HTML5 prevede il supporto per la memorizzazione locale

di grosse quantità di dati scaricati dal browser, per consentire l'utilizzo di

applicazioni basate su Web anche in assenza di collegamento a Internet.

Come si vede nella �gura 1.1, con l'HTML4 per strutturare il sito è nec-

cessario utlizzare i blocchi <div> associati ai comandi per richiamare il CSS.

Con l'HTML5, invece, sono stati elimati i tag <div> e introdotti i nuovi

elementi caratterizzati solo dal nome del blocco che va a completare la strut-

tura del layout. L'HTML5 permette di creare sottosezioni anche dell'header

e del footer. In Appendice B vengono riportate delle tabelle che sintetizzano

il supporto sui principali browser dei nuovi tag, attributi e API HTML5.


Figura 1.1: HTML4 e HTML5: struttura a confronto

Capitolo 2

Strumenti e Tecnologie

Per realizzare il presente lavoro è stato utilizzato ilGoogle Web Toolkit,

che ha permesso di sviluppare l'applicazione Web scrivendo solo codice Java.

Il suo apposito compilatore crea poi codice HTML e JavaScript a partire

da questo. Si è lavorato sullo strumento Canvas, elemento HTML5, che

permette di fare il rendering dinamico di immagini.

2.1 GWT

2.1.1 Introduzione

Per poter apprezzare appieno il potenziale del Google Web Toolkit (GWT)

è necessario comprendere i vari aspetti che ne hanno in�uenzato la nascita.

Già da diverso tempo si sviluppano applicazioni sfruttando le tecnolo-

gie Web, ma negli scorsi anni ci si è dovuti scontrare con alcuni limiti di

questa architettura, in particolare per quanto riguarda l'usabilità �nale del-

l'applicazione e le sue prestazioni, che impedivano di fatto un confronto �ad

armi pari� con sistemi tradizionali client-server, di cui le applicazioni Web

rappresentano una versione avanzata e distribuita.

7

CAPITOLO 2. STRUMENTI E TECNOLOGIE 8

Dato che proprio su questi due aspetti c'erano i maggiori ostacoli, è su

performance e usability che ci si è concentrati per apportare i miglioramenti

più evidenti.

Inizialmente le comunicazioni tra client e server Web erano sostanzial-

mente sincrone: il client doveva recuperare l'intera pagina HTML e ricari-

carla ogni volta. Per la creazione di interfacce complesse che interagissero

velocemente con l'utente, era necessario inviare una discreta quantità di dati

al client. Questo spiega il motivo dei problemi di performance e perchè

questo approccio applicato a sistemi di una certa complessità veniva limita-

to soprattutto alle intranet aziendali, dove c'era a disposizione una banda

su�ciente.

Il transito sulla rete di una grande quantità di dati per la fruizione di una

pagina Web non era invece accettabile su Internet, dove la di�usione della

banda larga non era ancora ai livelli attuali.

Ai problemi di prestazione, si associavano problemi di usabilità non sec-

ondari. Le Rich Internet Application (RIA) sono applicazioni Web che

possiedono caratteristiche e funzionalità di un'applicazione desktop stan-

dalone. Dovendo fare i conti con la performance, era necessario trovare un

punto di equilibrio con la complessità dell'interfaccia: più questa era comp-

lessa, maggiori sarebbero state le ripercussioni su tutto il sistema. Se è vero

che le interfacce non devono necessariamente essere �rich�, è anche vero che

le rich internet interface hanno in molti casi contribuito a creare delle Web

application più utilizzabili e più rispondenti ai �comportamenti naturali� del-

l'utente. Quando le interfacce ricche non potevano essere presenti nelle Web

application, spesso ci si ritrovava in presenza di applicazioni Web di�cilmente


usabili. Inoltre, quando l'utente eseguiva un'operazione, era necessario ricari-

care l'intera pagina con le modi�che causate dall'operazione appena eseguita.

Questo processo (invio dei dati, elaborazione, recupero dei dati dal server,

ricostruzione della nuova pagina) aveva come conseguenza dei ritardi: anche

qui, l'usabilità veniva messa a dura prova poichè l'utente doveva attendere

diversi secondi per avere un feedback; vi era anche la possibilità che potesse

ricevere come risposta, in casi di rallentamenti o congestione della rete, una

pagina completamente bianca.

Le soluzioni sono arrivate sotto diverse forme, ma basate su concetti co-

muni. Il più importante è stato di far sí che il risultato derivante dall'elabo-

razione delle richieste dell'utente andasse a modi�care solo una porzione della

GUI, senza la necessità che ad ogni operazione si dovesse ricaricare l'intera

pagina.

Le forme sotto cui tale soluzione si è presentata sono state inizialmente

rappresentate dalla comparsa di librerie open source come AJAX e dal-

l'avvento sul mercato di prodotti commerciali come Adobe Flex.

Adobe Flex è un prodotto basato su tecnologia �ash che permette di creare

interfacce rich, con la possibilità di e�ettuare richieste a service e manipolare

con questo risultato solo una porzione della GUI. Questo meccanismo ha

migliorato la velocità delle risposte perchè, in tali comunicazioni, transita

un minor numero di dati. La qualità del feedback fornito all'utente diventa

notevolmente migliore e ne bene�cia l'usabilità. Sviluppare Rich Internet

Application utilizzando la piattaforma Flash è oneroso in termini di tempo e

di competenze: Adobe Flex rende automatici i passaggi di programmazione

piú complessi. Il client viene caricato una volta sola, il work�ow è migliorato

rispetto alle vecchie applicazioni HTML che richiedono l'esecuzione di interi

processi per ogni azione. Tecnicamente �ex ha bisogno che su ogni browser


sia installato un �ash player, ormai ampiamente di�uso sulla maggior parte

dei browser.

AJAX è una tecnologia che, tramite JavaScript, permette di e�ettuare

delle chiamate (sincrone o asincrone) a un server. Si inserisce poi la presen-

tazione del risultato dell'elaborazione di queste chiamate all'interno di una

porzione della pagina Web già fruita all'utente. Tutto ciò ha molti aspetti

positivi:

� Si può costruire l'intera GUI Web based in diversi passi asincroni. L'as-

incronia permette di dare un feedback molto più immediato all'utente

in quanto le prime richieste producono immediatamente un risultato

gra�co. Non è più necessario dover attendere tutte le informazioni nec-

essarie alla costruzione dell'intera pagina prima che questa sia costruita:

si procede un passo alla volta.

� Gli eventi sono scatenati da operazioni dell'utente. Dato che alle chia-

mate corrispondono operazioni mirate solo alla realizzazione di quanto

richiesto dall'utente, e dato che come risultato si ha la manipolazione

di una porzione della pagina, viene diminuita la quantità di dati che

transitano sulla rete per singola operazione. Questo porta a una stretta

relazione tra operazione dell'utente e successiva risposta, aumentando

nettamente la velocità percepita di risposta. L'esperienza dell'utente

diventa più diretta e responsiva.

� Gestione dei risultati. Le richieste che vengono e�ettuate tramite AJAX

sono delle normali richieste HTTP. Presentano quindi un codice di sta-

to, che può essere testato con semplicità dalle funzioni JavaScript di

callback. In questo modo, tramite l'interfaccia stessa, è possibile ot-


tenere un feedback signi�cativo, sia in caso di esito positivo sia in caso

di eccezioni.

Alla luce di tutte queste migliorie sulle performance e sull'usabilità che

ha portato AJAX, è diventato abbastanza comune l'uso di interfacce Web

based di tipo �ricco�, più naturali e meno dispendiose.

Tuttavia l'uso di applicazioni Web e l'applicazione di AJAX a queste

Web application ha un difetto non indi�erente: l'aumento della quantità di

codice client-side necessario a tali sistemi. Tale codice diventa ben presto

di�cilmente strutturabile, a manutenzione complicata e poco riusabile.

Un altro aspetto negativo è la necessità di produrre codice JavaScript

e HTML cross browser: con l'a�ermarsi di un numero sempre maggiore

di browser, nei diversi modelli per le diverse piattaforme e con la presen-

za su molti computer di versioni non aggiornate, questo problema diventa

fondamentale.

� Al crescere della complessitá del progetto di applicazione Web, basata

su AJAX, si ha una diminuzione della manutenibilità del sistema, so-

prattutto della sezione client side, e una sempre maggiore di�coltà nel

riuso di tale codice.

� Una notevole porzione del tempo di sviluppo sarà concentrata sulla

compatibilità del codice client side con i diversi browser.

Questi due punti rappresentano la causa scatenante del lavoro che ha portato

alla nascita del Google Web Toolkit, come riporta una citazione tratta dal

gruppo di Google relativamente al suo Web ToolKit: �Oggigiorno, scrivere

applicazioni Web è un processo noioso e soggetto agli errori. Gli sviluppatori

possono arrivare a usare il 90% del tempo dedicato al progetto solo per risol-

vere le incompatibilità con i vari browser. Inoltre, la creazione, il riuso e la


manutenzione di grandi quantità di codice JavaScript e di componenti AJAX

può risultare operazione di�cile e con molte fragilità�

2.1.2 Google Web Toolkit

GWT è un framework di sviluppo Java con il quale è possibile scrivere

applicazioni AJAX tanto complesse quanto veloci, mantenendo allo stesso

tempo una fortissima compatibilità verso gli standard Web.

Permette di sviluppare un'applicazione Web scrivendo solo codice Java,

anche per la parte client, utilizzando soluzioni AJAX. Sarà poi il suo appos-

ito compilatore a creare codice HTML e JavaScript per quella porzione di

progetto identi�cata come client.

Questo pone rimedio ai due problemi delle applicazioni Web basate su

AJAX: sviluppando in Java si hanno a disposizioni tutti i concetti pro-

pri di questa tecnologia per la strutturazione del codice, per la riusabilità

e per la sua manutenibilità. Inoltre il codice generato dalla compilazione

Java2Javascript di GWT è compatibile con tutti i browser.

2.1.3 Con�gurazione dell'Ambiente di Sviluppo

L'ambiente di sviluppo facilita e fornisce il supporto necessario allo svilup-

po di applicazioni Web che sfruttano GWT.

Il primo passo consiste nello scaricare l'IDE Eclipse. Esistono vari pac-

chetti, ma quello più utile in questo contesto è �Eclipse IDE for Java JEE De-

velopers�. All'avvio di Eclipse dobbiamo scegliere dove salvare il workspace,

ovvero in quale directory del PC rendere persistente l'ambiente di lavoro.

Avviato Eclipse, accediamo al menu [Help -> Install New Software]. Bisogna

aggiungere un nuovo sito Web tramite il tasto Add. L'URL da aggiuingere

varia a seconda della versione di Eclipse installata:


� Eclipse 3.6 (Helios) - http://dl.google.com/eclipse/plugin/3.6

� Eclipse 3.5 (Galileo) - http://dl.google.com/eclipse/plugin/3.5

� Eclipse 3.4 (Ganymede) - http://dl.google.com/eclipse/plugin/3.4

� Eclipse 3.3 (Europa) - http://dl.google.com/eclipse/plugin/3.3

Selezioniamo sia la voce Plugin che SDK. Accettiamo la licenza e riavvi-

amo l'IDE quando l'installazione sarà completata.

Figura 2.1: Installazione del plugin GWT


2.2 Canvas

Tra le tante novità di HTML5, una delle più interessanti è sicuramente la

possibilità di inserire gra�ca vettoriale all'interno delle proprie pagine Web.

Originariamente introdotto da Apple come componente aggiuntivo del frame-

work WebKit, il Canvas permette di disegnare gra�ca 2D e 3D con JavaScript

in una regione prede�nita della pagina HTML.

Trattandosi di un API a basso livello, richiede una gestione manuale di

tutte le interattività. È stato creato principalmente per avere una super�cie

dove disegnare in breve tempo bitmap; inoltre può essere utilizzato per creare

animazioni o giochi anche complessi compatibili con qualunque browser o

dispositivo mobile che lo supporta.

Gli unici due attributi disponibili, oltre ai canonici globali, sono width

e height, rispettivamente larghezza e altezza dell'elemento. Sotto il pro�lo

JavaScript, un metodo disponibile direttamente è getContext, vera e propria

porta verso le API di disegno. Quando invocato, ritorna un oggetto detto

contesto del disegno. Si possono dividere le funzionalità in esso racchiuse

in categorie: path, modi�catori, immagine, testo e pixel per pixel.

L'insieme dei valori memorizzati in un contesto viene detto drawing state.

� Il concetto principe è il path, un insieme di punti uniti fra loro da

de�nite primitive geometriche (arco, linea,...), dette subpath. Ogni con-

testo possiede solamente un path attivo per volta. Per aggiungere un

subpath al path attivo si possono utilizzare metodi come lineTo, arcTo,

rect e altri. Metodi come stroke e �ll vengono applicati a tutti i sub-

path del path attivo. Per resettare il path attivo, rimuovendo quindi

tutti i subpath non ancora disegnati, si utilizza l'istruzione beginPath().


� Modi�catori: Le funzioni all'interno di questo gruppo insistono sul

drawing state di un Canvas, modi�cando il modo in cui i path, le immag-

ini e i testi vengono disegnati. Nella categoria si annoverano matrici

di trasformazione (scale, rotate, translate), gestione della trasparenza

globale e delle funzioni di composizione nonché impostazioni di colore,

di linea e di gradiente.

Con strokeStyle e �llStyle possiamo impostare le nostre preferenze su

come intendiamo debba essere disegnata la linea di contorno degli ogget-

ti (stroke) ed il loro riempimento (�ll). Entrambi gli attributi possono

essere valorizzati con stringhe, oggetti di tipo gradient ed oggetti di

tipo pattern.

� L'unico metodo appartenente al gruppo immagine si chiama drawIm-

age ed è disponibile in un certo numero di varianti; il primo argomento

può infatti essere sia un elemento immagine, sia un altro Canvas, sia

un elemento di tipo video. Il risultato dell'operazione è sempre quello

di disegnare sul contesto invocante l'immagine prescelta, rispettando

alcuni parametri dimensionali opzionali.

� Testo: questi metodi permettono di scrivere porzioni di testo all'in-

terno di un Canvas. L'attributo font può essere valorizzato allo stesso

modo del suo omonimo su CSS; �llText provvede a scrivere il testo

desiderato partendo dalla posizione x, y speci�cata come secondo e

terzo argomento; anche strokeText si comporta in modo simile.

� Pixel per Pixel: il canvas non è altro che una matrice di valori in

formato RGBA, è quindi possibile insistere su ogni singolo e speci�co

pixel. Le due funzioni getImageData e putImageData rispettivamente

prelevano e stampano sul canvas una porzione di immagine delineata


dagli argomenti passati. Tale porzione, un oggetto di classe ImageData,

possiede in una sua proprietà (data) un lunghissimo array contenente

le componenti RGBA di ogni pixel.

Concludendo, creare animazioni, 3D, e�etti e editing sulle immagini sen-

za Flash, sembravano essere tutte cose impensabili prima di HTML5. Og-

gi invece tramite il nuovo elemento Canvas è possibile. Si tratta di un

importantissimo standard, che potrebbe sostituire il Flash già da subito.

2.2.1 Canvas con GWT

La prima cosa è controllare se il browser supporta l'elemento Canvas o

meno. A questo punto si imposta altezza e larghezza del Canvas e lo si

collega al RootPanel (contenitore dinamico dell'applicazione, è in cima alla

gerarchia dei contenitori GWT). Si prende poi il contesto 2D dal Canvas

(canvas.getContext2d()).

public class GWTCanvasResize implements EntryPoint {

Canvas canvas ;

Context2d context ;

HTMLPanel panel ;

static final String id = " c on t e n t h o l d e r " ;

//Entry po in t

public void onModuleLoad ( ) {

panel = new HTMLPanel ( "<d i v c l a s s =\"con t en t \" i d=\"" + id + "\"></←↩

d iv>" ) ;

panel . setStyleName ( " con t en tHo l d e r " ) ;

Window . addResizeHandler (new ResizeHandler ( ) {


// @Override

public void onResize (ResizeEvent event ) {

Canvas (event . getWidth ( ) , event . getHeight ( ) ) ;

}

}) ;

Canvas (Window . getClientWidth ( ) , Window . getClientHeight ( ) ) ;

RootPanel . get ( ) . setStyleName ( "body" ) ;

RootPanel . get ( ) . add (panel ) ;

}

. . .

private void Canvas ( int width , int height ) {

panel . clear ( ) ;

canvas = null ;

canvas = Canvas . createIfSupported ( ) ;

i f (canvas == null ) {

RootPanel . get ( ) . add (new Label ( " Sorry , your b rowse r doesn ' t ←↩

suppo r t the HTML5 Canvas e l ement " ) ) ; return ; }

canvas . setStyleName ( "mainCanvas " ) ;

panel . add (canvas , id ) ;

canvas . setWidth (width + "px" ) ;

canvas . setCoordinateSpaceWidth (width ) ;

canvas . setHeight (height + "px" ) ;

canvas . setCoordinateSpaceHeight (height ) ;

context = canvas . getContext2d ( ) ;

. . .

}

. . .

}

Capitolo 3

Curve e Super�ci di Bézier

3.1 Curve di Bezier

3.1.1 Contesto storico

Pierre Bézier, un matematico francese che lavorava presso la Renault, tra

gli anni '50 e '60 inventò le cossidette curve di Bézier, con lo scopo di ideare

una modellazione di linee e super�ci matematicamente rigorosa, controllabile

e facilmente traducibile in operazioni macchina (catene di montaggio) nel

campo della progettazione automobilistica. In altre parole progettò un modo

semplice di creare e levigare le curve dell'auto, per renderla meno spigolosa

e adatta alle idee e agli standard che si erano imposti nella casa della Renault.

L'idea è di de�nire una curva a partire da un numero �nito di punti nel-

lo spazio, chiamati punti di controllo, in modo che essa segua l'andamento

del poligono di controllo individuato da questi punti. Dato che la curva è

completamente contenuta nell'inviluppo convesso dei suoi punti di control-

lo, i punti possono essere visualizzati gra�camente ed usati per manipolare

18

CAPITOLO 3. CURVE E SUPERFICI DI BÉZIER 19

Figura 3.1: 1950 - Brochure di una Renault Berlina a 4 porte

la curva stessa. Trasformazioni geomentriche come traslazione, scalatura e

rotazione possono essere applicate alla curva applicando le rispettive tasfor-

mazioni sui punti di controllo della curva.

Il successo di tale scoperta è tale che ancora oggi le curve di Bézier risultano

molto importanti nel campo della gra�ca computazionale e nella modelliz-

zazione geometrica e sono i fondamenti dei sistemi CAD/CAM. Oltre a ciò

le curve di Bézier sono comunemente usate per disegnare loghi e caratteri,

ampiamente usate nell'animazione, sia come percorsi lungo cui spostare ogget-

ti sia per cambiare le proprietà degli oggetti in funzione del tempo.

Le curve di Bézier possono essere realizzate da molti programmi di gra�-

ca vettoriale come Inkscape, Gimp, Corel Draw, Adobe Illustrator, Adobe

Photoshop o FreeHand, o di cartogra�a piana come OCAD.

Lo strumento �Curve di Bezier� è uno dei più utili e potenti per de�nire

tracciati da usare come elementi vettoriali di disegno oppure per selezionare


forme in maniera precisa, infatti le curve di Bézier sono oggetti vettoriali

che permettono la creazione di linee curve a partire da 2 vertici e da una

serie di punti di controllo che aiutano a stabilirne la forma modi�cando gli

angoli di tangenza. Il risultato è sempre una curva continua senza cuspidi o

interruzioni.

3.1.2 De�nizione nel Piano

Dati n+1 punti P i = (xi, yi) , si de�nisce curva di Beziér di grado n

una curva avente espressione

B (t) =∑n

i=0 P iBi,n (t) , t ∈ [0, 1]

dove P i sono i punti di controllo e Bi,n sono i polinomi di Bernstein di grado

n.

Polinomi di Bernstein: Bi,n (t) = C (n, i)ui (1− u)n−i

Coe�ciente Binomiale: C (n, i) = n!i!(n−i)!

Il poligono formato dalla connessione dei punti di controllo attraverso

delle linee rette, partendo dal punto P 0 e �nendo nel P n, ossia l'inviluppo

convesso dei punti P i, si chiama poligono di Bézier. Questo poligono con-

tiene la curva di Bézier.

In particolare, si de�nisce curva di Bézier lineare la curva di Bézier pas-

sante per due punti:


Figura 3.2: Polinomi di Bernstein al variare di n

B (t) = (1− t)P 0 + tP 1, t ∈ [0, 1]

che corrisponde alla retta passante per i due punti P 0,P 1.

Si de�nisce, invece, curva di Bézier quadratica la curva di Bézier

passante per tre punti:

B (t) = (1− t)2P 0 + 2t (1− t)P 1 + t2P 2, t ∈ [0, 1]

I font TrueType cosi come la gra�ca vettoriale di Adobe Flash usano le

spline di Bézier composte da curve di Bézier quadratiche.

In�ne si de�nisce curva di Bézier cubica la curva di Bézier passante

per quattro punti:

B (t) = (1− t)3P 0 + 3t2 (1− t)P 1 + 3t2 (1− t)P 2 + t3P 3, t ∈ [0, 1]


Figura 3.3: Curva lineare di Bézier

La curva inizia in P 0, procede verso P 1 e termina in P 3 arrivando dalla

direzione di P 2. In generale non passa attraverso P 1 e P 2, infatti questi

punti servono solo per dare un'informazione direzionale.

I moderni sistemi di imaging come PostScript, METAFONT e GIMP us-

ano le spline di Bézier composte da curve di Bézier cubiche per disegnare

forme curve. Anche uno strumento semplice come Paint incluso in Windows

dispone di semplici curve di Bézier cubica.

Generalizzazione

La curva di Bézier di grado n può essere generalizzata come segue. Dati

i punti P 0, P 1,...,P n, la curva di Bézier è:


Figura 3.4: Curva quadratica di Bézier

B (t) =∑n

i=0

(ni

)P i (1− t)n−i ti

= P 0 (1− t)n +(n1

)P 1 (1− t)n−1 t+ · · ·+ P nt

n, t ∈ [0, 1]

I polinomi(ni

)(1− t)n−i ti

sono conosciuti come polinomi di Bernstein di grado n e sono de�niti da

Bi,n (t) :=(ni

)ti (1− t)n−i , i = 0, · · · , n

de�nito 00 = 1.

I punti P i sono chiamati punti di controllo per la curva di Bézier. Il poligono

formato connettendo i punti attraverso linee rette, iniziando da P 0 e �nendo

con P n è l'insieme convesso contenente i punti P i. Questo poligono è chiam-

ato poligono di Bézier, ed esso contiene la curva di Bézier.


Figura 3.5: Curva cubica di Bézier

Figura 3.6: Poligono di controllo: poligonale (aperta o chiusa) i cui vertici sono

(nello stesso ordine) i punti di controllo dati

3.1.3 De�nizione per Induzione

Dati n + 1 punti Pi = (xi, yi), si de�nisce curva di Beziér di grado n

una curva avente espressione

B (t) = P (n)n (t)


Figura 3.7: Inviluppo convesso: poligono (2D) o poliedro (3D) convesso minimale

che contiene tutti i punti di controllo

dove

P(j)i (t) =

(1− t)P (j−1)i−1 (t) + tP

(j−1)i (t) se j > 0

P i altrimenti

dove t ∈ [0, 1].

3.1.4 Proprietà delle curve di Beziér

Le curve di Beziér godono delle seguenti proprietà:

1. Interpolazione ai punti di controllo estremi

La curva passa per il primo e l'ultimo punto del poligono di controllo.

Infatti B0 =∑n

i=0 P iBi,n (0) = P 0 e B1 =∑n

i=0 P iBi,n (1) = P 0.

2. Poligono di controllo tangente alla curva nei punti di controllo

estremi

La tangente nel punto P 0 è parallela al segmento (P 1 − P 0) e la

tangente nel punto P n al segmento (P n − P n−1).


3. Inviluppo convesso

La curva di Bézier è contenuta nell'inviluppo convesso dei vertici P i

del poligono di controllo, per t ∈ [0, 1]. Questa proprietà deriva dal

fatto che la somma delle funzioni base di Bernstein è pari ad 1:∑ni=0Bi,n (t) = 1, t ∈ [0, 1]

e che ogni Bi,n è non negativa nell'intervallo di de�nizione.

L'esempio seguente mette in evidenza tale proprietà considerando una

curva passante per i punti (0, 0), (4, 0), (2, 3), (−2, 3), (−4, 0), (0, 0):

Figura 3.8: Proprietà di inviluppo convesso di Bézier

Se viene cambiato l'ordine dei punti di controllo, cambia la curva ma

non l'inviluppo convesso.

La tangente alla curva di Bézier nel punto P 0 è la retta passante per

P 0P 1, mentre la tangente alla curva nel punto P n è la retta passante


per P n−1P n.

La curva è continua e ha derivate continue di tutti gli ordini.

4. Variation diminishing

Una curva di Bézier interseca un piano in un numero di punti sempre

minore o uguale del numero di intersezioni dello stesso piano con il suo

poligono di controllo.

5. Invarianza per trasformazioni a�ni

Qualsiasi trasformazione lineare o traslazione dei punti di controllo

de�niscono una nuova curva che è la trasformazione lineare o traslazione

della curva originaria.

Sia φ (x) = Ax+ c applicata ad una curva di Bézier, si ha

φ (B (t)) = φ (∑n

i=0 P iBi,n (t)) =∑n

i=0 φ (P i)Bi,n (t) e la curva ri-

mane la stessa con le stesse proprietà. Tuttavia trasformare la curva

è meno e�ciente rispetto a trasformare i punti di controllo. Questa

proprietà è molto utile nel campo della computer graphics.

6. Precisione lineare

Se tutti i punti di controllo formano una linea retta, anche la curva

forma una linea.

Quindi le curve di Bézier sono in grado di riprodurre esattamente le

rette.

7. Pseudo-controllo locale

I punti di una curva di Bézier P (t) che sono maggiormente sensibili

al cambiamento di un vertice P i del poligono di controllo sono nella

regione circostante circostante il punto P (i/n).

Questa proprietà viene illustrata nel seguente esempio: consideriamo

la curva di Bézier de�nita dai punti (4, 3), (1, 1), (3, 0), (2,−2), (0, 1),


(3, 3), (4, 0), (5,−2), (4, 1) e la curva avente rispetto alla prima il punto

P 4 = (1, 1) di�erente. La �gura mostra che in prossimità di P (4/8) si

veri�ca il massimo distanziamento tra le due curve rappresentate:

Figura 3.9: Proprietà di pseudo-controllo locale

8. Degree elevation

Una curva di Bézier di grado n può essere scritta in un'altra di grado

n + 1, sempre con la stessa forma. Questa proprietà è legata a quella

di pseudo-controllo locale; infatti aumentando i punti sul poligono di

controllo, quindi il grado della curva, e spostando un punto, si ha meno

deformazione su tutta la curva restante e si ha più controllo.

9. Simmetria La curva non cambia invertendo l'ordine dei punti di con-

trollo, cioè se ci = bn−i si ha

x̄ (τ) =∑n

i=0 ciBi,n (τ)


che per la proprietà di simmetria dei polinomi di Bernstein diventa

x̄ (τ) =∑n

i=0 bn−iBn−i,n (1− τ).

Ora poniamo k = n− i

x̄ (τ) =∑n

i=0 bkBk,n (τ) = x (1− τ).

Ad esempio, rappresentiamo le curve di Bézier passanti per i punti

(0, 0), (1, 5), (3, 5), (4, 0), (3, 2) e per i punti (3, 2), (4, 0), (3, 5), (1, 5),

(0, 0) rispettivamente. Come si può notare dalla �gura seguente le due

curve coincidono.

Figura 3.10: Proprietà di simmetria delle curve di Bézier

3.1.5 Limiti delle curve di Bézier

Sono richieste curve di ordine elevato per poter soddisfare un elevato

numero di vincoli o per rappresentare accuratamente �gure complesse (una

curva di grado n − 1, è in grado di passare per n punti dati). Le curve di


ordine elevato sono numericamente instabili ed algoritmicamente ine�cienti

da trattare.

Inoltre curve rappresentate con un unico segmento sono di�cili da modi�-

care in maniera interattiva, infatti per loro stessa natura i cambiamenti non

possono esser locali: un cambiamento in un punto modi�ca la forma di tutta

la curva.

Per questi motivi sono state studiate delle generalizzazioni che hanno lo

scopo di porre rimedio ai limiti di tale rappresentazione e di estendere la

trattazione di curve a casi più generali.

Tali curve sono le NURBS (Non Uniform Rational B-Splines); esse si basano

sulle basi B-Spline, che sono delle generalizzazioni della base di Bernstein. At-

traverso le NURBS è possibile costruire curve e super�ci che sono polinomiali

a tratti raccordate con un certo grado di continuità, non necessariamente lo

stesso in tutti i punti.

Fondamentalmente, se con le curve di Bézier quando c'è la necessità di rac-

cordare curve, si devono fare i conti su come deve esser costruito il poliedro

di controllo, con le NURBS, basta scegliere la base opportuna che abbia il

giusto grado di continuità nei punti in cui serve.

Questo è il grandissimo vantaggio, che sempli�ca di molto la gestione di curve

e di con�gurazioni geometriche complesse.

3.2 Super�ci di Bézier

Le super�ci di Bézier sono uno strumento molto potente per la proget-

tazione di super�ci, quindi ampiamente utilizzate nella computer graphics

assieme alle curve di Bézier.


L'idea che sta alla base della teoria di Bézier è di de�nire una super�cie a

partire da un numero �nito di punti P 0, P 1, ... , P n nello spazio, in modo

che il suo supporto segua l'andamento del poliedro, detto poliedro di con-

trollo individuato da questi.

3.2.1 De�nizione nello Spazio

Una super�cie di Bézier è de�nita dalla rappresentazione parametrica:

P (u, v) =∑m

i=0

∑nj=0P i,jBi,m (u)Bj,n (v), u, v ∈ [0, 1]

dove P i,j sono i vertici del poliedro caratteristico (detto poliedro di con-

trollo) e formano una matrice (m+1)x(n+1)

Bi,m (u) e Bj,n (v) sono le funzioni base di Bernstein.

Bi,m (u) = C (m, i)ui (1− u)m−i, i = 0, · · · ,m

C (m, i) = m!i!(m−i)! coe�ciente Binomiale

Bj,n (v) = C (n, j) vj (1− v)n−j, j = 0, · · · , n

C (n, j) = n!j!(n−j)! coe�ciente Binomiale


3.2.2 De�nizione matriciale

La de�nizione analitica può essere resa in forma matriciale, ossia

P (u, v) = Bb (u)P b (Bb (v))T

dove Bb (u) e Bb (v) sono i vettori delle funzioni base di Bernstein e P b

è la matrice tridimensionale dei punti di controllo.

In particolare si de�nisce super�cie bilineare di Bézier la super�cie

avente come matrice tridimensionale dei punti di controllo una matrice 2 x

2, cioè

P (u, v) = [B0 (u)B1 (u)]

P 0,0 P 0,1

P 1,0 P 1,1

B0 (v)

B1 (v)

Ad esempio consideriamo la seguente matrice dei punti di controllo:

P 0,0 P 0,1

P 1,0 P 1,1

=

(0, 0, 1) (0, 1, 2)

(3, 2, 5) (6, 3, 1)

la super�cie di Bézier è rappresentata nella �gura 3.11.

Si de�nisce, invece, super�cie biquadratica di Bézier la super�cie

avente come matrice tridimensionale dei punti di controllo una matrice 3 x

3, cioè

P (u, v) = [B0 (u)B1 (u)B2 (u)]

P 0,0 P 0,1 P 0,2

P 1,0 P 1,1 P 1,2

P 2,0 P 2,1 P 2,2

B0 (v)

B1 (v)

B2 (v)



Figura 3.11: Super�cie bilineare di Bézier

P 0,0 P 0,1 P 0,2

P 1,0 P 1,1 P 1,2

P 2,0 P 2,1 P 2,2

=

(0, 0, 1) (0, 1, 2) (0, 2, 1)

(1, 0, 2) (1, 1, 3) (1, 2, 2)

(2, 0, 1) (2, 1, 2) (2, 2, 1)


In�ne si de�nisce super�cie bicubica di Bézier la super�cie avente

come matrice tridimensionale dei punti di controllo una matrice 4 x 4, cioè

P (u, v) = [B0 (u)B1 (u)B2 (u)B3 (u)]

P 0,0 P 0,1 P 0,2 P 0,3

P 1,0 P 1,1 P 1,2 P 1,3

P 2,0 P 2,1 P 2,2 P 2,3

P 3,0 P 3,1 P 3,2 P 3,3

B0 (v)

B1 (v)

B2 (v)

B3 (v)

In particolare, per la super�cie bicubica di Bézier, abbiamo che:

P (u, v) = B1,3 (u)PBT1,3 (v)


Figura 3.12: Super�cie biquadratica di Bézier

dove:

P =

P 0,0 P 0,1 P 0,2 P 0,3

P 1,0 P 1,1 P 1,2 P 1,3

P 2,0 P 2,1 P 2,2 P 2,3

P 3,0 P 3,1 P 3,2 P 3,3

B1,3 (u) =

[(1− u)3 3u (1− u)2 3u2 (1− u) u3

]

BT1,3 (v) =

(1− v)3

3v (1− v)2

3v2 (1− v)

v3

P (u, v) =


[u3 u2 u 1

]−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0

P 0,0 P 0,1 P 0,2 P 0,3

P 1,0 P 1,1 P 1,2 P 1,3

P 2,0 P 2,1 P 2,2 P 2,3

P 3,0 P 3,1 P 3,2 P 3,3

−1 3 −3 1

3 −6 3 0

−3 3 0 0

1 0 0 0

v3

v2

v

1

P (u, v) = UB3PBT3V

T , B3 e BT3 matrici di Beziér


P 0,0 P 0,1 P 0,2 P 0,3

P 1,0 P 1,1 P 1,2 P 1,3

P 2,0 P 2,1 P 2,2 P 2,3

P 3,0 P 3,1 P 3,2 P 3,3

=

(0, 0, 1) (0, 1, 2) (0, 2, 1) (0, 3, 3)

(1, 0, 2) (1, 1, 3) (1, 2, 2) (1, 3, 4)

(2, 0, 1) (2, 1, 2) (2, 2, 1) (1, 3, 5)

(3, 0, 3) (3, 1, 4) (3, 2, 5) (3, 3, 5)


3.2.3 Proprietà delle super�ci di Bézier

Le super�ci di Bézier godono di alcune proprietà che derivano da quelle dei

polinomi di Bernstein usati per costruire le super�ci stesse e dalle proprietà

delle curve di Bézier, in quanto le super�ci non sono altro che un'estensione

delle curve di Bézier.

1. Interpolazione ai punti di controllo estremi

La super�cie passa per i 4 punti agli angoli del poliedro di controllo.

2. Condizioni di tangenza

Le 4 curve sui bordi della super�cie sono tangenti al primo e ultimo


Figura 3.13: Super�cie bicubica di Bézier

segmento di ciascun poligono di controllo per ciascuna curva, nel primo

ed ultimo punto di controllo. La normale alla super�cie per ciascun

vertice può esser calcolata tramite il prodotto vettoriale delle tangenti.

3. Inviluppo convesso

La super�cie di Bézier è contenuta nell'inviluppo convesso del suo

poliedro di controllo per 0 ≤ u ≤ 1 e 0 ≤ v ≤ 1.

Questo deriva dal fatto che P (u, v) è una combinazione lineare di tutti i

suoi punti di controllo e che gode della proprietà di partizione dell'unità.

4. Invarianza per trasformazioni a�ni

Qualsiasi trasformazione a�ne del poliedro di controllo de�nisce una

nuova super�cie che è la trasformazione a�ne della super�cie originale.

5. Precisione planare

Se tutti i punti del poliedro di controllo giacciono in un piano, la super-


�cie giace nello stesso piano. Se tutti i punti del poliedro di controllo

formano una linea retta, la super�cie si riduce ad una linea retta.

6. Partizione dell'unità

Il prodotto di due quantità unitarie è unitario.∑mi=0

∑nj=0 Bi,m (u)Bj,n (v) =

∑mi=0 Bi,m (u)

∑nj=0 Bj,n (v) = 1

con 0 ≤ i ≤ m e 0 ≤ j ≤ n , u, v ∈ [0, 1]

Figura 3.14: Patch parametrico: super�cie complessa vista come unione di patch

su domini parametrici rettangolari

3.2.4 Limiti delle super�ci di Bézier

Le super�ci di Bézier hanno alcune limitazioni:

� Non si possono rappresentare sfere o calotte sferiche, nè super�ci di

rotazione.


� Le super�ci di Bézier non ammettono controllo locale, pertanto la vari-

azione di un solo punto del poliedro di controllo porta ad un rilevante

cambiamento di tutta la super�cie.

� Per rappresentare forme complesse, usando una sola super�cie, sono

necessari molti punti di controllo. Questo signi�ca che il grado dei

polinomi usati nella rappresentazione di Bézier può diventare molto

alto e quindi di�cile da trattare al calcolatore.

Queste limitazioni non risultano così svantaggiose, dato che ci sono dei

metodi per raggirarle. Ad esempio, nella rappresentazione di forme comp-

lesse, incollando più super�ci di grado minore secondo condizioni di conti-

nuità, la cui elaborazione risulta però meno comlessa. Infatti le super�ci di

Bézier, assieme alle curve di Bézier, sono uno strumento fondamentale per

la rappresentazione gra�ca e per la modellistica perchè la loro semplicità di

implementazione e la facilità con cui possono essere manipolate superano di

gran lunga i loro lievi difetti.

3.3 Algoritmo di De Casteljau

Nato nel 1930 a Besançon, Francia, Paul De Casteljau ha lavorato come

�sico e matematico alla Citroën, dove nel 1959 ha sviluppato un algoritmo

per il calcolo dei valori delle curve di Bézier. L'algoritmo ricorsivo di De

Casteljau è tuttora il metodo più robusto e numericamente stabile per la

valutazione di polinomi, anche se più lento rispetto a metodi come quello di

Horner.

Storicamente con questo algoritmo iniziò il lavoro sul CAGD (Computer

Aided Geometric Design) di de Casteljau, nel 1959.


3.3.1 Algoritmo di De Casteljau per curve di Bézier

Concettualmente l'algoritmo di basa sull'applicazione ricorsiva della pro-

prietà per cui un polinomio di Benrstein di grado n può essere rappresentato

in funzione di una combinazione lineare di polinomi di Benrstein di grado

n− 1.

Si può dimostrare che tale processo ricorsivo applicato a t �ssato porta alla

valutazione della curva di Bézier nel punto.

L'algoritmo di de Casteljau permette di costruire la curva di Bézier associ-

ata al vettore di punti di controllo assegnato procedendo mediante successive

combinazioni convesse dei punti stessi:

detti b0, b1,...bn i punti di controllo

posto b0i = bi si ha:

bri = (1− t) br−1i (t) + tbr−1i+1 (t) con r = 1,..., n i = 0,..., n− r t ∈ R

Il punto della curva di Bézier corrispondente al parametro t assegnato è bn0 (t).

In particolare, dato che si vuole ottenere una curva di Bézier compresa tra il

primo punto di controllo e l'ultimo, si farà in modo che 0 ≤ t ≤ 1.

Figura 3.15: Coe�cienti intermedi bri (t) secondo lo schema di de Casteljau. Si no-

ta che durante l'elaborazione è possibile usare un vettore colonna per memorizzare

i punti mano a mano che vengono calcolati: ogni elemento, per essere calcolato, ha

bisogno solo del valore corrente e del valore dell'elemento successivo.

Come si vede dalla de�nizione ricorsiva, una curva di Bézier di grado n


valutata in un punto ha lo stesso valore di una curva di Bézier di grado n− 1

valutata nello stesso punto ma con dei pesi modi�cati.

Figura 3.16: Costruzione delle curve di Bézier.

La complessità di questo algoritmo è O (n2) per ogni punto della curva,

dato che vi sono due cicli innestati sul vettore dei punti di controllo che viene

passato in ingresso.

L'algoritmo si presenta:

� Stabile: i coe�cienti 1− t e t sono compresi tra 0 e 1 e quindi non c'è

ampli�cazione dell'errore.

� Ricorsivo: viene applicata la stessa formula per ogni passaggio.


Figura 3.17: Schema di funzionamento dell'algoritmo di DeCasteljau.

Nella �gura 3.17 si vedono i passi fatti per ottenere il punto sulla curva

(P 30 nell'immagine in alto, P 5

0 in quella sottostante). Si è partiti da 4 punti di

controllo: P 00,P

01,P

02,P

03. Analizziamo passo passo come si arriva a trovare

il punto sulla curva di Bézier per la �gura in alto.


Inizialmente, si calcola il punto corrispondente a t (in questo esempio

t = 0.5) su P 00P

01, P

01P

02, P

02P

03:

P 10 = (1− t)P 0

0 + tP 01

P 11 = (1− t)P 0

1 + tP 02

P 12 = (1− t)P 0

2 + tP 03

In seguito si calcola il punto corrispondente a t su P 10P

11, P

11P

12:

P 20 = (1− t)P 1

0 + tP 11

P 21 = (1− t)P 1

1 + tP 12

In�ne, si calcola il punto corrispondente a t su P 20P

21:

P 30 = (1− t)P 2

0 + tP 21

che è il punto sulla curva cercato.

3.3.2 Algoritmo di De Casteljau per super�ci di Bézier

L'algoritmo di de Casteljau può essere esteso per calcolare anche le su-

per�ci di Bézier. Più precisamente l'algoritmo può essere applicato diverse

volte �nchè non si ottiene il punto corrispondente sulla super�cie di Bézier

P (u, v) dato (u, v).

P (u, v) =∑m

i=0Bm,i (u)[∑n

j=0 Bn,j (v) pi,j

]


Invece di calcolare la super�cie e�ettuando le operazioni in cascata, por-

remo: qi (v) =∑n

j=0Bn,j (v) pi,j

qi (v) è un punto sulla curva di Bézier de�nita dai punti di controllo

pi,0, pi,1,...pi,n.

A questo punto utilizzando l'algoritmo di De Casteljau, calcoliamo qi per

ogni i:

che rappresenta la prima riga (contraddistinta dalle (*) ) presa in esame

nel poligono di controllo.

E così �no ad i = n.

Si ottiene, quindi: P (u, v) =∑

Bm,i (u) qi (v)

Possiamo nuovamente utilizzare l'algoritmo di De Casteljau, poichè si ot-

tiene una curva de�nita sui nuovi punti di controllo.

Per calcolare un punto P (u, v) sulla super�cie di Bézier, possiamo deter-

minare m+ 1 punti q0 (v) , q1 (v) ,..., qm (v) e da questi calcolare poi P (u, v).


Figura 3.18: Costruzione delle super�ci di Bézier.

Il costo computazione dell'algoritmo è dell'ordine di O (n3).

Capitolo 4

Sperimentazione del Canvas

HTML5 mediante GWT

Utilizzando il Google Web Toolkit è stata realizzata un'applicazione AJAX

per la visualizzazione di super�ci di Bézier in una pagina Web. Più nello

speci�co, è stato usato l'elemento Canvas dell'HTML5. Il Canvas consiste

in una regione disegnabile, de�nita in codice HTML con gli attributi height

and width. Il codice JavaScript può accedere all'area con un set completo

di funzioni per il disegno, simili a quelle comuni ad altre API 2D, permet-

tendo così la generazione dinamica di disegni. Alcuni usi possibili di Canvas

includono i gra�ci, l'animazione e la composizione di immagini.

In queso progetto il Canvas è stato usato per disegnare 32 super�ci di

Bézier, che formano l'immagine di una Teiera.

45

CAPITOLO 4. SPERIMENTAZIONE DEL CANVAS HTML5MEDIANTEGWT46

4.1 Struttura

In questa sezione viene analizzata la struttura del progetto, che si articola

in 6 classi. L'entry point class GWT è la classe GWTCanvasResize, che fa

tutte le operazioni necessarie per far partire il programma lato client.

4.1.1 Classi

� GWTCanvasResize.java

� Castel.java

� vertex.java

� quad.java

� ptoMedio.java

� Phong.java

La Teapot è composta da 32 super�ci di Bézier, ciascuna delle quali è

ottenuta tramite una matrice di 16 punti di controllo, ognuno di tipo vertex.

La classe vertex memorizza i punti di R3 in coordinate cartesiane: con-

tiene le coordinate 3D x,y e z, che vengono mappate in coordinate 2D, grazie

al metodo public double [][] from3dTo2d(vertex c). Ha inoltre un metodo per

ordinare un array bidimensionale di double, dall'elemento maggiore a quello

minore (utilizzato per il Back Face Culling, si veda sezione 4.2).

La classe quad contiene al suo interno come attributi 4 oggetti vertex e

3 int (RGB). Il metodo drawQuad disegna sul Canvas il quad che gli viene

passato come parametro, richiamando from3dTo2d(vertex c) su x,y,z di ogni


vertice del quad. La classe quad de�nisce inoltre un punto di vista c di

coordinate (width/2, 0,−width/4), passato alla funzione from3dTo2d(vertex

c) e un vertex l di coordinate (0, 0, 0). Quest'ultimo punto rappresenta la

sorgente luminosa. I vertex c ed l vengono utilizzati per trovare i vettori V

e L, che servono per determinare il colore di ogni quad.

public static void drawQuad (quad sortedAllQuad , int width , int height , Canvas←↩

canvas , Context2d quadContext ) {

//SORGENTE LUMINOSA l

vertex l= new vertex ( 0 , 0 , 0 ) ;

// PUNTO DI VISTA c

vertex c= new vertex (width/2 ,0 ,−width/4) ;

//PUNTO DI MEZZO

vertex vm=ptoMedio . findM (sortedAllQuad . v1 , sortedAllQuad . v2 , ←↩

sortedAllQuad . v3 , sortedAllQuad . v4 ) ;

rotateX (sortedAllQuad . v1 , radians , width , height ) ;




rotateY (sortedAllQuad . v1 , radians , width , height ) ;




rotateZ (sortedAllQuad . v1 , radians , width , height ) ;




double [ ] [ ] v1_2D = sortedAllQuad . v1 . from3dTo2d (c ) ;

double v1_2D_x=v1_2D [ 0 ] [ 0 ] ;

double v1_2D_y=v1_2D [ 0 ] [ 1 ] ;


double v2_2D_x=v2_2D [ 0 ] [ 0 ] ;

double v2_2D_y=v2_2D [ 0 ] [ 1 ] ;


double v3_2D_x=v3_2D [ 0 ] [ 0 ] ;


double v3_2D_y=v3_2D [ 0 ] [ 1 ] ;


double v4_2D_x=v4_2D [ 0 ] [ 0 ] ;

double v4_2D_y=v4_2D [ 0 ] [ 1 ] ;

vertex V21=new vertex (sortedAllQuad . v2 . x−sortedAllQuad . v1 . x ,←↩

sortedAllQuad . v2 . y−sortedAllQuad . v1 . y , sortedAllQuad . v2 . z−←↩

sortedAllQuad . v1 . z ) ;

vertex V41=new vertex (sortedAllQuad . v4 . x−sortedAllQuad . v1 . x ,←↩

sortedAllQuad . v4 . y−sortedAllQuad . v1 . y , sortedAllQuad . v4 . z−←↩

sortedAllQuad . v1 . z ) ;

vertex V21V41= new vertex (V21 . y*V41 . z−V21 . z*V41 . y , −V21 . x*V41 . z+V21 . z*←↩

V41 . x , V21 . x*V41 . y−V21 . y*V41 . x ) ; // v e t t o r e normale ' lungo '

double norma2= Math . sqrt (Math . pow (V21V41 . x , 2)+Math . pow (V21V41 . y , 2)+←↩

Math . pow (V21V41 . z , 2) ) ;

vertex M=new vertex (V21V41 . x/norma2 , V21V41 . y/norma2 , V21V41 . z/norma2 ) ;

i f (norma2==0) {

M . x=0;

M . y=0;

M . z=0;

}

// ve r t e x L

vertex l_vm=new vertex (l . x−vm . x , l . y−vm . y , l . z−vm . z ) ;

double normaL= Math . sqrt (Math . pow (l_vm . x , 2)+Math . pow (l_vm . y , 2)+Math .←↩

pow (l_vm . z , 2) ) ;

vertex L=new vertex (l_vm . x/normaL , l_vm . y/normaL , l_vm . z/normaL ) ;

// ve r t e x V

vertex c_vm=new vertex (c . x−vm . x , c . y−vm . y , c . z−vm . z ) ;

double normaV= Math . sqrt (Math . pow (c_vm . x , 2)+Math . pow (c_vm . y , 2)+Math .←↩

pow (c_vm . z , 2) ) ;

vertex V=new vertex (c_vm . x/normaV , c_vm . y/normaV , c_vm . z/normaV ) ;

double alfa=Phong . PhongValue (V , L , vm , M ) ;

int RedColor =( int ) (0*alfa ) ;

int GreenColor = ( int ) (255*alfa ) ;

int BlueColor = ( int ) (0*alfa ) ;


// clamping : se GreenColor eccede i l l im i t e massimo l o s i pone uguale a←↩

ques to .

i f (GreenColor>255){

System .out . println ( "GreenColor >255: "+GreenColor ) ;

GreenColor=255;

}

i f (GreenColor<0)

GreenColor=0;

CssColor randomColor = CssColor . make ( " rgb ( " + RedColor + " , " + ←↩

GreenColor + " , " + BlueColor + " ) " ) ;

quadContext . setFillStyle (randomColor ) ;

quadContext . beginPath ( ) ;

quadContext . moveTo (v1_2D_x , v1_2D_y ) ;

quadContext . lineTo (v2_2D_x , v2_2D_y ) ;




quadContext . stroke ( ) ;

quadContext . fill ( ) ;

}

La classe quad contiene inoltre al suo interno i metodi rotateX, rotateY,

rotateZ, che applicano una rotazione (rispettivamente sugli assi x, y e z) di

tutti i vertex di ogni quad. La �gura appare quindi ruotata di radians gradi.

public static void rotateX (vertex v , double radians , int w , int h ) {

// t r a s l o n e l l ' o r i g i n e

v . x = v . x−w/2 ;

v . y=v . y−h/2 ;

// ruoto

v . y = (v . y * Math . cos (radians ) ) + (v . z * Math . sin (radians ) * −1.0) ;

v . z = (v . y * Math . sin (radians ) ) + (v . z * Math . cos (radians ) ) ;

// r i t r a s l o ne l punto

v . x = v . x+w/2 ;

v . y=v . y+h/2 ;

}


public static void rotateY (vertex v , double radians , int w , int h ) {


v . x = v . x−w/2 ;

v . y=v . y−h/2 ;

// ruoto

v . x = (v . x * Math . cos (radians ) ) + (v . z * Math . sin (radians ) * −1.0) ;

v . z = (v . x * Math . sin (radians ) ) + (v . z * Math . cos (radians ) ) ;


v . x = v . x+w/2 ;

v . y=v . y+h/2 ;

}

public static void rotateZ (vertex v , double radians , int w , int h ) {


v . x = v . x−w/2 ;

v . y=v . y−h/2 ;

// ruoto

v . x = (v . x * Math . cos (radians ) ) + (v . y * Math . sin (radians ) * −1.0) ;

v . y = (v . x * Math . sin (radians ) ) + (v . y * Math . cos (radians ) ) ;


v . x = v . x+w/2 ;

v . y=v . y+h/2 ;

}

La classePhong contiene il metodo public static double PhongValue(vertex

V,vertex L,vertex vm,vertex M) che calcola il coe�ciente col quale moltipli-

care le componenti RGB di ogni quad. Il calcolo viene fatto in base alla

distanza del punto medio del quad dalla sorgente luminosa L:

public static double PhongValue (vertex V , vertex L , vertex vm , vertex M ) {

double outputColor ;

double coeffK=0.5;

double K_s = 0 . 5 ;

double luceSpeculare=0.5; // 0 . 5 ;

double luceDiff=1;

double luceAmb=0.1; // 0.1

double Ia_out , Id_out , Is_out ;

double n=200;


Ia_out=luceAmb*coeffK ;

Id_out=luceDiff*coeffK*(M . x*L . x+M . y*L . y+M . z*L . z ) ;

vertex R=new vertex (2*M . x*(M . x*L . x+M . y*L . y+M . z*L . z )−L . x , 2*M . y*(M . x*L . x←↩

+M . y*L . y+M . z*L . z )−L . y , 2*M . z*(M . x*L . x+M . y*L . y+M . z*L . z )−L . z ) ;

Is_out=luceSpeculare*K_s*(Math . pow ( (R . x*V . x+R . y*V . y+R . z*V . z ) ,n ) ) ;

outputColor=Ia_out+Id_out+Is_out ;

return outputColor ;

}

Questo modello di illuminazione viene analizzato più in dettaglio nel capi-

tolo 4.2.

La classe Castel contiene i metodi che restituiscono il punto (di tipo ver-

tex ) sulla super�cie, dati i parametri u, v, altezza e larghezza dello schermo

(width, height). Facendo variare u e v tra 0 e 1 si ottiene l'intera super�cie

di Bézier.

Questo codice calcola un punto della curva di Bézier utilizzando l'algorit-

mo di De Casteljau; è costituito dalla funzione Castel2(...) che accetta come

parametri di input rispettivamente il vettore dei punti di controllo contr[], il

numero di punti di controllo points ed il valore del parametro t sta_t.

public static Point Castel2 (Point contr [ ] , int points , double sta_t ) {

double t=sta_t ;

// copia i punt i d i c on t r o l l o

Point [ ] tmp_cont=new Point [ points ] ;

int i ;

int c ;

for (i=0;i<points;++i )

tmp_cont [ i]=contr [ i ] ;

for (c=points−1;c>0;−−c ) {

for (i=0;i<c;++i ) {

tmp_cont [ i ] . x=(1−t ) *(tmp_cont [ i ] . x )+ t* (tmp_cont [ i+1] .x ) ;

tmp_cont [ i ] . y=(1−t ) *(tmp_cont [ i ] . y )+ t* (tmp_cont [ i+1] .y ) ;


tmp_cont [ i ] . z=(1−t ) *(tmp_cont [ i ] . z )+ t* (tmp_cont [ i+1] .z ) ;

}

}

Point tmp=tmp_cont [ 0 ] ;

tmp . x=tmp_cont [ 0 ] . x ;

tmp . y=tmp_cont [ 0 ] . y ;

tmp . z=tmp_cont [ 0 ] . z ;

return tmp ;

}

Una super�cie di Bézier viene creata a partire da 16 punti di controllo, con-

tenuti nella matrice 4 x 4 mieiPunt[i][k]. La funzione Castel2(...) per curve

di Bézier viene applicata due volte: prima sulle 4 colonne, col parametro v,

ottenendo un primo risultato risultato[i] ; poi sulle 4 righe, col parametro u,

ottenendo il risultato �nale (ossia il punto sulla super�cie) secondoRisultato.

for (i=0;i<4;++i ) {

for (k=0;k<4;++k ) {

mieiPuntiLine [ k ] = mieiPunt [ i ] [ k ] ;

}

risultato [ i ] = Castel2 (mieiPuntiLine , 4 , v ) ;

}

secondoRisultato = Castel2 (risultato , 4 , u ) ;

Nella costruzione della Teiera (vedi Appendice), sono state utilizzate 32

super�ci di Bézier, per un totale di 512 punti di controllo.

Ad esempio, per la ventesima super�cie della Teiera, questo è il metodo

(all'interno della classe Castel) per generare il punto sulla super�cie (vertex )

a partire da 16 punti di controllo:

public static vertex getP20 ( int w , int h , double u , double v ) {

Point [ ] risultato=new Point [ 4 ] ;

Point [ ] mieiPuntiLine=new Point [ 4 ] ;

Point secondoRisultato ;

int i ;

int k ;

Point mieiPunt [ ] [ ] = new Point [ 4 ] [ 4 ] ;


mieiPunt [ 0 ] [ 0 ]=new Point ( 3 . 3 , 0 , 2 . 4 ) ;

mieiPunt [ 0 ] [ 1 ]=new Point ( 3 . 3 , 0 . 2 5 , 2 . 4 ) ;



mieiPunt [ 1 ] [ 0 ]=new Point ( 3 . 5 25 , 0 , 2 . 4 9375 ) ;

mieiPunt [ 1 ] [ 1 ]=new Point ( 3 . 5 2 5 , 0 . 2 5 , 2 . 4 9 375 ) ;

mieiPunt [ 1 ] [ 2 ]=new Point ( 2 . 8 , 0 . 2 5 , 2 . 4 7 5 ) ;

mieiPunt [ 1 ] [ 3 ]=new Point ( 2 . 8 , 0 , 2 . 4 7 5 ) ;

mieiPunt [ 2 ] [ 0 ]=new Point ( 3 . 4 5 , 0 , 2 . 5125) ;

mieiPunt [ 2 ] [ 1 ]=new Point ( 3 . 4 5 , 0 . 1 5 , 2 . 5125) ;

mieiPunt [ 2 ] [ 2 ]=new Point ( 2 . 9 , 0 . 1 5 , 2 . 4 7 5 ) ;

mieiPunt [ 2 ] [ 3 ]=new Point ( 2 . 9 , 0 , 2 . 4 7 5 ) ;





for (i=0;i<4;++i ) {

for (k=0;k<4;++k ) {

mieiPuntiLine [ k ] = mieiPunt [ i ] [ k ] ;

}

risultato [ i ] = Castel2 (mieiPuntiLine , 4 , v ) ;

}

secondoRisultato = Castel2 (risultato , 4 , u ) ;

vertex vv20= new vertex ( 50*secondoRisultato . x+w/2 , 50*secondoRisultato←↩

. y+h/2 , 50*secondoRisultato . z ) ;

return vv20 ;

}

Il metodo della classe Castel getPoint restituisce il vertice i-esimo.

Facendo variare i parametri u e v tra 0 e 1 si ottiene l'intera super�cie,

più o meno precisa a seconda del valore del passo:

int j=1,n ;

for (u=0; u<1; u=u+passo )

for (v=0; v<1; v=v+passo ) {


for (n=0;n<32;n++) {

V [ n ] [ j ] = Castel . getPoint (n , width , height , u , v ) ;

V [ n ] [ j+1] = Castel . getPoint (n , width , height , u+passo , v ) ;

V [ n ] [ j+2] = Castel . getPoint (n , width , height , u+passo , v+passo ) ;

V [ n ] [ j+3] = Castel . getPoint (n , width , height , u , v+passo ) ;

}

j=j+4;

}

La classe ptoMedio contiene il metodo public static vertex �ndM(vertex

v1, vertex v2, vertex v3, vertex v4), che trova il punto medio del quad a par-

tire dai suoi 4 vertex.

L'entry point class GWT è la classe GWTCanvasResize, che oltre ad

inserire tutte le operazioni necessarie per far partire il programma lato client

(di fatto l'applicazione AJAX), de�nisce al suo interno l'elemento Canvas e

un Context2d.

public class GWTCanvasResize implements EntryPoint {

Canvas canvas ;

Context2d context ;

HTMLPanel panel ;

static final String id = " c on t e n t h o l d e r " ;

//Entry po in t method

public void onModuleLoad ( ) {

panel = new HTMLPanel ( "<d i v c l a s s =\"con t en t \" i d=\"" + id + "\"></←↩

d iv>" ) ;

panel . setStyleName ( " con t en tHo l d e r " ) ;

Window . addResizeHandler (new ResizeHandler ( ) {

public void onResize (ResizeEvent event ) {

Canvas (event . getWidth ( ) , event . getHeight ( ) ) ;

}

}) ;

Canvas (Window . getClientWidth ( ) , Window . getClientHeight ( ) ) ;

RootPanel . get ( ) . setStyleName ( "body" ) ;

RootPanel . get ( ) . add (panel ) ;

}


// ordina l ' array d i quad Q da l l a z d e l punto medio maggiore a q u e l l a ←↩

minore

public static quad [ ] SortQuad (quad [ ] Q ) {

double [ ] [ ] zmQ = new double [ Q . length ] [ 2 ] ;

int i , indice ;

for (i=0;i<Q . length ; i++) {

zmQ [ i ] [ 0 ] = quad . getZm (Q [ i ] ) ;

zmQ [ i ] [ 1 ] = i ;

}

vertex . sortVertex (zmQ ) ;

quad [ ] sortedQ = new quad [ Q . length ] ;

for (i=0;i<Q . length ; i++) {

indice = ( int ) zmQ [ i ] [ 1 ] ;

sortedQ [ i ] = Q [ indice ] ;

}

return sortedQ ;

}

private void Canvas ( int width , int height ) {

panel . clear ( ) ;

canvas = null ;

canvas = Canvas . createIfSupported ( ) ;

i f (canvas == null ) {

RootPanel . get ( ) . add (new Label ( " Sorry , your b rowse r doesn ' t ←↩

suppo r t the HTML5 Canvas e l ement " ) ) ;

return ;

}

context = canvas . getContext2d ( ) ;

canvas . setStyleName ( "mainCanvas " ) ;

panel . add (canvas , id ) ;

canvas . setWidth (width + "px" ) ;

canvas . setCoordinateSpaceWidth (width ) ;

canvas . setHeight (height + "px" ) ;

canvas . setCoordinateSpaceHeight (height ) ;

double u ;

double v ;

int k=1;

double passo=0.1;

quad [ ] [ ] AllQuad= new quad [ 3 2 ] [ 1 0 0 0 0 ] ;

vertex [ ] [ ] V= new vertex [ 3 2 ] [ 1 0 0 0 0 ] ;


int j=1,n ;

for (u=0; u<1; u=u+passo )

for (v=0; v<1; v=v+passo ) {

for (n=0;n<32;n++) {

V [ n ] [ j ] = Castel . getPoint (n , width , height , u , v ) ;

V [ n ] [ j+1] = Castel . getPoint (n , width , height , u+passo , v ) ;

V [ n ] [ j+2] = Castel . getPoint (n , width , height , u+passo , v+←↩

passo ) ;

V [ n ] [ j+3] = Castel . getPoint (n , width , height , u , v+passo ) ;

}

j=j+4;

}

int h=1;

for (k=1;k<=j−3;k++) {

AllQuad [ 0 ] [ h ] = new quad ( width , height , V [ 0 ] [ k ] , V [ 0 ] [ k+1] , V←↩

[ 0 ] [ k+2] ,V [ 0 ] [ k+3] , canvas ) ; // cerch io

AllQuad [ 1 ] [ h ] = new quad (width , height , V [ 1 ] [ k ] , V [ 1 ] [ k+1] , V←↩







[ 4 ] [ k+2] ,V [ 4 ] [ k+3] , canvas ) ; //body


[ 5 ] [ k+2] , V [ 5 ] [ k+3] , canvas ) ; //body


[ 6 ] [ k+2] , V [ 6 ] [ k+3] , canvas ) ; //body


[ 7 ] [ k+2] , V [ 7 ] [ k+3] , canvas ) ; //body


[ 8 ] [ k+2] , V [ 8 ] [ k+3] , canvas ) ; //body


[ 9 ] [ k+2] , V [ 9 ] [ k+3] , canvas ) ; //body

AllQuad [ 1 0 ] [ h]= new quad ( width , height , V [ 1 0 ] [ k ] , V [ 1 0 ] [ k+1] , V←↩

[ 1 0 ] [ k+2] , V [ 1 0 ] [ k+3] , canvas ) ; //body


[ 1 1 ] [ k+2] , V [ 1 1 ] [ k+3] , canvas ) ; //body



[ 1 2 ] [ k+2] , V [ 1 2 ] [ k+3] , canvas ) ; //manico








[ 1 6 ] [ k+2] , V [ 1 6 ] [ k+3] , canvas ) ; // beccucc io








[ 2 0 ] [ k+2] , V [ 2 0 ] [ k+3] , canvas ) ; // s f e r a coperch io








[ 2 4 ] [ k+2] , V [ 2 4 ] [ k+3] , canvas ) ; // coperch io








[ 2 8 ] [ k+2] , V [ 2 8 ] [ k+3] , canvas ) ; // fondo


[ 2 9 ] [ k+2] , V [ 2 9 ] [ k+3] , canvas ) ; // fondo



[ 3 0 ] [ k+2] , V [ 3 0 ] [ k+3] , canvas ) ; // fondo


[ 3 1 ] [ k+2] , V [ 3 1 ] [ k+3] , canvas ) ; // fondo

k=k+3;

h=h+1;

}

h−−;

quad [ ] AllQ=new quad [ 32*h ] ;

int i , indice ;

for (k=1;k<=h ; k++)

for (i=0;i<32;i++) {

indice = (k−1)*32 + i ;

AllQ [ indice]=AllQuad [ i ] [ k ] ;

}

quad [ ] SortedAllQ=SortQuad (AllQ ) ;

for (i=0;i<SortedAllQ . length ; i++)

System .out . println (i+" "+quad . getZm (SortedAllQ [ i ] ) ) ;

double radians=Math . PI ;

for (k=0;k<SortedAllQ . length ; k++)

quad . drawQuad (SortedAllQ [ k ] , width , height , canvas , context ,←↩

radians ) ;

}

}

Il metodo private void Canvas(int width, int height) de�nisce larghezza e

altezza del Canvas; inoltre de�nisce un array bidimensionale di vertex (che

inizializza chiamando la getPoint della classe Castel) e un array bidimen-

sionale di quad (AllQuad, inizializzato passandoci i vertex precedentemente

trovati).

L'array bidimensionale di quad viene salvato in un array monodimensionale

di quad (AllQ), che viene ordinato grazie al metodo SortQuad.

Il metodo di GWTCanvasResize SortQuad ordina l'array di quad Q :

viene trovato il punto medio di ogni quad e tutti i punti medi vengon messi

nell'array zmQ, che viene ordinato dal metodo sortVertex della classe vertex.


In�ne i quad vengono disegnati sul Canvas, a partire da quelli con coor-

dinata z maggiore, onde coprire le super�ci nascoste: Back Face Culling.

4.2 Z-bu�ering e illuminazione

In questa sezione viene a�rontato il problema della rimozione di super�ci

nascoste, utilizzando la tecnica dello Z-bu�ering: l'oggetto passa così da una

rappresentazione di tipo wireframe a una rappresentazione di tipo solido.

4.2.1 Back Face Culling

Gli oggetti hanno un �davanti� e un �dietro� e la parte anteriore copre quel-

la posteriore. Occorre quindi non mostrare le parti posteriori degli oggetti

(Back-Face Culling).

Figura 4.1: Rimozione di super�ci nascoste.

Per risolvere questo problema, è stato utilizzato lo z-bu�ering: è sta-

to creato un vettore (AllQ) contenente tutti i quad da disegnare; dato che

disegnando un quad su un altro, quello con profondità maggiore viene cop-

erto, il vettore AllQ è stato ordinato dalla funzione public static quad []

SortQuad(quad[] Q) in base alla coordinata z del punto medio di ogni quad,

dalla maggiore alla minore.


Figura 4.2: Teapot - senza Back-Face Culling, passo=0.1

L'array di quad così ottenuto è stato poi disegnato sul Canvas: i quad della

parte posteriore della teiera vengono coperti da quelli anteriori, con coordi-

nata z minore.

Figura 4.3: Canvas - assi cartesiani


Figura 4.4: Teapot - Rimozione di super�ci nascoste, passo=0.1

4.2.2 Colore e Illuminazione

Il colore di ogni quad viene ottenuto grazie al modello di ri�essione

di Phong, il modello locale di ri�essione più utilizzato nella gra�ca al

calcolatore.

Un modello di ri�essione è un modello matematico che descrive l'inter-

azione tra luce ed oggetti.

Nella computer gra�ca 3D, il modello di ri�essione di Phong è un modello

d'illuminazione ed ombreggiatura per calcolare il colore dei punti appartenen-

ti ad una super�cie. Venne sviluppato da Bui Tuong Phong durante la sua

discussione di dottorato presso l'Università dello Utah intorno alla metà degli

anni '70. Sebbene abbia circa 30 anni ed esistano oramai vari modelli alterna-

tivi più o meno realistici, continua ad essere il più di�uso, dato che è semplice

e su�cientemente realistico in molte applicazioni.

La parte centrale di un modello di illuminazione locale (ovvero non con-

sidera ri�essioni di secondo ordine) è calcolare come le luce viene ri�essa da


una super�cie. Assumiamo che un raggio luminoso incida sulla super�cie dal-

la direzione indicata dal vettore L e vogliamo calcolare l'intensità della luce

nella direzione del vettore V (punto di vista). Quest'ultima dipende da L,

V , dalla lunghezza d'onda della luce e dalle caratteristiche della super�cie,

inclusa la sua normale M e le proprietà del materiale.

La luce, composta dalle tre componenti cromatiche RGB, viene consider-

ata puntuale, ovvero è generata da un punto ed emette un raggio luminoso

in ogni direzione.

Il modello di Phong prevede tre componenti separate per le sorgenti

di luce: luce speculare Is (che verrà ri�essa specularmente dalle super�ci),

luce di�usa Id (che verrà di�usa dalle super�ci) e luce ambientale Ia (che

interagisce con la componente ambientale della super�cie).

Il fatto che una sorgente di luce emetta luce di tre tipi diversi (speculare,

di�usa e ambientale) pur non avendo un signi�cato �sico, serve a rendere il

modello più �essibile: si possono simulare efetti globali con un modello locale.

Il modello di Phong fornisce una equazione per determinare l'intensità

Iout in un dato punto P in funzione della illuminazione Is, Id, Ia, di L, V ,

della normale in P , M e delle proprietà intrinseche del materiale che com-

pone l'oggetto. Questa viene calcolata come somma luce ambientale, luce

di�usa e luce ri�essa:

Iout = Iouta + Ioutd + Iouts

� Luce Ambientale

Dato che i modelli locali non simulano la ri�essione multipla della luce,

se un punto di un oggetto non è colpito direttamente dalla luce (è in

ombra), allora risulterà completamente nero. Il modello di Phong intro-


duce quindi un termine di luce ri�essa, la luce ambientale, caratterizzata

con una intensità Ia; alla super�cie viene assegnato un coe�cente di

ri�essione ambientale ka compreso tra 0 ed 1 (percentuale di ri�essione

della luce ambiente presente in ogni punto della scena). Il contributo

all'intensità �nale del punto da parte della luce ambientale è dato da

Iouta = Iaka

La luce ambientale è associata ad ogni sorgente e non è un termine glob-

ale unico, così quando una luce viene spenta (o accesa) l'illuminazione

ambientale diminuisce (o aumenta).

� Componente di�usa

Il secondo contributo a I è la cosiddetta componente di�usa o ri�es-

sione Lambertiana.

La luce di�usa di cui parliamo qui non corrisponde alla usuale accezione

di luce di�usa, ovvero luce proveviente da ri�essioni multiple (quella

semmai è la luce ambientale). La componente di�usa della sorgente

luminosa è la luce soggetta a di�usione, separata da quella soggetta a

ri�essione (cosa che �sicamente non ha senso).

L'intensit`a di questa luce ri�essa non dipende dalla direzione di vista

V , ma solo daM (normale in P , di norma unitaria) e L: una super�cie

Lambertiana appare egualmente luminosa da qualunque direzione la si

guardi. Simula il comportamento dei materiali (per esempio il gesso o

il legno) che ri�ettono la luce che ricevono in maniera uniforme in tutte

le direzioni.

Il contributo all'intensità �nale del punto da parte della luce di�usa è

dato da


Figura 4.5: Vettori punto di vista (V ), sorgente luminosa (L) e normale nel punto

P (M)

Ioutd = Idkd cos θ = IdkdM ·L

dove Id è l'intensità della componente di�usa della luce incidente, kd è

il coe�cente di ri�essione di�usa del materiale che compone l'oggetto

(la percentuale di luce entrante che viene di�usa) e θ è l'angolo tra L e

M . Tale angolo si presuppone compreso nell'intervallo [0; π], altrimenti

si pone l'intensità della componente di�usa pari a zero (il punto, per

avere una componente di�usa, deve essere illuminato dalla sorgente

luminosa).

� Componente speculare

La luce può anche essere ri�essa da un corpo specularmente, ovvero

seguendo le leggi della ri�essione dell'ottica geometrica. In tal caso la

luce viene ri�essa in una direzioneR, ottenuta �specchiando� L rispetto

a M . In realtà nessun corpo ri�ette in maniera esattamente speculare:

Phong introduce il seguente modello empirico (non ha un signi�cato

�sico) per la componente speculare


Iouts = Isks (R · V )n

dove Is è la componente speculare della luce incidente, ks è il coe�cente

di ri�essione speculare (la percentuale di luce entrante che viene ri�essa)

ed n l'esponente di ri�essione speculare del materiale. Per n che tende

ad in�nito si ha una ri�essione speculare perfetta.

Sommando il tutto, il modello di Phong fornisce la seguente espressione

per l'intensità di colore di un un punto P :

Iout = Iaka + IdkdM ·L + Isks (R · V )n

In caso una o più componenti cromatiche eccedano il loro limite massimo,

si possono adottare varie strategie; la più semplice è quella di e�ettuare un

clamping, ovvero se un Iout supera il valore massimo lo si pone pari a questo.

Utilizzando il modello di Phong si dovrebbe calcolare il colore di ogni

punto di ogni super�cie nella scena. Questo approccio è troppo dispendioso

per essere adottato realmente, quindi si ricorre a metodi di shading (o de-

terminazione dell'illuminazione) delle super�ci approssimati ma molto meno

costosi, che operano sui poligoni come entitá elementari anzichè punto per

punto. Il modello più semplice di shading per un poligono è il constant shad-

ing (o �at shading), che consiste nell'applicare il modello di illuminazione

una sola volta per ogni poligono della scena e poi usare il valore determinato

per l'intera super�cie del poligono.

Per determinare il colore di ogni quad è stato utilizzato proprio questo mod-

ello di illuminazione, applicando il metodo di Phong sul punto medio di ogni


poligono.

Esistono anche algoritmi globali (ray-tracing, radiosity) che sono più

complessi e più realistici.

Figura 4.6: Teapot - Phong Model

4.3 Trasformazioni Geometriche

Una trasformazione di Rn è un'applicazione biiettiva f : Rn → Rn. Le

trasformazioni si possono comporre tra loro: se f e g sono due applicazioni

biiettive da Rn a Rn, allora la composizione f ◦ g è ancora un'applicazione

biiettiva da Rn a Rn. Un'applicazione biiettiva f è invertibile. L'inversa

f−1 : Rn → Rn soddisfa f−1 (f (x)) = x, per ogni x nel dominio di f e

soddisfa f−1 (f (y)) = y, per ogni y nel codominio di f .

Le principali trasformazioni del piano di R2 e dello spazio R3 sono Traslazione,

Rotazione e Trasformazione di scala. Vediamo più nel dettaglio leRotazioni,

utilizzate in questo progetto.


4.3.1 De�nizione

Sia ϕ ∈ R. Indichiamo con Rϕ : R3 → R3 l'applicazione che ad un

vettore v ∈ R3 associa il vettore v ruotato di un angolo ϕ intorno al vettore

e1 =

1

0

0

.

� Rotazione intorno all'asse x:

Se ϕ > 0, la rotazione indotta sul piano (y, z) va intesa in senso antio-

rario. Se ϕ < 0, la rotazione va intesa in senso orario.

Sia v ∈ R3 e sia ϕ ∈ R. Le coordinate del punto v′ = Rϕ (v) sono date

da:

x′ = x

y′ = cos (ϕ) y − sin (ϕ) z

z′ = sin (ϕ) y + cos (ϕ) z

In notazione matriciale:

Rϕ

x

y

z

=

1 0 0

0 cos (ϕ) − sin (ϕ)

0 sin (ϕ) cos (ϕ)

x

y

z

� Rotazione intorno all'asse y:

Se ϕ > 0, la rotazione indotta sul piano (x, z) va intesa in senso antio-




da:

x′ = cos (ϕ)x− sin (ϕ) z

y′ = y

z′ = sin (ϕ)x+ cos (ϕ) z


Rϕ

x

y

z

=

cos (ϕ) 0 − sin (ϕ)

0 1 0

sin (ϕ) 0 cos (ϕ)

x

y

z

� Rotazione intorno all'asse z:

Se ϕ > 0, la rotazione indotta sul piano (x, y) va intesa in senso antio-



da:

x′ = cos (ϕ)x− sin (ϕ) y

y′ = sin (ϕ)x+ cos (ϕ) y

z′ = z


Rϕ

x

y

z

=

cos (ϕ) − sin (ϕ) 0

sin (ϕ) cos (ϕ) 0

0 0 1

x

y

z


Prima di applicare la rotazione occorre però traslare ogni punto nell'orig-

ine, per poi ritraslarlo nel centro di rotazione una volta e�ettuata quest'ulti-

ma. In questo modo l'oggetto ruota su se stesso, rimanendo visibile all'interno

del Canvas.

Figura 4.7: Teapot - Rotazioni

Capitolo 5

Conclusioni e sviluppi futuri

La realizzazione di applicazioni Web con interfacce rich ha rappresentato

negli ultimi anni una piccola rivoluzione nel modo di fruire il Web.

I problemi di prestazione e usabilità che inizialmente hanno rallentato

l'adozione di questo modello sono stati superati grazie a tecnologie quali

Adobe Flex e AJAX. Quest'ultimo, in particolare, pur rappresentando un

decisivo passo avanti ha introdotto a sua volta alcune di�coltá, soprattutto

per quanto riguarda il codice lato client: la sua strutturazione, la riusabil-

ità e la sua manutenibilità rappresentano un peso importante nell'ambito

del progetto. Va inoltre considerato il tempo necessario a risolvere tutte le

incompatibilità tra codice JavaScript per diversi browser.

Google Web Toolkit si pone come soluzione a questi problemi. Infatti,

permettendo di scrivere codice in Java, pone rimedio agli inconvenienti delle

applicazioni Web basate su AJAX. In più, con il rilascio della versione 2.2, è

stato introdotto il supporto a funzionalità speci�che di HTML5, quali l'ele-

mento Canvas 2D, che permette il disegno sia bitmap che vettoriale all'interno

del browser.

Nel presente lavoro di tesi è stato sperimentato il Canvas 2D mediante

70

CAPITOLO 5. CONCLUSIONI E SVILUPPI FUTURI 71

GWT per la visualizzazione di super�ci di Bézier, andando ad implementare

alcuni algoritmi classici per la visualizzazione di scene tridimensionali su

super�ci 2D. Il risultato è sicuramente e�cace e con questo lavoro si è di

fatto dimostrata la possibilità di utilizzare l'approccio proposto dal GWT

anche per la realizzazione di applicazioni di gra�ca 3D interattiva.

Come possibili sviluppi futuri, si potrebbe rendere l'applicazione più di-

namica aggiungendo, ad esempio, la possibilità che l'utente interagisca con

l'applicazione de�nendo parametri caratteristici della scena quali la posizione

del punto di vista e delle luci.

Si potrebbe inoltre migliorare il modello di illuminazione, utilizzando

metodi di shading più avanzati, ma anche più costosi dal punto di vista

computazionale.

HTML5 è il primo passo nella direzione del Web del futuro, infatti la

recente versione del browser Chrome (di Google) ha già aggiunto delle API

Javascript speci�che (dette WebGL) per facilitare la gestione della gra�ca 3D

su un Canvas e presto i maggiori browser potranno supportare questi nuovi

potentissimi strumenti, tutti da sperimentare.

Appendice A

5.1 Utah Teapot

La teiera dello Utah, nota come Utah Teapot, ha una signi�cativa e

particolare storia legata alla nascita della computer gra�ca. Nel 1975 Martin

Newell che lavorava all'Universitá dello Utah realizzò per la prima volta un

modello 3D di una semplice teiera, comprata dalla moglie al supermercato

locale. Il modello era realizzato mediante free-form, cioé forme libere trac-

ciate utilizzando le curve di Bézier. Da quella prima modellazione nel 1975,

la teiera ha costituito uno dei test più usati per valutare l'e�cienza degli al-

goritmi e degli strumenti di rendering di un programma. Il modello digitale

originale era composto da circa 110 vertici ed era stato disegnato prima su

carta millimetrata e poi �rilucidato� su un monitor Tektronix sul quale era

stata appoggiata la carta millimetrata al �ne di ricavare le curve di Bézier.

La teiera é stata donata al Boston Computer Museum dove é conservata nel-

la sezione �Oggetti e�meri� e catalogata come �Teapot used for Computer

Graphics rendering�.

Molte versioni del modello della teiera, o di scene che contiene la teiera,

sono state distribuite liberamente o non per quasi tutti i programmi di reso

o di sintesi gra�ca, come AutoCAD, POV-Ray, OpenGL, Direct3D, e 3D

72

Appendice A 73

studio Max.

In OpenGL, in supplemento dei cubi tradizionali e sfere, la biblioteca GLUT

propone una funzione glutSolidTeapot () come gra�co primitivo.

Figura 5.1: Foto della teiera nota come Utah Teapot perché usata per la prima

volta da un ricercatore dell'universitá dello Utah come modello per la costruzione

delle curve di Bézier.

5.2 Teapot con OpenGL

Esempio di programma OpenGL che utilizza la funzione glutSolidTeapot()

per visualizzare una teiera:

#include <GL/glut . h>

#include <GL/glu . h>

#include <GL/gl . h>

#include <stdlib . h>

#include <stdio . h>

GLfloat light0_position [ ] = { 1 . 0 , 1 . 0 , 1 . 0 , 0 . 0 } ;

GLfloat light1_position [ ] = { −5.0f , −30.0f , 5 . 0f , 1 . 0f } ;

void init (void ) {

GLfloat ambientLight [ ] = { 0 .1f , 0 . 1f , 0 . 1f , 1 . 0f } ;

Appendice A 74

GLfloat light0_ambient [ ] = { 0 . 0 , 0 . 0 , 0 . 0 , 1 . 0 } ;

GLfloat light0_diffuse [ ] = { 1 . 0 , 1 . 0 , 1 . 0 , 1 . 0 } ;

GLfloat light0_specular [ ] = { 1 . 0 , 1 . 0 , 1 . 0 , 1 . 0 } ;

GLfloat light0_position [ ] = { 1 . 0 , 1 . 0 , 1 . 0 , 0 . 0 } ;

GLfloat light1_ambient [ ] = { 0 .5f , 0 . 5f , 0 . 5f , 1 . 0f } ;

GLfloat light1_diffuse [ ] = { 1 . 0 , 1 . 0 , 1 . 0 , 1 . 0 } ;

GLfloat light1_specular [ ] = { 1 .0f , 1 . 0f , 1 . 0f , 1 . 0f } ;

GLfloat light1_position [ ] = { −1.0f , 1 . 0f , 1 . 0f , 1 . 0f } ;

GLfloat specref [ ] = { 0 .6f , 0 . 6f , 0 . 6f , 1 . 0f } ;

glLightModelfv (GL_LIGHT_MODEL_AMBIENT , ambientLight ) ;

glLightfv (GL_LIGHT0 , GL_AMBIENT , light0_ambient ) ;

glLightfv (GL_LIGHT0 , GL_DIFFUSE , light0_diffuse ) ;

glLightfv (GL_LIGHT0 , GL_SPECULAR , light0_specular ) ;

glLightfv (GL_LIGHT0 , GL_POSITION , light0_position ) ;

glEnable (GL_LIGHT0 ) ;

glLightfv (GL_LIGHT1 , GL_AMBIENT , light1_ambient ) ;

glLightfv (GL_LIGHT1 , GL_DIFFUSE , light1_diffuse ) ;

glLightfv (GL_LIGHT1 , GL_SPECULAR , light1_specular ) ;



glEnable (GL_COLOR_MATERIAL ) ;

glColorMaterial (GL_FRONT , GL_AMBIENT_AND_DIFFUSE ) ;

glMaterialfv (GL_FRONT , GL_SPECULAR , specref ) ;

glMateriali (GL_FRONT , GL_SHININESS , 3 0 ) ;

glEnable (GL_LIGHTING ) ;


// g lEnab le (GL_CULL_FACE) ;

glEnable (GL_DEPTH_TEST ) ;

glShadeModel (GL_SMOOTH ) ;

}

void display (void ) {

glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT ) ;

Appendice A 75

glPushMatrix ( ) ;

glTranslatef ( 0 . 0 , 0 . 0 , −5.0) ;



glRotatef ( 2 5 . 0 , 1 . 0 , 0 . 0 , 0 . 0 ) ;

// g lRo t a t e f (−35.0 , 0 .0 , 1 .0 , 0 .0) ;

glPushMatrix ( ) ;

glColor3f ( 0 . 3 , 0 . 6 , 0 . 9 ) ;

glPushMatrix ( ) ;

glRotatef (−25.0 , 0 . 0 , 1 . 0 , 0 . 0 ) ;

glutSolidTeapot ( 1 . 0 ) ;

glPopMatrix ( ) ;

glutSwapBuffers ( ) ;

}

void reshape ( int w , int h ) {

// Prevent a d i v i d e by zero

i f (h == 0)

h = 1 ;

// Set Viewport to window dimensions

glViewport (0 , 0 , w , h ) ;

// Ca l cu la t e aspec t r a t i o o f the window

float fAspect = (GLfloat )w/(GLfloat )h ;

// Set the p e r s p e c t i v e coord inate system

glMatrixMode (GL_PROJECTION ) ;

glLoadIdentity ( ) ;

gluPerspective ( 6 5 . 0 , (GLfloat ) w/(GLfloat ) h , 1 . 0 , 2 0 . 0 ) ;

glMatrixMode (GL_MODELVIEW ) ;

glLoadIdentity ( ) ;

}

int main ( int argc , char** argv ) {

glutInit(&argc , argv ) ;

glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH ) ;

glutInitWindowSize (500 , 500) ;

glutCreateWindow (argv [ 0 ] ) ;

init ( ) ;

glutReshapeFunc (reshape ) ;

glutDisplayFunc (display ) ;

glutMainLoop ( ) ;

Appendice A 76

return 0 ;

}

Figura 5.2: Teiera realizzata con OpenGL

5.3 Punti di controllo

Nel seguito vengono riportati alcuni punti di controllo utilizzati per dis-

egnare la teiera sul Canvas, come de�nita nella rivista Computer Graphics

& Applications. Ha un fondo, ma nessun cerchio sul coperchio.

La prima riga contiene il numero di patch nel �le, poi è data ogni patch,

con le sue dimensioni, seguita dai suoi punti di controllo, uno per riga.

(http://www.holmes3d.net/graphics/teapot/teapotCGA.bpt)

Appendice A 77

32

3 3

1 .4 0 .0 2 .4

1 .4 −0.784 2 .4

0 .784 −1.4 2 .4

0 .0 −1.4 2 .4

1 .3375 0 .0 2 .53125

1 .3375 −0.749 2.53125

0 .749 −1.3375 2.53125

0 .0 −1.3375 2.53125

1 .4375 0 .0 2 .53125

1 .4375 −0.805 2.53125

0 .805 −1.4375 2.53125

0 .0 −1.4375 2.53125

1 .5 0 .0 2 .4

1 .5 −0.84 2 .4

0 .84 −1.5 2 .4

0 .0 −1.5 2 .4

3 3

0 .0 −1.4 2 .4

−0.784 −1.4 2 .4

−1.4 −0.784 2 .4

−1.4 0 .0 2 .4

0 .0 −1.3375 2.53125

−0.749 −1.3375 2.53125

−1.3375 −0.749 2.53125

−1.3375 0 .0 2 .53125

0 .0 −1.4375 2.53125

−0.805 −1.4375 2.53125

−1.4375 −0.805 2.53125

−1.4375 0 .0 2 .53125

0 .0 −1.5 2 .4

−0.84 −1.5 2 .4

−1.5 −0.84 2 .4

−1.5 0 .0 2 .4

3 3

Appendice A 78

−1.4 0 .0 2 .4

−1.4 0 .784 2 .4

−0.784 1 .4 2 .4

0 .0 1 .4 2 .4

−1.3375 0 .0 2 .53125

−1.3375 0 .749 2 .53125

−0.749 1 .3375 2.53125

0 .0 1 .3375 2.53125

−1.4375 0 .0 2 .53125

−1.4375 0 .805 2 .53125

−0.805 1 .4375 2.53125

0 .0 1 .4375 2.53125

−1.5 0 .0 2 .4

−1.5 0 .84 2 .4

−0.84 1 .5 2 .4

0 .0 1 .5 2 .4

. . .

Appendice B

5.4 Tabelle del supporto sui browser di HTML5

Le seguenti tabelle sintetizzano il supporto sui principali browser dei nuovi

tag, attributi e API HTML5. Per ciascun browser viene indicata la versione

piú bassa che supporta una speci�ca funzionalitá.

Fonte: http://www.html.it/guide/esempi/html5/tabella_supporto/tabella.html

79

Appendice B 80

Appendice B 81

Appendice B 82

Bibliogra�a

[1] Canvas - Guida HTML5.

http://xhtml.html.it/guide/lezione/5001/canvas/.

[2] Google Web Toolkit - homepage.

https://developers.google.com/web-toolkit/.

[3] Guida HTML5.

http://xhtml.html.it/guide/leggi/203/guida-html5/.

[4] HTML5 - pagina u�ciale W3C.

http://www.w3.org/TR/2011/WD-html5-20110525/.

[5] Modello di ri�essione di Phong - Wikipedia - L'enciclopedia libera.

http://it.wikipedia.org/wiki/Modello_di_

riflessione_di_Phong.

[6] Ivan Diana. Google Web Toolkit - Introduzione al framework GWT.

http://www2.mokabyte.it/cms/article.run?

articleId=ZRN-948-15E-2M5_7f000001_23998236_

9088b3a8.

[7] Mattia Ferrarese. Bernstein: storia, teoremi, polinomi, curve e super�ci

di Bézier.

83

BIBLIOGRAFIA 84

http://www.adt.unipd.it/corsi/CalcoloNumerico/

relBezier.pdf.

[8] Marzia Fontana. Dispense di gra�ca computazionale tecnica.

[9] A. Fusiello. Modelli di illuminazione.

http://profs.sci.univr.it/~fusiello/teaching/

grafica/dispense04/lez07.pdf.

[10] Tocci Giovanni. Algoritmo di de Casteljau.

http://digilander.libero.it/giotto78/bezier/node3.

html.

Università degli Studi di Parma - cs.unipr.it · Tesi di Laurea Triennale ... 5.4 abTelle del...

Documents

Transcript of Università degli Studi di Parma - cs.unipr.it · Tesi di Laurea Triennale ... 5.4 abTelle del...