Università degli Studi di Torino Facoltà di Scienze M.F.N. Corso di Laurea in Matematica. Matematica creativa in Rich Internet Applications (RIA)

Transcript

1 Università degli Studi di Torino Facoltà di Scienze M.F.N. Corso di Laurea in Matematica TESI DI LAUREA Matematica creativa in Rich Internet Applications (RIA) Relatore: Prof.ssa Catterina Dagnino Candidato: Walter Bugliarelli ANNO ACCADEMICO

2 Indice Introduzione v 1 Applicazioni Internet e Web Introduzione Applicazioni Internet Il modello client-server Problemi di installazione Applicazioni Web Le principali tecnologie utilizzate Le Rich Internet Application Lo stato dell arte delle RIA e Adobe Flex Introduzione Sicurezza Aspetti economici Tipi di RIA e confronti Adobe Flex Testo 3D Introduzione Modello matematico Applicazioni possibili Analisi del codice Simulatore 3D di urti elastici Introduzione ii

3 INDICE iii 4.2 Modello matematico Interfaccia Applicazioni possibili Il modello di gestione degli eventi Analisi del codice Disegno di curve Introduzione Funzionamento Modello matematico Applicazioni possibili Struttura del codice Classi astratte e polimorfismo Classe DrawingTarget Classe DrawingObject Le classi Line e Polygon La classe BSpline La gestione degli eventi del mouse all interno dell applicazione 75 6 La distribuzione sul Web: confronto tra Flex e Matlab Introduzione Distribuire un applicazione MATLAB in formato eseguibile attraverso il web Il MATLAB Component Runtime Matlab e Java Costruzione di un applicazione Java MATLAB e le servlet Java Confronto tra i due pacchetti Considerazioni Appendice 92 A Flex ed alcune caratteristiche della programmazione orientata agli oggetti 92

4 INDICE iv Glossario 96 Bibliografia e sitografia 100

5 Introduzione Questa tesi è iniziata presso la EBIT Projects di Torino, azienda in cui ho svolto uno stage sotto la guida dell Ing. Franco Chiesa, che è stato il mio referente, e che desidero ringraziare per la disponibilità e competenza. Durante lo stage sono entrato in contatto con le Rich Internet Application, o più semplicemente RIA. Le RIA sono particolari ed innovative applicazioni Web che portano numerosi vantaggi rispetto a quelle tradizionali, tra cui una maggior interattività, un Look & Feel più intuitivo e appetibile e, infine, un notevole aumento in termini di reattività del software. L azienda si avvantaggia delle potenzialità di questa nuova tecnologia per creare moduli software altamente interattivi, atti a fornire nuove funzionalità ai siti Web delle aziende clienti. Durante lo stage ho avuto la possibilità di entrare nel ciclo produttivo di una di queste applicazioni, cosa che mi ha permesso di padroneggiare l uso di Adobe Flex 3, il pacchetto di riferimento usato in Azienda per la progettazione ed implementazione di RIA. Flex 3 è un software molto versatile che permette di creare applicazioni non solamente di tipo aziendale, ma anche rivolte alla creatività, alla pubblicità e alla didattica. Sempre sotto la guida dell Ing. Chiesa, ho pertanto sviluppato tre applicazioni di esempio che mostrano sia la versatilità di Flex 3 sia le potenzialità delle RIA nel portare sul Web contenuti innovativi. La parte iniziale del lavoro spiega che cosa è un applicazione Web classica e perché le RIA ne rappresentino l evoluzione. Viene successivamente presentato l attuale stato dell arte di queste nuova tipologia di software e si focalizza l attenzione su alcuni aspetti economici riguardanti sia gli sviluppatori sia gli utenti delle RIA, su alcuni aspetti a proposito dei parametri di sicurezza che le tecnologie per la costruzione di RIA devono rispettare e su alcune limitazioni di cui soffre questo tipo di applicazioni. Si considerano, infine, alcune tecnologie preposte allo sviluppo di RIA, in particolare Flex. Nelle sezioni successive si descrivono tre applicazioni, che sono state sviluppate in Flex, che ne dimostrano le potenzialità. In esse la matematica ha un ruolo creativo. La prima visualizza un campo di testo che fluttua nello spazio in ba-

6 INTRODUZIONE vi se a formule parametriche, ed è interessante perché presenta un ambiente tridimensionale nonostante Flex non disponga di librerie per il disegno 3D. La seconda mostra un cubo con delle sferette che si scontrano l un l altra in un un susseguirsi di urti totalmente elastici, l interfaccia permette di ruotare il cubo a piacere e di cambiare i parametri di massa e dimensione di ogni singola pallina per vederne il comportamento. La terza presenta un piccolo programma di grafica vettoriale nel quale si possono disegnare alcune forme con un approccio diverso da quello di altri pacchetti di disegno. Il codice di ognuna di queste applicazioni, inoltre, è basato su concetti matematici e fisici appresi nel corso di Laurea in Matematica. Questo aspetto mostra la fattibilità, dal punto di vista didattico, di illustrare nozioni, anche complesse, sul Web, con applicazioni altamente interattive. L ultimo capitolo riguarda le possibilità fornite dal pacchetto Matlab per portare le applicazioni scritte nel proprio linguaggio sul Web oltre a presentare alcuni confronti tra Matlab stesso e Flex. In appendice vengono richiamati i fondamenti della programmazione ad oggetti.

7 Capitolo 1 Applicazioni Internet e Web 1.1 Introduzione 1 In questo capitolo si vuole ripercorrere sommariamente l evoluzione delle applicazioni informatiche accessibili da remoto. Pertanto, viene dapprima introdotto il modello client-server, dominatore incontrastato dell era pre-internet, successivamente vengono illustrate le principali tecnologie utilizzate nella costruzione di applicazioni Web fino all ultima frontiera di quest ultime: le Rich Internet Application (RIA). Per ogni passaggio evolutivo, vengono spiegate le limitazioni delle tecnologie utilizzate precedentemente ed i vantaggi delle successive. 1.2 Applicazioni Internet Le applicazioni Internet sono software più o meno interattivi fra due o più computer che utilizzano Internet come network di comunicazione. Pertanto sono, in realtà, costituite da due parti differenti: la prima è quella delegata a permettere all utente di controllare l applicazione stessa e che ne rappresenta l interfaccia, la seconda è il cuore vero e proprio del software ed è installata e funzionante su una macchina remota (server). Un esempio di applicazione Internet è la posta elettronica: l interfaccia al servizio è rappresentata da uno dei tanti software di posta elettronica (Mi- 1 Nota al testo: I termini seguiti da (*), e.g. Intranet*, sono definiti nel Glossario. 1

8 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 2 crosoft Outlook, Mozilla Thunderbird etc.) che, opportunamente installato e configurato con i parametri dell account*, ci permette di connetterci al server di posta del provider*, accedere alla nostra casella e scaricare* sul nostro computer le che verranno poi archiviate, organizzate e conservate dal programma di posta stesso. 1.3 Il modello client-server Molto prima dell avvento di Internet e del relativo concetto di rete delle reti e di rete globale, l idea di applicazioni accessibili tramite una rete di collegamento tra computer, si concretizzava mediante il modello client-server. Con il termine client si intende il programma che gira sulla macchina locale utilizzando, per la propria elaborazione, delle risorse che risiedono sul server. Il server è un computer o un sistema di computer interallacciati (cluster), che, in partizione di tempo (time-sharing) o in parallelo, forniscono servizi ai client che li richiedono. I servizi partizionati possono essere: basi di dati, potenza di calcolo, connettività etc che i diversi client possono utilizzare come se fossero propri. Per molti anni questa fu l architettura predominante e anche oggigiorno è ampiamente utilizzata. Il successo è stato decretato dal fatto che il terminale (o client), la macchina su cui gira il software client, può essere limitata nella prestazioni e quindi economica, fatto questo determinante nei primi anni dell era informatica. La poca potenza richiesta dai terminali era dovuta al fatto che il software lato-server risiedeva su un mainframe* ed era progettato per soddisfare contemporaneamente le richieste di più terminali. Il maggior problema di questa soluzione è che una qualsiasi miglioria apportata all applicazione sul server richiede generalmente di installare su ogni client una nuova versione del software lato-client con un conseguente aumento dei costi di manutenzione e rallentamento di produttività. Non bisogna pensare che questo modello sia in disuso. Un esempio celebre di architettura client-server è l X Window System. Originariamente sviluppato al MIT nel 1984, l X Window System è una tecnologia che permette a dei cosiddetti X terminal, computer economici ma comunque con delle capacità grafiche, di visualizzare ed utilizzare una GUI* demandando

9 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 3 il lavoro di calcolo dovuto al disegno e al movimento delle finestre e alla gestione del mouse e della tastiera ad un server ( X Server ) che è in grado di fornire questo servizio a più terminali contemporaneamente. Questo modello è implementato su tutti i sistemi UNIX* e UNIX-like (Linux, Solaris etc.) ancora oggi, anche se ormai il software lato server è anch esso installato sulla macchina locale in quanto i moderni computer non hanno più difficoltà a gestire GUI complete da soli.[1] 1.4 Problemi di installazione Le difficoltà di aggiornamento suddette e relative alla configurazione dei client non rappresentano un problema quando l area di utilizzo dell applicazione è quello di una azienda, anche grossa, o di un università: generalmente, infatti, in questi ambiti è previsto personale adibito alla manutenzione dei terminali e ad istruire il personale o gli studenti alle nuove funzionalità. Con l avvento di Internet e del World Wide Web 2 si è creata la possibilità di sviluppare ed utilizzare software che comunicassero con server, o semplicemente con altri PC come nel caso delle applicazioni peer to peer*, locati in qualsiasi parte del globo. Oggi utilizziamo applicazioni che si avvalgono di un collegamento ad Internet in continuazione: forum, webmail, blog, aste on-line etc. Si può facilmente capire i problemi di dover installare sulla propria macchina programmi client che permettano di interfacciare tutti questi servizi. Elenchiamone i principali. Prima di tutto il produttore del software dovrebbe rilasciare una versione del client compatibile con il maggior numero di sistemi operativi possibile, l utente, di conseguenza, dovrebbe essere in grado di scaricare, dal sito web di supporto, la versione giusta per il proprio PC e saperla installare; operazioni queste non sempre banali soprattutto su sistemi UNIX-like, in particolare Linux. Inoltre, mentre risulta accettabile 2 Non bisogna confondere Internet con il Web: con il primo termine si intende una rete telematica mondiale costituita da diverse sotto-reti locali non compatibili l una con l altra ma che comunicano mediante una serie di protocolli comuni, con il secondo si intende una rete libera di documenti multimediali collegati l un l altro da collegamenti ipertestuali incorporati nei documenti stessi e basata su Internet

10 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 4 installare software lato-client per i principali strumenti di lavoro di una postazione, non è immaginabile pensare di dover preoccuparsi di configurare il computer per tutte quelle applicazioni che necessitano di accedere ad Internet sia perché sono moltissimi i servizi basati sulla Rete sia perché molti di questi vengono usati saltuariamente e non giustificano quindi il tempo perso per l eventuale manutenzione dei client. Questi problemi vengono in larga parte risolti dalle applicazioni Web 1.5 Applicazioni Web Le applicazioni Web sono particolari applicazioni Internet. L interfaccia non è più demandata ad un software installato sul client ma viene fornita dal server stesso che la invia all utente non appena questo la richieda recandosi mediante un qualunque browser* alla pagina web preposta al controllo dell applicazione stessa. Un esempio in tal senso è la webmail. L utente non deve più procurarsi, installare ed aggiornare un software client di posta elettronica ma si reca alla pagina web preposta e il browser visualizzerà un interfaccia, generalmente intuitiva, comprendente tutte le funzionalità necessarie alla gestione della casella. I vantaggi di questa soluzione, oltre alla comodità del fruitore del servizio di non dover installare l applicativo client, sono parecchi. Prima di tutto la casella di posta sarà facilmente raggiungibile da qualsiasi PC con una connessione Internet, ad esempio da un Internet-Point*, posto dove non è proponibile l idea di installare e configurare programmi per le esigenze del singolo individuo per ovvi motivi. In secondo luogo il produttore dei programmi necessari non dovrà più scrivere versioni specializzate dei client per ogni sistema operativo perché, come vedremo, utilizzerà tecnologie standardizzate che, salvo relativamente piccoli problemi di incompatibilità dovute alle varie versioni dei browser, forniscono all utente la garanzia di ritrovarsi la medesima interfaccia su ogni tipo di macchina e ai programmatori di scrivere una sola versione della medesima. Un terzo motivo, non trascurabile,è dovuto al fatto che queste interfacce visualizzate nei browser sono generalmente progettate ed implementate per integrarsi al meglio con i comandi

11 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 5 tipici dei browser; l utente troverà quindi un ambiente subito famigliare con pulsanti per sfogliare le varie pagine, con comandi per ingrandire il testo, per visualizzare il programma a tutto schermo etc.. Il più delle volte, quindi, le funzionalità classiche fornite dai browser forniscono ai produttori dei software la possibilità di risparmiare ore e ore di lavoro che sarebbero necessarie per costruire un applicazione standard con una ovvia riduzione dei costi. 1.6 Le principali tecnologie utilizzate Quando scriviamo un indirizzo web nella apposita barra 3 di un browser questo invia una richiesta ad un server web per ottenere, come risposta da questo, la pagina da visualizzare. La risposta inviata dal server al browser è costituita da un testo semplice codificato secondo le specifiche del linguaggio di mark-up 4 HTML/XHML 5 che descrive il contenuto logico e lo stile 6 per la formattazione della pagina. Ora la pagina HTML visualizzata nel browser è statica cioè non fornisce una interattività in tempo reale né a livello dell interfaccia né al livello di comunicazione col server. Poter creare pagine che dialoghino con il web-server è fondamentale per offrire all utente la possibilità di avvalersi di applicazioni web. La prima tecnologia ideata per tale scopo fu la Common Gateway Interface (C.G.I.), un protocollo [2] che definisce uno standard di comunicazione fra il web-server, uno o più programmi installati su questo e il browser. Approssimativamente il tutto funziona così: l utente raggiunge, mediante il browser, un URL* del tipo quindi il web-server attiva il programma corrispondente che provvederà a formattare una pagina HTML che verrà inviata al browser richiedente come risposta. Il protocollo CGI definisce anche come il browser possa inviare al server i 3 La barra degli indirizzi è un campo del browser dove si può immettere manualmente l indirizzo Internet della pagina desiderata 4 vedere Glossario per la definizione 5 consultare per ulteriori approfondimenti 6 É prassi consolidata utilizzare i cosiddetti fogli di stile per definire l aspetto delle pagine lasciando al codice HTML/XHML il compito di definirne la struttura. Vedere

12 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 6 dati dei form* permettendo, di fatto, di ottenere risposte personalizzate in relazione ai parametri immessi. Gli applicativi CGI possono essere scritti in qualsiasi linguaggio di programmazione ma utilizzarne uno interpretato* non è una scelta performante perché il web-server carica in memoria ed inizializza l interprete del linguaggio ad ogni richiesta dell applicazione CGI creando un collo di bottiglia notevole, ovviamente questo inconveniente non si presenta se si utilizzano linguaggi che generano codice direttamente eseguibile come il C/C++ che però comportano tempi più lunghi in fase di progettazione ed implementazione. Alcune nuove tecnologie riducono di molto l inconveniente e permettono l utilizzo di linguaggi di scripting*, lato-server, integrati nel codice HTML. I più celebri sono PHP e ASP 7. Ne spieghiamo in breve il funzionamento facendo riferimento a PHP del tutto analogo al caso ASP. Le pagine PHP sono delle pagine HTML avente all interno del codice PHP che rende la pagina dinamica. Una pagina web dinamica è una pagina web il cui contenuto è, in tutto o in parte, generato sul momento dal server e può essere quindi diversa ogni volta che viene richiamata. Quando il browser richiede una pagina PHP, il web-server la fa interpretare ad un modulo che rimane sempre caricato in memoria (eliminando il collo di bottiglia descritto precedentemente): durante questo processo il codice PHP viene esaminato ed elaborato dal modulo-interprete del server, dopo di che la pagina viene inviata all utente. Generalmente il codice PHP scrive a sua volta del codice HTML, che verrà visualizzato dal browser e che rappresenta il risultato dell elaborazione del software. In ogni caso il server invierà solamente una pagina HTML senza codice PHP al suo interno e quindi tutto il processo è nascosto agli occhi dell utente. Anche sul versante client si sono sviluppate tecnologie per rendere vive e dinamiche le pagine web, JavaScript è una delle più celebri. Si tratta di un linguaggio di scripting integrato nel codice HTML ma che, a differenza del PHP, non viene interpretato dal server bensì raggiunge immodificato il browser dell utente ed è quest ultimo a processare ed elaborare il codice. 7 In realtà ASP è il nome di una tecnologia sviluppata da Microsoft, i linguaggi usati sono JScript e VBScript sempre prodotti da Microsoft

13 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 7 Il codice JavaScript si interfaccia, attraverso il DOM*, agli elementi che compongono il codice HTML permettendo di creare pagine web interattive. JavaScript apporta due grossi vantaggi. Il primo consiste nel fatto che, potendo accedere al codice e quindi agli elementi costituenti di una pagina web attraverso il DOM, si possono creare interfacce dinamiche che siano coerenti con la situazione del momento; sullo schermo appariranno solamente i bottoni, i campi di testo e l impaginazione adatta all operazione che si deve svolgere creando pagine pulite ed intuitive. Il secondo è che molti compiti spettanti tradizionalmente al server possono essere svolti da JavaScript e quindi dal browser, garantendo l immediatezza del risultato. L esempio classico è la convalida dei dati immessi dall utente in un form: quando si preme sul tipico bottone Invia! il codice JavaScript controlla che i dati immessi siano corretti e ben formattati in modo che il software lato-server riceva sempre dati coerenti e non debba assumersi l onere del controllo. Inoltre, in caso di errore, la segnalazione è immediata e non si ha l impegno del processo di comunicazione con il server. Un altro vantaggio è che il server, al posto di inviare i dati della risposta formattata staticamente in HTML, può fornirli ad una funzione JavaScript di impaginazione, e quindi personalizzati dal punto di vista grafico dal codice lato-client; così facendo il software sul server può essere progettato in modo più generico e servire le esigenze di diversi siti web. Recentemente sta facendosi largo una nuova frontiera nel campo delle applicazioni Web: le Rich Internet Application o, brevemente, RIA. 1.7 Le Rich Internet Application Come abbiamo visto, il codice JavaScript può rendere l interfaccia più dinamica, intuitiva ed ordinata ma non risolve il maggior problema delle applicazioni Web tradizionali, ossia permane il fatto che il browser debba inviare dati verso il server, aspettare la risposta e caricare la pagina da visualizzare contenente la risposta. Purtroppo, sebbene le tecnologie illustrate precedentemente risolvano molti dei problemi dell architettura client-server classica, non risolvono tale inconveniente. Questo ciclo non si ripete solo quando l utente richiede l elaborazione di dati notevoli, ad esempio l inseri-

14 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 8 mento del proprio nominativo in un database* o la richiesta di visualizzare la mappa di una zona geografica, ma anche quando chiede di accedere ad una diversa sezione dell applicazione. Tutto questo porta ad avere molti tempi di attesa ed una interfaccia poco reattiva. Le RIA si avvalgono di uno strato software che viene scaricato dal web prima dell inizio dell applicazione oppure, come il più delle volte accade, scaricato ed installato, una sola volta, per essere utilizzato anche successivamente, generalmente come plugin per il proprio tipo di browser. Due esempi notevoli sono Java e Flash. Java prevede che l utente esegua il download 8 del Java Runtime Environment un client engine (cioè quello strato software che funge da supporto per le applicazioni client citato poc anzi) che permette a sua volta di scaricare ed eseguire del software lato-client sulla macchina dell utente sia stand-alone*, cioè come se fosse una normale applicazione Desktop, sia nella forma di Applet, software ad interfaccia grafica contenuto all interno delle pagine web visualizzate da un browser. Flash funziona analogamente: il client engine, in questo caso, si chiama Flash Player ma, a differenza di Java, viene quasi esclusivamente usato per creare siti dotati di una interfaccia notevolmente migliore rispetto a quella del Web tradizionale. Adobe ha recentemente sviluppato AIR un Runtime Environment studiato appositamente per realizzare applicazioni Desktop mediante numerose tecnologie tra cui Flash. Le RIA superano due dei grossi problemi del Web dinamico classico: lo scarso appeal grafico di un interfaccia lontana dal look & feel dei software Desktop e la mancanza di reattività dell applicazione per i continui cicli di ricarica delle pagine. Vediamo perché le RIA superano questi problemi. Abbiamo parlato del client engine, questo è un programma che gira in background sulla macchina dell utente e svolge due funzioni. In primo luogo fornisce una API* standard che, oltre a permettere la compatibilità del software, da questa derivato, su qualsiasi sistema operativo per cui esista una versione del client engine, fornisce una famiglia di widget* molto più vasta, flessibile e graficamente appetibile rispetto a quella del Web tradizionale e consente una gestione degli eventi e dell interattività molto più sofisticata e 8 vedi voce scaricare nel Glossario

15 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 9 Server L applicazione comunica con il server attraverso il Runtime Environment Java Class file o Swf file Internet JRE o Flash Player Browser Client Figura 1.1: Schema di funzionamento di una RIA scritta in Java o Flex

16 CAPITOLO 1. APPLICAZIONI INTERNET E WEB 10 di semplice realizzazione (ad esempio il drag&drop, cioè il cliccare su un oggetto trascinarlo e depositarlo in un altra posizione, è spesso macchinoso da implementare e gestire con il solo ausilio di HTML e JavaScript). In secondo luogo l applicazione client risiede già totalmente, o quasi, sul client pertanto l utente non deve più aspettare l interazione col server con i suoi tempi di attesa per l invio e la ricezione dei dati; l interfaccia risulta più reattiva in quanto le sue componenti sono già presenti in locale e non si deve comunicare al server quale sezione si vuole utilizzare. Inoltre il trasferimento di dati avverrà solo più per operazioni che, ovviamente, non possono essere risolte lato-client, ad esempio l inserimento di informazioni su un database. Il client-engine, che come abbiamo detto funziona in background durante l esecuzione dell applicazione vera e propria, compie operazioni di comunicazione asincrona che permettono al software di scambiare dati col server mentre il flusso delle elaborazioni o il colloquio del software con l utente prosegue. Più precisamente mentre si sta lavorando con l applicazione, questa è in grado di anticipare quali potrebbero essere i prossimi dati di cui potrebbe aver bisogno da parte del server e scaricarli prima della richiesta effettiva, velocizzando la risposta del programma. Questo scambio di dati asincrono permette anche alle RIA di aggiornare dati in tempo reale, cosa che nelle applicazioni Web tradizionali comporta una noiosa ricarica della pagina da parte del browser con evidente perdita di tempo. Tutte queste caratteristiche illustrano il termine Rich delle RIA.

17 Capitolo 2 Lo stato dell arte delle RIA e Adobe Flex Introduzione In questo capitolo si illustrano tre aspetti delle RIA che, a causa della diversa tecnologia alla base di queste, presentano delle differenze rispetto alle applicazioni Web classiche. Verranno analizzati il problema della sicurezza, alcuni aspetti economici e le limitazioni di questo tipo di applicazioni. Per finire si darà uno sguardo d insieme ad Adobe Flex, lo strumento con cui sono state scritte le applicazioni d esempio. 2.2 Sicurezza In una RIA l utente, raggiungendo via Browser l url dell applicazione, scarica sulla propria macchina un software di cui non conosce nulla se non il sito di provenienza ed, eventualmente, la reputazione del fornitore dell applicazione stessa. Pertanto è necessario in primo luogo che l applicazione non abbia accesso indiscriminato alle risorse del PC. Inoltre, siccome il software deve scambiare dati con il server o con altre risorse su Internet deve essere garantita la sicurezza delle comunicazioni. Per garantire la sicurezza sulla macchina dell utente, il client engine provvede a far girare la RIA in una cosiddetta sandbox. Una sandbox è un 11

18 CAPITOLO 2. RIA E ADOBE FLEX 3 12 meccanismo di sicurezza, una sorta di macchina virtuale che ospita l applicazione fornendole dello spazio temporaneo nella memoria principale e sul disco rigido. Generalmente un sistema operativo non si preoccupa della sicurezza dell applicativo, è l utente che deve fare attenzione ad eseguire sulla macchina software affidabile ricorrendo, al limite, a tool esterni come un antivirus. La sandbox, quindi, limita le operazioni che l applicazione può eseguire e soprattutto non permette che questa possa accedere del tutto alle risorse locali (file sul disco rigido o una videocamera, ad esempio) oppure richiedendo l autorizzazione dell utente. Le sandbox, sono tipicamente progettate per caricare il software direttamente in memoria cercando di scrivere sul disco rigido meno dati possibili e comunque in zone predeterminate e che verranno ripulite alla fine delle operazioni o ad una scadenza fissata. Se l applicazione necessita di accedere a dei file su disco (ad esempio in un programma di fotoritocco l utente potrebbe voler modificare immagini già presenti sulla macchina) la sandbox non permette che questi vengano selezionati e letti senza l assenso dell utente. Inoltre non permette al programma ospitato di accedere ad hardware particolare come microfoni e webcam senza permesso. Riguardo alla sicurezza delle comunicazioni client-server la maggior parte delle tecnologie RIA prevede la cifratura di ogni messaggio inviato e ricevuto. Un altro controllo praticato dalla sandbox è quello sul dominio* di appartenenza del codice eseguito: se si sta eseguendo un applicazione scaricata da un certo sito, tutto le istruzioni del programma devono provenire dallo stesso dominio, in altre parole non è possibile, salvo dietro autorizzazione, che il software in esecuzione prelevi ed esegua del codice fornito da siti terzi, all insaputa dell utente. Altre requisiti delle RIA per ottenere buoni livelli di sicurezza non dipendono comunque dal client engine e dalla relativa sandbox. Due aspetti sono particolarmente importanti. Innanzitutto i controlli lato server, che devono garantire che nessun malintenzionato possa alterare il software che verrà inviato all utenza. In secondo luogo la possibilità di poter esaminare il codice dell applicazione stessa. Nelle applicazioni web standard il codice HTML e JavaScript raggiunge il client come un semplice file di testo, questo permette

19 CAPITOLO 2. RIA E ADOBE FLEX 3 13 alla comunità informatica di esaminare l applicazione e di segnalare eventuali falle nella sicurezza. Molte tecnologie RIA prevedono che il software venga inviato in un formato compilato*, interpretato dal client engine 1, che non è direttamente esaminabile. Tuttavia esistono tool, a volte sviluppati e distribuiti dalla stessa casa produttrice della tecnologia RIA in questione, che permettono di ricostruire il codice sorgente* da quello compilato.[8] 2.3 Aspetti economici Le RIA rappresentano una notevole evoluzione nel mondo delle applicazioni web il che porta ad effettuare alcune considerazioni sui costi di produzione, gestione ed utilizzo di tali applicazioni. Fra i vantaggi annoveriamo un abbassamento dei costi di produzione delle applicazioni, un minor consumo di banda* da parte del server e una miglior distribuzione dei carichi di lavoro computazionale tra client e server. La diminuzione dei costi di produzione è dovuta al fatto che le RIA utilizzano nuovi linguaggi di programmazione che semplificano di molto lo sviluppo delle medesime. Un esempio notevole è il linguaggio Java. Java è un linguaggio che viene compilato in un formato chiamato bytecode che viene interpretato da una macchina virtuale, il già citato Java Runtime Environment, di cui esistono versioni per tutti i sistemi operativi più diffusi. Pur offrendo prestazioni inferiori rispetto ai linguaggi che vengono compilati in formati eseguibili permettono agli sviluppatori di creare applicazioni che funzioneranno identicamente su qualsiasi piattaforma riducendo i costi di produzione. La minor velocità di esecuzione è comunque irrilevante rispetto ai tempi di attesa che si verificano nelle applicazioni Web durante le comunicazioni col server anche se le RIA, come abbiamo visto, riducono questo problema. Bisogna notare che i linguaggi del calibro di Java non devono essere visti come semplici linguaggi di scripting per lo più utilizzati per rendere maggiormente interattive le pagine Web con poche righe di codice ma permettono di creare complesse applicazioni. Sono provvisti di tutte le caratteristiche di linguaggi di elezione come il C++, come ad esempio l essere totalmente ad 1 L utilizzo di un formato compilato è dovuto a motivi di migliori performance

20 CAPITOLO 2. RIA E ADOBE FLEX 3 14 oggetti*, con l aggiunta di funzionalità di garbage collection* e, di notevole importanza, la possibilità di sfruttare vaste librerie di codice già presente sulla macchina (generalmente comprese nel Runtime Environment scaricato ed installato in precedenza) riducendo i tempi di download dell applicazione. Per quel che riguarda il consumo di banda da parte del server si deve considerare che questo deve fornire assistenza, in termini di scambio dati e potenza di calcolo, ad ogni client che sta utilizzando l applicazione. Siccome le RIA non necessitano di un continuo scambio di dati con il server, questo risulterà meno stressato ed inoltre la banda necessaria affinché questo possa rispondere a tutte le istanze dell applicazione risulterà ridotta con ovvie riduzioni dei costi di gestione. Infine consideriamo la miglior distribuzione dei carichi computazionali fra client e server. Nelle applicazioni Web classiche il computer client deve solamente far girare un browser che visualizzerà una manciata di widget pertanto il potenziale di un qualsiasi computer recente verrà scarsamente utilizzato; nelle RIA invece la stessa macchina deve far funzionare una applicazione con grafica ed interfaccia realistica del tutto analoga ad applicazione Desktop anche molto complessa. Di conseguenza il modello RIA sposta il carico di lavoro dal server ai client ma mentre il primo è generalmente oberato di lavoro i secondi sono tendenzialmente inoperosi. In una azienda i cui dipendenti utilizzino delle applicazioni RIA in una Intranet* questo è un aspetto da considerare insieme al fatto che i dipendenti saranno costretti a minori perdite di tempo necessari ai continui ricaricamenti delle pagine web del Web dinamico classico. Uno dei punti chiave del successo delle RIA, ovvero il fatto che la maggior parte dei componenti dell applicazione vengano scaricati e fatti girare sul client, porta però un inconveniente. Il risiedere dell applicazione sul client rappresenta un problema agli occhi del produttore perché inevitabilmente la proprietà intellettuale del software sarà esposta. Inoltre il codice è il più delle volte chiaramente leggibile o facilmente decompilabile con degli appositi strumenti. Bisogna tenere conto però che le parti veramente sensibili dell applicazione, come ad esempio algoritmi particolari il cui sviluppo ha comportato investimenti onerosi, possono rimanere al riparo da occhi indiscreti sul server. Inoltre molte delle tecnologie

21 CAPITOLO 2. RIA E ADOBE FLEX 3 15 create per sviluppare RIA sono open source*. Questo ha portato alla nascita di comunità di appassionati in tutto il mondo che sviluppano e mettono a disposizione di tutti librerie e framework* che fungono da base per nuovi software i cui costi di produzione si riducono notevolmente con conseguente diminuzione di prezzo per il cliente finale.[3, 4] 2.4 Tipi di RIA e confronti Esistono tre tipologie di RIA. La prima è quella la cui tecnologia rappresentante principale è AJAX. Si tratta del connubio tra JavaScript e XML, un linguaggio di mark-up, che fornisce un oggetto software chiamato XMLHttpRequest (la cui implementazione non è ancora standardizzata e varia a seconda del browser) utilizzato dagli sviluppatori per fornire comunicazioni asincrone col server.[5] Alcune famose applicazioni sono basate su questa tecnologia, la più celebre delle quali è Google Maps 2. Questo tipo di RIA ha il pregio di utilizzare tecniche estranee a quelle del Web classico solamente per le comunicazioni asincrone, quindi l applicazione non necessita di plugin da installare e, proprio per questo motivo, assomiglia alle pagine Web tradizionali risultando spesso più familiare all utente pur non offrendo le potenzialità grafiche delle RIA basate su client engine esterni. I problemi di questo approccio sono quelli già visti per le applicazioni Web tradizionali cioè le incompatibilità dei vari browser, delle relative implementazioni del DOM e dell interprete JavaScript, senza contare che quest ultimo deve essere attivato nelle impostazioni del browser. La seconda tipologia di RIA è costituita da quei software che vengono gestiti da un plugin per il tipo specifico di browser e che, tramite questo, vengono visualizzati. Per fare funzionare queste applicazioni bisogna ottenere e installare il plugin adatto. Generalmente però appena raggiunta la pagina dell applicazione, tramite poche linee di codice JavaScript, il browser ci invierà automaticamente alla pagina di download del plugin sul sito del produttore senza contare che l installazione deve essere effettuata una sola volta ed è, di norma, indolore. L applicazione vera e propria deve essere scaricata pressoché per intero e questo può essere un processo lento per gli 2 consulta per ulteriori approfondimenti

22 CAPITOLO 2. RIA E ADOBE FLEX 3 16 utenti che non dispongono di una connessione a banda larga. Il plugin si occupa generalmente di informare l utente sull avanzamento dell operazione di download visualizzando a schermo una barra di progresso*, ma questo potrebbe comunque scoraggiarsi ed abbandonare la pagina prima della fine. Bisogna dire che i plugin possono essere impostati per conservare il software nella cache* del browser per velocizzare l avvio nelle sessioni successive alla prima. Inoltre i programmatori possono progettare l applicazione in modo che venga visualizzata l interfaccia principale in tempi ragionevoli e solo successivamente scaricare il resto, in modo da incoraggiare l utenza ed offrire velocemente le funzionalità basilari. Le applicazioni basate su tecnologie simili ad AJAX non sono soggette a tali limitazioni. Un altro problema, anche se marginale,è rappresentato dalla confusione che viene a generarsi tra i comandi dell interfaccia della RIA e quelli del browser: l utente di una applicazione di fotoritocco potrebbe premere il bottone di stampa del browser e, invece di ricevere su carta la foto appena editata, ottenere la stampa della pagina Web contenente l interfaccia della applicazione stessa, oppure premere il pulsante Indietro sempre del browser ed uscire del tutto dalla pagina del software pensando invece di tornare alla schermata precedentemente usata. Una limitazione di questa seconda tipologia è la perdita di visibilità nei motori di ricerca*, infatti questi, mediante software appositi, scandagliano in continuazione l intero World Wide Web per indicizzare le pagine analizzando il codice HTML (o XML) ma non il contenuto delle RIA. Questo problema è però superabile aggiungendo del testo HTML nelle pagine web contenti l applicazione che ne illustri le funzionalità oppure sfruttare appositi tag del codice HTML come <title> come illustrato in [10]. I software sviluppati con la tecnologia AJAX non presentano questo problema. L ultima famiglia è quella delle applicazioni che non hanno bisogno di essere ospitate all interno di un browser. L utente trova il software che gli interessa navigando il Web, clicca un link che comanda al client engine di scaricare il programma che verrà poi utilizzato stand-alone senza l ausilio del browser come se fosse una normale applicazione Desktop. Anche in questo caso il software può essere conservato in una directory* del disco rigido per

23 CAPITOLO 2. RIA E ADOBE FLEX 3 17 velocizzare la partenza nelle successive sessioni o per essere utilizzato offline* per quelle operazioni che non richiedono servizi da parte del server. Inoltre una volta scaricata l applicazione per la prima volta è possibile avviarla usando le icone del proprio Desktop[6], esempi di tecnologie che permettono lo sviluppo di tali applicazioni sono Java Web Start e Adobe AIR (conosciuto anche come Apollo ). Questo approccio evita la confusione di avere a schermo sia l interfaccia del browser sia quella della RIA. Un problema condiviso da tutte tre le tipologie deriva proprio da una delle caratteristiche principali delle RIA: lo scambio di dati asincrono fra client e server. Negli applicativi Web tradizionali basati su CGI o pagine PHP o ASP l utente deve sempre fare richiesta esplicita di inviare dati al server; generalmente compila un form, invia i dati premendo un bottone e aspetta la risposta con l inevitabile caricamento di una nuova pagina. In ogni caso sa che deve aspettare una risposta. Nelle RIA invece lo scambio di dati è trasparente agli occhi dell utente; se però qualcosa non funziona a dovere e i dati non vengono ricevuti, l applicazione può risultare congelata suggerendo a chi sta usando il software che ci sia qualche errore di programmazione al posto di un banale e momentaneo disservizio. 2.5 Adobe Flex 3 Flex 3 di Adobe è una linea di prodotti integrati utili allo sviluppo di RIA. L ambiente di sviluppo è costituito da una versione modificata di Eclipse, un IDE* open source, che comprende un editor*, un debugger* e componenti per la costruzione visuale del layout e per la gestione dei file del progetto. Flex permette lo sviluppo di codice che verrà compilato in bytecode, il quale verrà interpretato e trasformato in formato eseguibile per mezzo del Flash Player runtime, il client engine utilizzato da questa tecnologia. Adobe stima che ll Flash Player runtime sia attualmente installato su più del 97% dei PC connessi ad Internet. Il modello di sviluppo si basa su MXML e ActionScript (versione 3.0). MXML è un linguaggio di mark-up utilizzato per la descrizione dei componenti e della struttura dell interfaccia. Le specifiche di MXML definiscono tag che forniscono un collegamento fra gli elementi della GUI con i dati e gli

24 CAPITOLO 2. RIA E ADOBE FLEX 3 18 algoritmi dell applicazione. Pertanto il codice MXML risulterà di più facile lettura perché il codice responsabile del comportamento dei widget e delle procedure di calcolo, e i dati, che dovranno essere visualizzati ed elaborati, sono contenuti in altri file. A parte le istruzioni relative all aspetto estetico dei componenti della GUI che di norma, ma non obbligatoriamente, sono contenuti nei cosiddetti fogli di stile, il nucleo del software viene programmato tramite codice ActionScript. ActionScript è un linguaggio di programmazione orientato agli oggetti basato, come Javascript del resto, su ECMAScript, un linguaggio standardizzato dall European Computer Manufacturers Association. Con Action- Script si sviluppa tutta la logica della parte client dell applicazione. Questo comprende il comportamento dell interfaccia, cioè cosa deve fare il programma quando si clicca su un bottone o quando si trascinano oggetti col mouse (drag&drop), e le varie operazioni per cui il software è preposto come, ad esempio, il calcolo delle rate di un mutuo o la visualizzazione di una mappa etc.. Inoltre è possibile rendere l interfaccia dinamica, cioè si può, ad esempio, far vedere un bottone solo quando è possibile e logico premerlo per prendere una decisione. Questa possibilità è ottenibile o mediante appositi tag MXML che definiscono come debba presentarsi l interfaccia in ben determinati momenti dell applicazione, oppure per via programmatica, mediante ActionScript, impostando la proprietà visible dei componenti interessati al valore true o false a seconda che questi debbano risultare visibili o meno. Flex fornisce una ricca API che permette varie operazioni, tra cui il disegno di primitive grafiche, la creazione di contenitori, cioè widget in grado di ospitarne altri al loro interno, e la gestione del comportamento di quest ultimi in seguito all interazione con l utente o al verificarsi di determinati eventi. Questi caratteristiche consentono allo sviluppatore di estendere la libreria dei widget con elementi totalmente personalizzati nel design e nelle funzionalità. Questi nuovi elementi, al pari di quelli predefiniti, possono essere aggiunti alla GUI dell applicazione mediante un tool visuale di Flex che permette di disegnare l interfaccia intuitivamente con pochi click di mouse e notevole risparmio di tempo. Un altro componente di Flex è il Flex Data Services uno strato software,

25 CAPITOLO 2. RIA E ADOBE FLEX 3 19 risiedente sul server, che si occupa di ottimizzare lo scambio di dati col client, ma soprattutto di integrare le tecnologie già presenti sul server in modo che siano sfruttabili dall applicazione ed, eventualmente, di permettere a questa di comunicare anche con altri server e altri client su Internet.[7]

26 Capitolo 3 Testo 3D 3.1 Introduzione Come prima applicazione di Adobe Flex introduciamo un applicazione grafica scritta originariamente da Pavel Kaluzhny per il pacchetto software Flash con il linguaggio ActionScript 2.0 (vedi [24]). Nello svolgimento della tesi l applicazione è stata portata in ActionScript 3.0 per poter funzionare in Flex 3, ciò ha comportato alcuni cambiamenti dovuti a modifiche apportate da Adobe alle librerie di base del linguaggio e all aggiunta di righe di codice atte a sostituire quelle operazioni che in Flash si possono eseguire con gli strumenti di posizionamento, dimensionamento ecc. presenti nell interfaccia ma che sono assenti in Flex. Il programma visualizza un campo di testo i cui caratteri si muovono in un ambiente tridimensionale indipendentemente l uno dall altro. La disposizione dei caratteri è tale da ricreare l effetto lenzuolo, il testo sembra essere scritto su una tela invisibile che viene sventolata (vd. Figura 3.1). 3.2 Modello matematico Le librerie standard di disegno di Flex (cioè quelle fornite insieme al pacchetto e non prodotte da terzi) non prevedono funzioni di disegno 3D, questa applicazione pertanto simula l ambiente tridimensionale proiettando gli oggetti sul piano OXY come se osservati da una telecamera posta nel 20

27 CAPITOLO 3. TESTO 3D 21

28 CAPITOLO 3. TESTO 3D 22 Figura 3.1: Alcuni frame dell animazione del testo. punto (0, 0, V P f) 1. V P f è un numero arbitrario ma sufficientemente grande (in valore assoluto) da permettere un inquadratura ragionevole del piano proiettivo. Il testo da visualizzare viene scomposto nei singoli caratteri, ad ognuno di questi viene assegnata una celletta quadrata virtuale che lo contiene. Le 1 Le proiezioni trasformano punti da uno spazio n-dimensionale ad uno spazio di dimensioni inferiori ad n. Nella grafica computerizzata si fa larghissimo uso di trasformazioni di proiezione dal 3D al 2D. La proiezione di un oggetto 3D è definita da un insieme di rette di proiezione, chiamate proiettori, aventi origine comune in un punto detto centro di proiezione o punto di vista. I proiettori passano attraverso tutti i punti dell oggetto 3D e quindi intersecano un piano di proiezione formando la proiezione vera e propria. Grazie al fatto che la proiezione di un segmento è a sua volta un segmento, non è necessario proiettare tutti gli infiniti punti rappresentanti gli oggetti di una scena ma, al solito, risulta sufficiente proiettare i vertici dei segmenti di rappresentazione degli oggetti stessi. Questa classe di proiezioni prende il nome di proiezioni geometriche piane in quanto i proiettori sono linee rette e il codominio bidimensionale è il piano. Le proiezioni geometriche piane possono essere classificate in proiezioni prospettiche e proiezioni parallele. La distinzione risiede nella relazione esistente tra centro e piano di proiezione. Si parla di proiezione prospettica nel caso in cui la distanza tra il centro ed il piano di proiezione sia finita; al contrario, nel caso di distanza infinita si parla di proiezione parallela.(citazione da [14])

29 CAPITOLO 3. TESTO 3D 23 cellette sono contigue e i vertici di queste giacciono sul piano di coordinate (u, v), inoltre il lato ha lunghezza 1 (vd. Figura 3.2). u v (0,0) (1,0) (2,0) (6,0) (0,1) H h e l l o, a v e a n i c e d a y! (0,2) (1,2) (4,2) (5,3) Figura 3.2: etichettatura dei vertici delle celle contenenti i caratteri, le etichette sono le coordinate dei vertici nel piano (u, v) Per ogni carattere si passano alla funzione makeshape 2, come parametri, le coordinate (u, v) di tre dei quattro vertici della cella corrispondente. La funzione in questione assegna ad ogni vertice le coordinate (x, y, z) dello spazio tridimensionale. La scelta di quali coordinate assegnare ad ogni vertice è completamente libera ma siccome la posizione della cella, e quindi del carattere, deriva dal posizionamento dei tre vertici nello spazio, per ottenere effetti gradevoli è necessario che le formule usate per l assegnamento godano di una certa regolarità. Ovviamente la disposizione relativa di una cella con le confinanti viene mantenuta. Ad ogni frame dell animazione la celletta si dispone nello spazio tridimensionale in modo differente rispetto al frame precedente, creando così il movimento del carattere. Possiamo vedere alcuni screenshot del movimento di una lettera in Figura 3.3. Il passo successivo è proiettare i tre punti di ogni cella sul piano OXY. 2 Il codice della funzione makeshape viene presentato nel paragrafo 3.4

30 CAPITOLO 3. TESTO 3D 24 Figura 3.3: Movimento di una singola lettera in alcuni frame dell animazione.

31 CAPITOLO 3. TESTO 3D 25 (x,y,z) (x,0,z) y O (x,0,0) (x,y,0) x (0,0,VPf) z Figura 3.4: Proiezione della coordinata x sul piano 0XY Indicato con (x, y ) la proiezione del punto (x, y, z) sul piano OXY, in Figura 3.4 possiamo notare che il triangolo di vertici O, (0, 0, V P f) e (x, 0) e quello di vertici (0, 0, z), O e (x, 0, z) sono omotetici pertanto vale la proporzione V P f/x = (V P f z)/x e pertanto x = (V P f x)/(v P f z). Discorso analogo per la proiezione della coordinata y (vedi [14]). Questa operazione viene svolta dalla funzione projectpoint 3. A questo punto si applicano delle trasformazioni affini al disegno dei singoli caratteri in modo che questi sembrino scritti sulla celletta immersa nello spazio 3D. L applicazione, proiettati i tre punti di ogni cella che chiameremo P 0, P 1 e P 2, crea un oggetto Sprite contenente all interno un oggetto Text- Field. Successivamente posiziona a schermo l oggetto Sprite alle coordinate di P 0. Siamo, a questo punto nella situazione iniziale di Figura 3.5. Nell attuale versione di ActionScript è possibile applicare ad ogni oggetto grafico delle matrici di trasformazione che lavorano in coordinate omogenee (vedi [22]). 3 Il codice della funzione projectpoint viene presentato nel paragrafo 3.4

32 CAPITOLO 3. TESTO 3D 26 lp P₂ (1) P₀ºP ₀ la A P ₂ P ₁ P₁ lp P₂ (2) P₀ºP ₀ la A P ₂ P₁ P ₁ lp P₂ (3) P₀ºP ₀ A P ₂ P₁ P ₁ P₂ºP ₂ (4) P₁ºP ₁ P₀ºP ₀ A Figura 3.5: Trasformazione affine della cella contenente il carattere per disporsi coerentemente ai vertici proiettati

33 CAPITOLO 3. TESTO 3D 27 Le matrici sono della forma: M = a b 0 c d 0 tx ty 1 (3.1) Per capire meglio il procedimento ricordiamo che dalla teoria delle trasformazioni affini conosciamo il significato geometrico di ogni elemento della matrice indicata in 3.1: a e d rappresentano i parametri di scaling rispetto a x e y, b e c quelli della deformazione di taglio rispettivamente in direzione dell asse y e dell asse x mentre tx e ty sono i parametri di traslazione che qui non interessano perchè le trasformazioni, come detto precedentemente, sono fatte rispetto all oggetto contenitore Sprite già posizionato in P 0. I punti trasformati di coordinate (x, y, 1) si ottengono ponendo (x, y, 1) = (x, y, 1) M. Si vuole fare in modo che i vertici del TextField contenente il carattere P 0, P 1, P 2 combacino, tramite trasformazione affine, con i rispettivi punti proiettati. Col posizionamento dello Sprite nel punto P 0 si ottiene P 0 P 0. Siccome qualsiasi trasformazione affine viene calcolata rispetto all origine dell oggetto contenitore, cioè rispetto al punto (0, 0) dello Sprite, le trasformazioni applicate al TextField risulteranno applicate rispetto a P 0 come voluto. Il codice calcola gli angoli α e φ ed applica uno scaling non uniforme al TextField di parametri cosφ lp rispetto all asse x e cosα lp rispetto all asse y dove lp è la lunghezza del segmento P 2 P 0 e la è la lunghezza del segmento P 1 P 0. A questo punto il TextField è scalato in modo tale che i punti P 1 e P 1 abbiano la stessa ordinata e i punti P 2 e P 2 la stessa ascissa. Siamo pertanto giunti al passo (2) di Figura 3.5. Adesso è necessario shiftare la coordinata y di P 2 e la coordinata x di P 1 in modo che si sovrappongano rispettivamente a P 2 e P 1. Ciò si ottiene applicando una deformazione di taglio di parametro sinφ lp rispetto all asse y e uno di parametro sinα la rispetto all asse x. Queste due operazioni ci portano rispettivamente ai punti (3) e (4) di Figura 3.5 ([23]). 3.3 Applicazioni possibili Quale può essere il significato di un applicazione di questo tipo? Con l avvento delle varie tecnologie di banda larga, le pagine web sono diventate

34 CAPITOLO 3. TESTO 3D 28 sempre più ricche di immagini ed animazioni. Si sono create tecnologie per visualizzare applet, java in primis, che eseguendo le istruzioni di disegno del proprio codice permettono di scaricare e visualizzare animazioni senza ricorrere a grossi file gif* o in altri formati bitmap. Teoricamente nulla impedisce di applicare lo stesso principio per la grafica 3D. Dal lato pratico però esiste una certa carenza di librerie per la gestione di contenuti 3D per le applicazioni web fruibili via browser. Vediamo il perchè. La grafica 3D è usata in diversi campi. Per quel che riguarda il campo videoludico le aziende sviluppatrici di giochi si affidano a tecnologie quali OpenGL, Microsoft DirectX o ancora Mesa3D library, cioè a delle librerie che riescono ad accedere a memoria e chip delle schede grafiche usando come interfaccia i driver che vengono forniti dai produttori dell hardware stesso. In questo modo le applicazioni risultano fluide nonostante l enorme mole computazionale della grafica tridimensionale. Questa è generalmente la scelta obbligata per tutti i software in cui velocità, numero elevato di frame per secondo e alta qualità delle immagini si rendono necessari, si pensi ad applicazioni mediche o militari o ai sistemi di CAD. Abbiamo detto che una applicazione web deve essere fruibile da un utenza il più possibile vasta e soprattutto accessibile dal browser. I framework appena descritti sono progettati per i linguaggi C/C++ e per creare eseguibili specifici per un certo hardware e per un certo sistema operativo. Inoltre librerie come le DirectX sono disponibili solo per la famiglia di sistemi operativi Microsoft Windows. Accedere all hardware specializzato per la grafica, disponibile sulla macchina, è indispensabile per ottenere certe prestazioni ma sviluppare una tecnologia indipendente dalla piattaforma per il web non è semplice. Java 3D è una API per grafica tridimensionale per la piattaforma Java. Funziona appoggiandosi a DirectX o OpenGl (dipendentemente dalla piattaforma) fornendo pertanto prestazioni hardware-accelerated. Inoltre è strutturata con uno stile object-oriented. Quest ultimo fatto rappresenta un piccolo collo di bottiglia per le prestazioni insieme al fatto che il codice compilato deve essere interpretato in real-time dalla macchina virtuale Java. Le prestazioni sono comunque ottime e le applicazioni possono girare all interno del browser come applet o vere e proprie RIA.

35 CAPITOLO 3. TESTO 3D 29 A dimostrazione di quanto sia impegnativo per un azienda creare e mantenere un simile progetto, basti pensare alla storia di Java 3D 4 : inizialmente sviluppato da quattro aziende del calibro di: Intel, Silicon Graphics, Apple e Sun; lo sviluppo e mantenimento del framework venne interrotto per un paio d anni ( ), successivamente ne venne rilasciato il codice in modo da combinare il lavoro di numerosi volontari con quello di Sun. Adobe non ha rilasciato nessuna libreria per grafica e animazioni tridimensionali né per Flash né per Flex, molto probabilmente perché non esiste una forte richiesta in questo senso da parte dell utenza di questi strumenti di sviluppo. Inoltre Adobe produce Director, pacchetto che permette di portare sul web applicazioni e giochi 3D ma che purtroppo non ha preso molto piede per la dimensione del plug-in necessario alla visualizzazione dei contenuti 5 e che vede la sua ultima versione datata all anno Esiste tuttavia il promettente progetto Papervision3D 6, una libreria open source scritta in ActionScript 3.0 che consente la gestione di scene 3D con buone prestazioni nonostante la totale mancanza di accesso alle potenzialità hardware delle schede grafiche. Data la carenza, o addirittura mancanza, di tool ufficiali, chi vuole sviluppare piccoli effetti grafici 3D o piccoli giochi o limitate applicazioni tridimensionali a scopi didattici è portato a sviluppare da sé un motore 3D personalizzato per non appoggiarsi a codice di terze parti che molte volte è a pagamento o privo di documentazione e supporto o il cui mantenimento potrebbe essere interrotto in qualsiasi momento. Questa applicazione del testo 3D permette di mappare un campo di testo su una qualsiasi superficie tridimensionale ed è molto versatile. In molti siti di informazione sono presenti dei piccoli riquadri dove le notizie o della pubblicità scorre in verticale verso l alto con le prime righe che scompaiono all uscita del riquadro e quelle nuove che compaiono sul fondo. Come vedremo nel paragrafo 3.4, editando opportunamente la funzione makeshape, si può ottenere un effetto analogo ma con il testo che si perde pian piano 4 vedi Bibliografia [15] 5 vedi Bibliografia [16] 6 vedi Bibliografia [16]

36 CAPITOLO 3. TESTO 3D 30 nello spazio come i titoli di di una famosa saga di film di fantascienza 7 (vd. Figura 3.6). Figura 3.6: Effetto con il testo che si perde nello spazio. Sempre con opportune modifiche alla funzione makeshape possiamo mappare il testo su qualsiasi tipo di superficie ottenendo vari effetti. In Figura 3.7 vediamo il testo scritto sopra una supeficie che simula l ondulazione di una bandiera, mentre in Figura 3.8 i caratteri appaiono scritti sulla superficie laterale di un cilindro. Figura 3.7: Il testo sembra essere stampato su una bandiera mossa dal vento. 7 Star Wars, tutti gli episodi

37 CAPITOLO 3. TESTO 3D 31 Figura 3.8: I caratteri del testo possono essere mappati su una qualsiasi superficie. In questo caso un cilindro che ruota rispetto al suo asse di simmetria.

38 CAPITOLO 3. TESTO 3D 32 L idea di fondo può risultare utile anche per portare su web contenuti televisivi. L attuale sigla di apertura di Tgcom, rubrica informativa televisiva, sfrutta un effetto del tutto simile a questo, visualizzando del testo che si muove in ambiente 3D. Si possono utilizzare applicazioni analoghe a questa per portare sul sito, magari come intro, la stessa sigla evitando però di sovraccaricare la pagina con filmati pesanti da scaricare. Infatti il codice compilato da Flex risulta enormemente più piccolo in termini di byte di un qualsiasi filmato raster. 3.4 Analisi del codice Abbiamo detto che la funzione makeshape è quella che determina come verrà visualizzato il testo nell ambiente 3D. Analizziamo il codice della funzione nel primo caso visto, cioè quello di Figura 3.1 : private function makeshape(u:number, v:number, p:object):void { p.x = (u - 8) * 20; p.y = (4 - v) * 14 + Math.cos(Math.sqrt((u - 8) * (u - 8) + (3 - v) * (3 - v)) / 2 + timer / 4) * 36; p.z = (v - 4) * 20; } Ricordiamo che i punti verranno proiettati sul piano OXY e che la telecamera è posta in (0, 0, V P f) con, in questo esempio, V P f = 260. L oggetto p rappresenta un punto in R 3 e ha le proprietà x, y e z. Al crescere di v corrisponde un aumento della coordinata z del punto, pertanto le lettere della prime righe appariranno più lontane delle ultime e lo stesso varrà anche i singoli caratteri. Per la coordinata x non c è niente di particolare da segnalare mentre per la y si può notare che il termine Math.cos(Math.sqrt((u 8) (u 8) + (3 v) (3 v))/2 + timer/4) 36 crea un effetto ondulatorio concentrico. Il parametro timer fa muovere il fronte dell onda in quanto viene incrementato di un unità ad ogni frame dell animazione. Vediamo adesso come si può editare il corpo della funzione makeshape per ottenere il testo mappato sulle superfici degli esempi successivi.

39 CAPITOLO 3. TESTO 3D 33 Per il caso di Figura 3.6 abbiamo: p.x = (u - 8) * 20 ; p.y = (4 - v) * 20 +timer; p.z = (v - 4) * 20 -timer; Per quello di Figura 3.7: p.x = (u - 8) * 20; p.y = (4 - v) * 14 + Math.cos(u+timer/10)*20; p.z = (v - 4) * 20; mentre, per l esempio di Figura 3.8 si è usato questo codice: if ( timer < 0 ) { p.x = (u - 8)*11.5; p.y = (4-v)*12; p.z = 0; } else if ( timer <= 20 ) { p.x = (u - 8)*11.5; p.y = (4-v)*12; p.z = -timer*10- (4-v)*timer; } else if ( timer <= 40 ) { var x:number; var z:number; x = (u - 8)*11.5; p.y = (4-v)*12; z = -(4-v)*20; p.x = x * Math.cos((timer-21)/6) - z * Math.sin((timer-21)/6); p.z = x * Math.sin((timer-21)/6) + z * Math.cos((timer-21)/6); } else if ( timer <= 60 ) { p.x = (8-u)*11.5*(60-timer)/20 + (timer-40)/20*70*math.sin((8-u)/6); p.y = (4-v)*12; p.z = (4-v)*(60-timer) - (timer-40)*3.5*math.cos((8-u)/6);

40 CAPITOLO 3. TESTO 3D 34 } else { x = 70*Math.sin((8-u)/6); p.y = (4-v)*12; z = -70*Math.cos((8-u)/6); p.x = x * Math.cos((timer-61)/6) - z * Math.sin((timer-61)/6); p.z = x * Math.sin((timer-61)/6) + z * Math.cos((timer-61)/6); } p.z=p.z+200; dove i vari controlli sul valore della variabile timer, che viene incrementata di una unità ad ogni frame, fanno sì che l animazione sia composta da diversi momenti. Quello finale dimostra come il testo possa essere mappato su una superficie solida, in questo caso un cilindro. Vediamo adesso la funzione projectpoint che proietta i vertici delle cellette da R 3 sul piano proiettivo: private function projectpoint(p:object):void { p.x = p.x * VPf / (VPf - p.z); p.y = -p.y * VPf / (VPf - p.z); } A questa funzione viene passato l oggetto p che rappresenta un punto in R 3 ed essa provvede a calcolare le coordinate x e y sul piano OXY le quali vengono assegnate a p stesso. In conclusione osserviamo il codice della funzione setpos: public function setpos (p0x:number, p0y:number, p1x:number, p1y:number, p2x:number, p2y:number):void { x=p0x; y=p0y; graphics.clear(); var alpha:number=math.atan2(p1x-p0x,p1y-p0y);

41 CAPITOLO 3. TESTO 3D 35 var phi:number=math.atan2(p2y-p0y,p2x-p0x); var transfmatrix:matrix = new Matrix(); var la:number=math.sqrt((p1x-p0x)*(p1x-p0x)+(p1y-p0y)*(p1y-p0y)); var lp:number=math.sqrt((p2x-p0x)*(p2x-p0x)+(p2y-p0y)*(p2y-p0y)); transmatrix.a=lp*math.cos(phi)/24; transmatrix.b=lp*math.sin(phi)/24; transmatrix.c=la*math.sin(alpha)/24; transmatrix.d=la*math.cos(alpha)/24; tf.transform.matrix=transmatrix; } La funzione setpos è un metodo della classe Char3D che è una sottoclasse della classe Sprite. A questa funzione vengono passate come argomenti le coordinate dei punti P 0, P 1 e P 2. All interno della classe vi è la proprietà tf di tipo TextField. L oggetto Char3D (che, ricordiamo, è uno Sprite) viene posizionato alle coordinate di P 0, dopo di che viene cancellato il disegno del frame precedente dell animazione. Vengono poi calcolati gli angoli α e φ mediante la funzione atan2 della classe Math, questo metodo calcola e restituisce l angolo del punto y/x in radianti, misurato in senso antiorario a partire dall asse x di un cerchio centrato nell origine (citazione dalla documentazione ufficiale di Flex 2). Viene quindi creato un oggetto Matrix che rappresenta una matrice di trasformazione. Questo oggetto gode delle proprietà a, b, c, d e queste vengono impostate come descritto nel paragrafo 3.2. Si noti che le proprietà a, b, c, d vengono divise per una costante (24 nel nostro caso) che dipende dal font scelto e dalla dimensione inizialmente scelta per quest ultimo. Infine la matrice di trasformazione viene applicata all oggetto TextField.

42 Capitolo 4 Simulatore 3D di urti elastici 4.1 Introduzione Sempre inizialmente sviluppata da Pavel Kaluzhny, questa applicazione visualizza un cubo che ruota nello spazio rispetto a due degli assi coordinati con delle sferette costrette al suo interno. Queste sfere, fornite inizialmente di massa e velocità casuali, continuano a muoversi e scontrarsi l un l altra con urti perfettamente elastici in un ambiente inerziale. L energia cinetica complessiva del sistema rimane immutata e pertanto le sferette continuano a muoversi all infinito. Anche in questo caso l applicazione è stata portata da Flash e ActionScript 2.0 a Flex con ActionScript 3.0. Sempre nello svolgimento della tesi, all applicazione è stata aggiunta una GUI mediante la quale si possono controllare i parametri di massa e dimensione di ogni sfera e la rotazione del cubo. Il codice originario prevedeva un espediente tale da ottenere la corretta visualizzazione degli spigoli del cubo solamente per il movimento rotatorio, preimpostato, dato da alcuni angoli prefissati. Con l aggiunta di comandi nell interfaccia in grado di regolare a piacimento la rotazione del cubo rispetto agli assi x e y si è reso necessario un cambiamento del codice. Anche per quel che riguarda le collisioni tra le sfere il codice di Kaluzhny non corrispondeva ad un modello fisico realistico ma solamente ad una approssimazione di questo. È stato pertanto necessario riscrivere l algoritmo relativo. 36

43 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 37 Figura 4.1: Screenshot del simulatore. 4.2 Modello matematico Ad ogni vertice del cubo vengono assegnati delle coordinate nello spazio tridimensionale in modo tale che il baricentro del medesimo sia centrato nell origine. Inizialmente ogni spigolo ha lunghezza uno, valore che viene controllato da un altra variabile per poter gestire la dimensione del cubo con più semplicità. Ad ogni frame dell animazione il cubo viene ruotato rispetto all asse x e all asse y pertanto una funzione calcola le nuove coordinate dei vertici del cubo in seguito alle due rotazioni. La classe Line, che nel codice rappresenta uno spigolo del cubo, importa il disegno vettoriale di una linea originariamente disegnata in Flash e provvede a posizionarla sullo schermo in modo coerente con la proiezione sul piano OXY dei due vertici corrispondenti. Il procedimento è il seguente. Ogni oggetto Line ha come proprietà le coordinate dei due vertici. Il codice provvede a calcolarne le due rotazioni. Successivamente viene calcolata la proiezione prospettica del primo vertice sul piano proiettivo OXY dal punto di osservazione (0, 0, V P f). La linea viene posizionata sullo schermo in corrispondenza di questo punto, quindi, un vertice della linea coincide con la

44 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 38 y Piano proiettivo (1,1,-1) x (-1,1,-1) (-1,-1,-1) (-1,1,1) (1,-1,-1) O (1,1,1) ay (-1,-1,1) ax (1,-1,1) (0,0,VPf ) z Figura 4.2 proiezione del primo vertice dello spigolo mentre il secondo è fuori posizione. Siccome il disegno della linea è importato da un file esterno e non è disegnata mediante il codice, deve essere scalata in modo che anche il secondo vertice coincida col corrispondente vertice dello spigolo. Vengono pertanto calcolate le rotazioni e la proiezione del secondo vertice dello spigolo e il disegno della linea viene scalato con fattori sh x = (p2.x p1.x)/imagewidth e sh y = (p2.y p1.y)/imageheight dove sh x è il fattore di scala rispetto all asse x, sh y è il fattore di scala rispetto all asse y, p k.x e p k.y k = 1, 2 sono le coordinate dei due vertici dello spigolo e imagewidth e imageheight sono larghezza e altezza dell immagine. Immagine che raffigura la linea col primo vertice nell angolo in alto a sinistra e il secondo nell angolo in basso a destra (l immagine vettoriale importata ha larghezza e altezza pari a 100 pixel). A questo punto anche il secondo vertice della linea coincide col secondo vertice dello spigolo in questione (vedi Figura 4.3). Siccome l immagine della linea è importato da un file di Flash in formato vettoriale lo scaling dell immagine non comporta perdita di qualità. Le sfere vengono disegnate come dei cerchi colorati mediante le funzioni di disegno della libreria standard di ActionScript con l accorgimento di ap-

45 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 39 file immagine punti proiettati su OXY p1 p2 primo passo - posizionamento p1 p2 secondo passo - scaling p1 p2 Figura 4.3: Posizionamento dell immagine contenente il disegno di una linea in modo che coincida con lo spigolo del cubo sul piano proiettivo plicare un gradiente, cioè una particolare sfumatura sul bianco, per fornire l illusione di una sfera che rifletta la luce di una sorgente luminosa sulla sua superficie. Il disegno della sfera viene scalato opportunamente, rispettando le formule della proiezione. Ad ogni frame dell animazione il vettore posizione della sfera viene sommato a quello della velocità (ricordiamo che ogni sfera è dotato inizialmente di una certo vettore velocità casuale), successivamente si controlla se la nuova posizione della sfera esce fuori dal cubo come se questo fosse ancora nella posizione iniziale senza aver subito rotazioni ed infine si applicano al centro della sfera le stesse rotazioni del cubo. Così facendo, se si verificano urti contro una parete del cubo è sufficiente cambiare di segno l opportuna coordinata (urto elastico contro parete, la parete è intesa come oggetto di massa infinita). Per quel che riguarda invece le collisioni tra le sfere il codice di Kaluzhny non corrispondeva ad un modello fisico realistico ma solamente ad una approssimazione di questo. È stato pertanto necessario riscrivere l algoritmo relativo. Ricordiamo che in un urto perfettamente elastico, tra due sfere si

46 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 40 conservano la quantità di moto e l energia cinetica totali. Da questo principio si ottiene che in un urto centrale (cioè quando la velocità relativa dei due corpi è diretta secondo la retta che unisce i due centri di massa) la velocità di avvicinamento prima dell urto è opposta alla velocità di allontanamento dopo l urto. Chiamate con v 1,v 2,v fin 1,v fin 2,m 1,m 2 rispettivamente le componenti delle velocità delle due sfere prima e dopo l urto e le masse delle stesse, si ottengono le equazioni: v fin 1 = (m 1 m 2 )v 1 + 2m 2 v 2 m 1 + m 2 (4.1) v fin 2 = (m 2 m 1 )v 2 + 2m 1 v 1 m 1 + m 2 (4.2) In ambiente tridimensionale le cose sono più complesse.indichiamo con P 1 e P 2 i centri delle due sfere. Il codice, che vedremo nel paragrafo 4.6, calcola il vettore P 1 P 2, la sua norma e quindi il versore risultante P 1 P 2 / P1 P 2. Il versore trovato è ortogonale al piano di collisione. Successivamente calcola la componente ortogonale al piano di collisione di v 1. A questo punto ottiene anche la componente parallela al piano semplicemente come differenza di v 1 con la componente ortogonale. Le stesse operazioni vengono svolte anche per v 2. In un urto non centrale le componenti tangenti al piano non subiscono variazioni dopo l urto mentre le velocità scalari nelle direzioni ortogonali al piano obbediscono alle 4.1 e 4.2. Infine i nuovi vettori delle velocità sono uguali alla somma delle componenti ortogonali appena trovate e quelle parallele al piano di collisione che rimangono, come detto sopra, inalterate. 1. Quando in Flex si aggiungono elementi grafici sul monitor bisogna settare l indice relativo alla display list dell oggetto contenitore dell elemento in questione. Flex sovrappone i vari elementi in base alla display list nel senso che gli oggetti risulteranno come disegnati su fogli trasparenti posti uno sopra l altro nell ordine dettato dall indice di ogni elemento. Questi fogli sono impilati a partire dall indice 0 a crescere, per cui un oggetto con un certo indice può risultare sovrapposto ad uno di indice inferiore ma non il contrario. Nella nostra applicazione dobbiamo decidere quando una sfera sta davanti ad un altra e fare lo stesso con gli spigoli del cubo. 1 vedi Bibliografia [11, 12] Per quel che

47 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 41 I vettori delle velocità vengono scomposti in componente ortogonale e parallela Le componenti ortogonali subiscono una variazione, quelle parallele rimangono immutate Figura 4.4: I nuovi vettori velocità sono la composizione della componente parallela e della nuova componente ortogonale

48 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 42 riguarda le sfere si nota facilmente che una sferetta nasconde, parzialmente o meno, tutte quelle che sono più distanti dal centro di proiezione. Ad ogni frame una routine assegna l indice di profondità ad ogni elemento da disegnare in base al valore che viene impostato alla proprietà, di tipo numerico, zposition. Per gli oggetti rappresentanti una sfera il codice assegna alla proprietà zposition la distanza del suo centro dal centro di proiezione. Siccome le sfere sono contenute nel cubo si deduce che un qualsiasi spigolo sta davanti a tutte le sfere oppure dietro a tutte. Il cubo è un poliedro convesso pertanto una faccia, se intendiamo il cubo solido e non con le facce trasparenti, o è totalmente visibile o non lo è per niente. Queste due osservazioni ci permettono di affermare che se si riesce a stabilire che una faccia è visibile allora tutti gli spigoli della medesima devono essere disegnati di fronte alle sfere e viceversa. Dato il particolare centro di proiezione (0, 0, V P f), per stabilire se una faccia è visibile è sufficiente trovare l intersezione del piano che la contiene con la retta di equazioni: { x = 0 y = 0. L intersezione trovata è ovviamente un punto sull asse z. Se il punto trovato ha come coordinata un valore compreso tra 0 e V P f la faccia è visibile altrimenti no. Il codice funziona in questo modo. Ad ogni oggetto Line viene passato un ulteriore punto appartenente ad una delle due facce a cui appartiene il relativo spigolo. A questo punto si possono calcolare i parametri direttori del piano, cioè i parametri a,b,c,d dell equazione ax + by + cz + d = 0, in quanto si conoscono le coordinate di tre punti non allineati. Ricordiamo che, indicati i punti con (x k, y k, z k ) k = 1, 2, 3, tali coefficienti si ottengono mediante l equazione: x x 1 y y 1 z z 1 x 2 x 1 y 2 y 1 z 2 z 1 = 0. x 3 x 1 y 3 y 1 z 3 z 1 L intersezione con la retta si trova semplicemente con z = d/c.

49 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 43 La soluzione si trova assegnando alla variabile zposition dell oggetto Line una costante di valore assoluto maggiore della massima distanza possibile di una sfera dal centro di proiezione e di segno positivo se la faccia contenente lo spigolo risulta visibile, di segno negativo altrimenti. La variabile zposition risulta pertanto impostata per ogni oggetto ed una routine, ad ogni frame, provvede a inserire tutti questi valori in un array, ad ordinarlo in modo crescente, e ad assegnare ad ogni oggetto, come indice all interno della display list, l indice che il relativo valore occupa nell array. Così facendo sia gli spigoli del cubo sia le sfere verranno visualizzate correttamente. Notiamo che uno spigolo appartiene contemporaneamente a due distinte facce del cubo e che noi calcoliamo l equazione di una delle due facce, quella contente il terzo punto passato all oggetto. Questo non crea problemi perché se uno spigolo appartiene contemporaneamente ad una faccia visibile ed una invisibile allora le sferette e lo spigolo in questione non possono essere intersecate da uno stesso proiettore e pertanto non si presentano problemi di sovrapposizione erronea della sfera sulla linea o viceversa. Il procedimento illustrato è una semplice variante del backface culling o backface removal mediante i quali si stabilisce che una faccia di un poliedro convesso è visibile se l angolo tra il vettore normale alla faccia applicato in un punto qualsiasi di questa e il proiettore di tale punto è compreso tra i 90 e 90 gradi. Indicato con n la normale e con e il proiettore, la condizione di visibilità risulta essere e n 0. Se il poliedro non è convesso o se sulla scena vi è più di un oggetto può capitare che alcune facce siano solo parzialmente visibili, pertanto il backface culling non è sufficiente. In ogni caso viene sovente utilizzato come primo passo in modo da evitare procedimenti più costosi dal punto di vista computazionale per quelle facce che sono totalmente invisibili Interfaccia A parte mostrare alcuni dei numerosi widget disponibili in Flex per la costruzione dell interfaccia di un applicazione, si sono create due classi che 2 vedi Bibliografia [13]

50 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 44 ne estendono le funzionalità; esse sono totalmente riutilizzabili e non hanno dato segno di instabilità nel corso della stesura della presente. La prima è contenuta nel file AdvancedPanel.as ed è una sottoclasse della classe Panel di Flex. Estende il Panel di Flex nel senso che colma due grosse lacune che non sono presenti in altri toolkit per interfacce. Permette infatti di ridimensionare la finestra creata dalla classe Panel in modo interattivo cliccando sull apposito talloncino in basso a destra e, cliccando sulla barra del titolo e trascinando il mouse, di spostare la finestra nella posizione desiderata come si è soliti fare in ambiente Desktop. Durante l operazione di trascinamento della finestra il puntatore del mouse assume la caratteristica forma a croce. Il widget Panel è presente nel tool visuale di disegno di Flex pertanto anche AdvancedPanel, essendo un suo derivato, è stato presente in tale tool. Ora il programmatore in fase di sviluppo può aggiungere tale widget nell interfaccia semplicemente trascinandolo e posizionandolo nella finestra di disegno dell applicazione. La seconda classe è contenuta nel file tentwrapper.as. La libreria di Flex fornisce dei meccanismi per mostrare o nascondere i widget dell interfaccia con degli effetti vari. Quando l utente seleziona una sfera per modificarne i parametri, si apre, con un effetto a tendina, un riquadro apposito contente i parametri stessi e i widget necessari per poterli modificare. L obiettivo era quello di ottenere che, quando l utente seleziona una nuova sfera per modificarne i parametri, il riquadro si chiudesse con un nuovo effetto a tendina e si riaprisse visualizzando i parametri della nuova sfera. Siccome l effetto a tendina che chiude il riquadro dura una certa frazione di tempo, le istruzioni che aggiornano i dati del riquadro non possono essere eseguite immediatamente dopo l istruzione che avvia l effetto di chiusura, ma l aggiornamento dei dati deve avvenire solamente a riquadro chiuso perchè altrimenti si scorgerebbero i dati della nuova sfera prima della completa chiusura dello stesso. Creato un oggetto tentwrapper si assegna alla proprietà visualelement di questo un qualsiasi widget dell interfaccia e alla proprietà todo un oggetto funzione, cioè un puntatore ad una funzione che svolge le attività di aggiornamento dei dati o qualsiasi altra cosa l utente desideri succeda in mezzo ai due effetti. Il codice creato, provvede in modo trasparente ad eseguire la funzione referenziata da todo solamente quando finisce il primo effetto e ad iniziare il

51 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 45 secondo alla fine delle operazioni di tale funzione. La classe fornisce i metodi show, close dal significato autoesplicativo e update che è una combinazione dei due. Anche gli effetti possono essere personalizzati e i metodi della classe possono essere applicati ad ogni oggetto UIComponent cioè ad ogni widget dell interfaccia. 4.4 Applicazioni possibili Dopo un indagine sui principali motori di ricerca l autore è riuscito a trovare solamente una piccola applicazione simile a questa 3 che, pur sfruttando il motore 3D di Microsoft Silverlight 4, non appare molto fluida (15-16 frame per secondo mentre il simulatore qui descritto non presenta nessun problema a 30 o più fps a parità di macchina) a testimonianza di quanto sia ostico portare nelle pagine web contenuti 3D. Le limitazioni del nostro simulatore sono le stesse di altre simulazioni (2D) esistenti: solamente due sfere possono scontrarsi allo stesso tempo e se lo scontro avviene simultaneamente fra tre o più sfere il codice lo considera come due o più collisioni tra due sfere; inoltre il rilevamento del momento esatto degli urti non è precisissimo, basandosi unicamente sulla verifica della distanza tra i centri di due sfere. Tali semplificazioni sono però usuali anche in software che vengono utilizzati a scopo di simulazione in ambito universitario e non per illustrare le possibilità di una tecnologia RIA come può essere la nostra applicazione. Ad esempio la facoltà di scienze atmosferiche dell università dell Illinois usa un modello fisico analogo per una serie di programmi Java utili allo studio di comportamenti atmosferici dove gli scontri fra particelle giocano un ruolo importante. 5 In effetti la principale applicazione di un software simile è quello di illustrare concetti fisici. I comandi dell interfaccia permettono di selezionare il numero di sfere e SilverLight è una tecnologia progettata per lo sviluppo di RIA. È molto simile a Flex nelle intenzioni ed è un diretto concorrente di Adobe in questo senso 5 vedi html per una descrizione del modello fisico e atmos100/all_programs.html per una lista di applicativi in cui è utilizzato tale modello

52 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 46 di cambiarne i parametri di dimensione e massa. Se l utente seleziona una singola sfera e ne riduce al minimo la massa, può osservare che, ad ogni scontro con le altre, la sua velocità aumenta di molto; se poi reimposta la massa al valore di partenza avrà aumentato la quantità di moto del sistema e potrà verificarne visivamente l effetto complessivo. La possibilità di modificare la dimensione delle sfere e la loro massa può introdurre il concetto di densità di un corpo. Similmente si potrebbero implementare comandi per gestire forze esterne o urti anelastici. In ambito informatico, tale applicazione è stata utilizzata per dimostrare la velocità di calcolo che l applicazione RIA, sviluppata in Flex, con il motore Flash Player, è in grado di realizzare su qualsiasi browser, anche su PC di potenza non elevata. 4.5 Il modello di gestione degli eventi Il sistema di gestione degli eventi di Flex permette al programmatore di far reagire l applicazione agli input che l utente invia ad essa attraverso l interfaccia grafica. Il modello, che aderisce ad uno standard de facto 6, è per lo più analogo a quello di altre tecnologie orientate alla programmazione web. Rimandando alla documentazione ufficiale per una trattazione dettagliata, vediamo i principi base di tale modello. Con il termine evento si intende il verificarsi di una qualsiasi delle possibili interazioni tra l utente ed uno dei widget dell applicazione. Si vuole che una certa porzione di codice venga eseguita automaticamente a seguito dell evento. Vediamo le operazioni necessarie prendendo come widget di esempio un NumericStepper, un elemento della GUI che permette di specificare un valore numerico da un insieme ordinato mediante inserimento diretto, cioè cliccando col mouse sul campo contenente il numero e editandolo con la tastiera, o mediante due pulsantini laterali (vedi Figura 4.5). Vediamo e commentiamo un esempio minimale: mynumericstepper.addeventlistener......(numericstepperevent.change,listeningfunction); 6 Document Object Model (DOM) Level 3 Events Specification

53 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 47 Figura 4.5: Un NumericStepper... public function listeningfunction(event:numericstepperevent):void{ trace("il valore scelto è: "+ event.value); } L istanza della classe NumericStepper è rappresentata dalla variabile di nome mynumericstepper. Si deve chiamare, tramite mynumericstepper, il metodo addeventlistener che permette di specificare una funzione che verrà automaticamente eseguita al verificarsi dell evento. Questo metodo richiede pertanto due parametri. Il primo è il tipo di evento per cui desideriamo una risposta da parte dell applicazione e che, nel nostro caso, è NumericStepperEvent.CHANGE. Questo parametro è una stringa costante, ogni classe rappresentante gli eventi di un widget definisce una di queste stringhe per ogni tipo di evento. Il secondo parametro è il riferimento alla funzione ( Listener ) che deve essere eseguita come risposta all interazione dell utente con il NumericStepper. Quando l utente cambia il valore del NumericStepper, Flex confeziona un oggetto NumericStepperEvent, contenente numerose informazioni sull evento stesso, e lo invia come parametro alla funzione listener. La firma della funzione listener, public function listening- Function(event:NumericStepperEvent):void, deve dichiarare come parametro proprio l oggetto NumericStepperEvent che Flex gli passerà in automatico. Il corpo della nostra funzione listener, listeningfunction, scrive il valore indicato nel NumericStepper a dimostrazione che l oggetto event contiene le informazioni dell evento. Nel nostro caso l unica informazione rilevante dell evento è proprio il valore contenuto nel widget. Una caratteristica importante degli eventi è il cosiddetto flusso degli eventi. Ipotizziamo una situazione in cui un widget è contenuto in un

54 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 48 pannello. Il pannello a sua volta è contenuto nello Stage, oggetto che rappresenta l area principale di ogni applicazione Flex, cioè il contenitore di tutti i componenti dell interfaccia. Quando si verifica un evento a livello del widget (ad esempio un click del mouse), il Flash Player genera un oggetto che lo rappresenta, e fa compiere a tale oggetto un percorso che parte dallo Stage, giunge fino al widget e ritorna allo Stage. Il tragitto dallo Stage al widget viene chiamato fase di cattura, quando l evento è al livello del widget siamo invece nella fase di target, infine il viaggio di ritorno verso lo Stage è la fase di bubbling Stage Panel Widget Figura 4.6: Flusso degli eventi Non tutti gli eventi partecipano a tutte e tre le fasi del tragitto, inoltre, di default, i widget dell interfaccia non possono ascoltare un evento nella sua fase di cattura a meno che non siano stati esplicitamente impostati per questo. Nel prossimo paragrafo vedremo un esempio in cui questa caratteristica viene messa in risalto. 4.6 Analisi del codice Nella sezione 4.3 abbiamo presentato la AdvancedPanel, che fornisce un pannello spostabile e ridimensionabile. Vediamone il codice:

55 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 49 package MyLibrary{ import flash.display.displayobjectcontainer; import flash.events.mouseevent; import flash.geom.point; import mx.containers.panel; import mx.events.flexevent; import mx.managers.cursormanager; public class AdvancedPanel extends Panel{ public function AdvancedPanel(){ super(); addeventlistener(flexevent.creation_complete, init); } private function init(event:flexevent):void { Container= parent as DisplayObjectContainer; addeventlistener(mouseevent.mouse_down, checkresize); addeventlistener(mouseevent.mouse_down, thisoverall); titlebar.addeventlistener(mouseevent.mouse_down, startmove); titlebar.addeventlistener(mouseevent.mouse_up, resetcursor); titlebar.addeventlistener(mouseevent.mouse_out, managemouseout); titlebar.addeventlistener(mouseevent.mouse_move, managemouseout); } private function managemouseout(event:mouseevent):void{ if(!event.buttondown) resetcursor(); } public function resetcursor(event:mouseevent=null):void{ CursorManager.removeCursor(cursorID); } public function startmove(event:mouseevent):void{ oldmousex=event.stagex; oldmousey=event.stagey; cursorid = CursorManager.setCursor(moveCursorSymbol); Container.addEventListener(MouseEvent.MOUSE_MOVE, domove); }

56 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 50 public function domove(event:mouseevent):void{ var newmousex:number; var newmousey:number; newmousex=event.stagex; newmousey=event.stagey; if(event.buttondown ){ x+=newmousex-oldmousex; y+=newmousey-oldmousey; oldmousex=newmousex; oldmousey=newmousey; } else Container.removeEventListener(MouseEvent.MOUSE_MOVE, domove); } public function checkresize(event:mouseevent):void{ if(event.target!= this) return; if( event.localx > width-8 && event.localy > height-8) this.stage.addeventlistener(mouseevent.mouse_move,doresize); } public function doresize(event:mouseevent):void{ var globalcoord:point=this.localtoglobal(new Point(0,0)); var newwidth:number=event.stagex-globalcoord.x; var newheight:number=event.stagey-globalcoord.y; if(event.buttondown ){ if ((width>minwidth newwidth>width) && newwidth>minwidth) width=newwidth; if ((height>minheight newheight>height) && newheight>minheight) height=newheight; } else this.stage.removeeventlistener(mouseevent.mouse_move,doresize); }

57 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 51 private function thisoverall(event:mouseevent):void{ Container.setChildIndex(this,Container.numChildren-1); } public function draw():void{ graphics.clear(); graphics.linestyle(2); graphics.moveto(width - 6, height - 1) graphics.curveto(width - 3, height - 3, width - 1, height - 6); graphics.moveto(width - 6, height - 4) graphics.curveto(width - 5, height - 5, width - 4, height - 6); } protected override function updatedisplaylist(......unscaledwidth: Number, unscaledheight:number):void { super.updatedisplaylist(unscaledwidth, unscaledheight); draw(); } private var Container:DisplayObjectContainer; private var oldmousex:number; private var oldmousey:number; private var cursorid:number = 0; [Embed(source="/assets/move.png")] private var movecursorsymbol:class; } } Commentiamone i metodi più significativi. Il costruttore AdvancedPanel chiama il costruttore della superclasse e fa in modo che si avvi la funzione init solamente quando il Flash Player ha completato le operazioni di inizializzazione interne al componente. Il metodo init memorizza il contenitore del nostro AdvancedPanel nella variabile Container, la proprietà parent è impostata correttamente proprio perché la funzione init si avvia quando Flash Player ha terminato alcune operazioni di start-up del componente. Successivamente vengono registrate alcune funzioni come Listener di quegli eventi del mouse che servono a spostare il

58 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 52 pannello e a ridimensionarlo. Cominciamo col vedere i metodi preposti allo spostamento del pannello. Il metodo startmove, che viene chiamato quando l utente clicca la barra del titolo del pannello per spostarlo, registra le coordinate del medesimo al momento del click e comincia ad ascoltare l eventuale movimento del mouse per l operazione di trascinamento vera e propria. Il metodo domove si occupa di muovere effettivamente il pannello. Per prima cosa registra le coordinate del mouse, successivamente controlla se l utente sta ancora tenendo premuto il pulsante del mouse oppure se l ha rilasciato. Nel primo caso muove effettivamente il pannello decidendo la direzione di movimento in base alla differenza tra le coordinate del mouse al momento del click sulla barra del titolo e quelle attuali. Nel secondo caso smette di registrare i movimenti del mouse perché si è conclusa l operazione di trascinamento. Vediamo ora i metodi che permettono il ridimensionamento del pannello. checkresize è il Listener che risponde ai click dell utente sul pannello. Se il click è avvenuto sull angolo in basso a destra il codice imposta un nuovo Listener, doresize, per registrare i movimenti del mouse e ridimensionare il pannello, se il click è avvenuto in un altra zona non effettua nessuna operazione. Si noti l istruzione if(event.target!= this) return; all inizio del metodo. Ipotizziamo che all interno del pannello sia posizionato un widget. Un eventuale click sul widget fa sì che il Flash Player chiami il metodo checkresize quando l evento è in fase di bubbling. Le istruzioni appena viste controllano che il click sia stato fatto proprio sul pannello e non su uno dei widget contenuti all interno di questo. Se il click è stato fatto su un widget interno al pannello la funzione termina. Questo controllo è necessario perché se l evento viene raccolto in fase di bubbling dal pannello, le informazioni sulle coordinate del punto su cui si è fatto click sono relative al widget e non al pannello, provocando ovvi problemi nelle operazioni successive. Il metodo doresize ridimensiona la finestra facendo attenzione che questa non diventi più piccola delle dimensioni minime impostate.

59 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 53 Concludiamo il paragrafo presentando il segmento di codice responsabile della computazione dei nuovi vettori delle velocità di due sfere in seguito ad un urto. Si può notare come le istruzioni seguano passo passo il modello presentato nel paragrafo 4.2: // versore ortogonale al piano di collisione var versore:object=new Object; versore.x=ball2.px-px; versore.y=ball2.py-py; versore.z=ball2.pz-pz; //la norma per ottenere il versore var norma:number=math.sqrt(versore.x*versore.x+ +versore.y*versore.y+versore.z*versore.z); // normalizzo versore versore.x=versore.x/norma; versore.y=versore.y/norma; versore.z=versore.z/norma; // componente ortogonale di v1 var v1n:number=(vx*versore.x+vy*versore.y+vz*versore.z); // vettore ortogonale di v1 var vett1n:object=new Object; // calcolo vettore ortogonale di v1 vett1n.x=v1n*versore.x; vett1n.y=v1n*versore.y; vett1n.z=v1n*versore.z; // vettore parallelo di v1 var vett1p:object={x:vx-vett1n.x,y:vy-vett1n.y,z:vz-vett1n.z}; // componente ortogonale di v2 var v2n:number=(ball2.vx*versore.x+ball2.vy*versore.y+ball2.vz*versore.z); // vettore ortogonale di v2 var vett2n:object=new Object; // calcolo vettore ortogonale di v2 vett2n.x=v2n*versore.x; vett2n.y=v2n*versore.y;

60 CAPITOLO 4. SIMULATORE 3D DI URTI ELASTICI 54 vett2n.z=v2n*versore.z; // vettore parallelo di v2 var vett2p:object=......{x:ball2.vx-vett2n.x,y:ball2.vy-vett2n.y,z:ball2.vz-vett2n.z}; // nuova componente ortogonale di v1 var v1nfin:number=......(v1n*(mass-ball2.mass)+2*ball2.mass*v2n)/(mass+ball2.mass); // nuova componente ortogonale di v2 var v2nfin:number=(v2n*(ball2.mass-mass)+2*mass*v1n)/(mass+ball2.mass); // nuovo vettore ortogonale di v1 var vett1nfin:object=......{x:v1nfin*versore.x,y:v1nfin*versore.y,z:v1nfin*versore.z}; // nuovo vettore ortogonale di v2 var vett2nfin:object=......{x:v2nfin*versore.x,y:v2nfin*versore.y,z:v2nfin*versore.z}; // nuove velocità per questa sfera vx=vett1p.x+vett1nfin.x; vy=vett1p.y+vett1nfin.y; vz=vett1p.z+vett1nfin.z; // nuove velocità per ball2 ball2.vx=vett2p.x+vett2nfin.x; ball2.vy=vett2p.y+vett2nfin.y; ball2.vz=vett2p.z+vett2nfin.z;

61 Capitolo 5 Disegno di curve 5.1 Introduzione Questo programma permette il disegno di segmenti di linea retta e di forme chiuse delimitate da linee miste. L idea chiave dell applicazione è quella di poter disegnare linee miste chiuse semplicemente posizionando sul monitor dei punti di controllo. Ricordato che una linea mista è una linea in parte spezzata e in parte curva, i punti di controllo corrispondenti alla parte spezzata della linea coincidono con i vertici dei relativi segmenti mentre i punti di controllo corrispondenti alla parte curva della linea sono i punti di controllo di una curva B-Spline. In Figura 5.1 vediamo un esempio. I punti P 1, P 6, P 8, P 10 separano un tratto curvo da un tratto di linea spezzata, il punto P 7 è semplicemente un punto interno di una parte spezzata, i punti da P 1 a P 6 sono i punti di controllo di una curva B-Spline come lo sono i punti P 8, P 9, P 10. Chiamiamo duri quei punti di controllo che sono vertici di un segmento di una parte spezzata della linea e morbidi i punti di controllo delle B-Spline che disegnano le parti curve. I tratti curvilinei possono avere un numero qualsiasi di punti di controllo e l utente può modellare la curva semplicemente spostandoli col mouse. Questo rappresenta un approccio diverso da quello di molti software per la creazione di illustrazioni basati sul disegno vettoriale come Adobe Illustrator 55

62 CAPITOLO 5. DISEGNO DI CURVE 56 P₂ P₄ P₅ P₁ P₃ P₆ P₈ P₇ P₁₀ P₉ Figura 5.1: Esempio di forma delimitata da linea mista chiusa o Corel Draw 1, dove le linee curve sono aggiunte a schermo posizionando il primo e ultimo punto di controllo di una curva di Bezier e impostando la direzione tangente in corrispondenza di questi due punti (vedi [18]). Inoltre, sempre nella tipologia di software sopra citata, per creare curve composte, è necessario collegare manualmente curve singole, e per ottenere una certa regolarità, impostare, sempre manualmente, le direzioni tangenti di ogni sottocurva. 5.2 Funzionamento L applicazione presenta due pannelli, il primo di questi contiene i vari tool di disegno mentre il secondo contiene la tela su cui si aggiungeranno le linee e le forme volute. Entrambi i pannelli appartengono alla classe AdvancedPanel (vedi paragrafo 4.3) pertanto sono trascinabili col mouse e ridimensionabili. Il pannello dei comandi contiene i seguenti controlli: Bottone Draw lines, per disegnare linee 1 Si intendono quei software rivolti a grafici per illustrazioni artistiche, e non pacchetti rivolti alla progettazione industriale o software CAD

63 CAPITOLO 5. DISEGNO DI CURVE 57 Figura 5.2: Screenshot dell applicazione Bottone Draw polygons, per disegnare poligoni Bottone Select objects, per selezionare e spostare oggetti all interno dell area di disegno. Bottone Select ctrl points, per selezionare i punti di controllo di linee e forme e spostarli all interno dell area di disegno. Bottone Soften edges, con cui è possibile cliccare su un punto di controllo per renderlo morbido o, se già lo fosse, duro. (punti rispettivamente di colore verde e blu in Figura 5.1). Due ColorPicker, con cui è possibile selezionare il colore delle linee o del bordo e del riempimento delle forme. Un ComboBox, mediante il quale si può cambiare lo spessore di una linea o del bordo di una forma. Due NumericStepper, tramite cui è possibile scalare gli oggetti sullo schermo.

64 CAPITOLO 5. DISEGNO DI CURVE 58 Figura 5.3: Pannello con gli strumenti per disegnare

65 CAPITOLO 5. DISEGNO DI CURVE 59 È possibile selezionare un solo bottone per volta. Si possono disegnare linee e poligoni selezionando i rispettivi tool, ognuno col proprio pulsante. Per disegnare una linea è sufficiente cliccare due volte nell area di disegno per impostare la posizione dei due vertici del segmento. Per disegnare un poligono, si deve cliccare sull area almeno tre volte per ottenere un triangolo, ad ogni ulteriore click si ottiene un poligono con un lato in più. Per terminare il disegno del poligono si preme il tasto Esc. Il tasto Esc può essere premuto anche quando si è impostato solamente il primo punto di un segmento o non si è ancora cliccato per la terza volta per ottenere un triangolo, abbandonando così l operazione e potendo ricominciare da capo. Per spostare i punti di controllo di un oggetto, per cambiare la morbidezza di un punto o ancora per scalare o cambiare i colori di un oggetto è necessario prima selezionare l oggetto desiderato con l apposito tool. Per selezionare un oggetto si clicca sul bottone Select objects e successivamente sull oggetto di interesse. L oggetto verrà contornato da una cornice rossa che ne indica lo stato di selezione e si porrà automaticamente in primo piano sovrapponendosi agli altri oggetti. In fondo al pannello contenente il disegno vero e proprio è presente un check box che, quando spuntato, crea degli effetti di colori e di trasparenze tra gli eventuali oggetti sovrapposti sull area di disegno. Inoltre, sempre in fondo al pannello, è presente il bottone di stampa. 5.3 Modello matematico Le sezioni curvilinee delle forme chiuse sono rappresentate da curve B- Spline. Ricordiamo che l equazione di una curva B-Spline di ordine k 2 e punti di controllo {P 0,..., P n } è: P(t) = n N i,k (t)p i, t k 1 t t n+1 (5.1) i=0 dove la successione {t j } è una sequenza non decrescente di valori denominati nodi e le N i,k (t) sono particolari funzioni di miscelamento, polinomiali a tratti di grado k 1, dette funzioni B-Spline. 2 L ordine k di una curva B-Spline è uguale al grado della curva polinomiale a tratti più uno.

66 CAPITOLO 5. DISEGNO DI CURVE 60 Le curve B-Spline utilizzate sono di tipo Open in modo che interpolino il primo e l ultimo punto di controllo delle sezioni curvilinee di una forma, facendo sì che questa risulti chiusa (vedi [19]). Quando l utente seleziona il tool Soften edges, può cliccare sui punti di controllo per ammorbidirli. Al primo punto cliccato ci troviamo nella situazione di Figura 5.4, otteniamo una curva di grado due 3 con tre punti di controllo 4, indicati con P 0, P 1 e P 2, di cui P 0 e P 2 sono considerati duri anche se sono rispettivamente il primo e l ultimo punto di controllo della curva mentre il punto P 1, quello su cui si è cliccato, diventa un punto morbido. Ora, se si clicca su P 2, la curva guadagna un punto di controllo come si vede P₁ P₀ P₂ Figura 5.4: I punti di controllo della curva sono tre. Il grado della curva è due. in Figura 5.5. La curva B-Spline così ottenuta cresce di grado e diventa una 3 Grado due è il più alto possibile con tre soli punti di controllo 4 In letteratura i punti di controllo vengono generalmente indicizzati a partire da zero. Si è qui mantenuta tale convenzione differentemente da quanto visto in Figura 5.1

67 CAPITOLO 5. DISEGNO DI CURVE 61 P₀ P₁ P₂ P₃ Figura 5.5: I punti di controllo della curva sono quattro. Il grado della curva è tre.

68 CAPITOLO 5. DISEGNO DI CURVE 62 cubica 5. Se si continua a cliccare sul primo o sull ultimo punto di controllo di una curva si ottiene una nuova curva con un punto di controllo in più ma sempre di grado tre, che, pertanto, rappresenta il massimo grado previsto (vedi Figura 5.6). P₀ P₁ P₂ P₃ P₄ Figura 5.6: I punti di controllo della curva sono cinque. La curva rimane sempre cubica. Vediamo come è definita la sequenza dei nodi, necessaria per la costruzione di una curva B-Spline, nel caso specifico di questa applicazione. Dati i punti di controllo {P 0, P 1,..., P n } e l ordine k della curva, la sequenza dei nodi T = {t i } n+k i=0 è costruita secondo questi accorgimenti: 1. la sequenza è non decrescente 6 2. il valore più piccolo è assunto uguale a zero 3. la sequenza è composta da n + k + 1 elementi 5 Grado tre è il più alto possibile con quattro punti di controllo 6 Proprietà comune ad ogni tipo di curva B-Spline

69 CAPITOLO 5. DISEGNO DI CURVE k vale tre se n = 2 o quattro se n 3 5. i valori costituiscono una parametrizzazione sugli interi, ossia sono maggiori di una unità rispetto al precedente tranne il primo (zero) e ultimo valore che sono ripetuti k volte 7 Ricapitoliamo. Al primo punto reso morbido, indicati con P 0, P 1 e P 2 i punti di controllo, la curva avrà grado due e sequenza dei nodi T = {0, 0, 0, 1, 1, 1}. Se aggiungo un punto di controllo allo stesso segmento curvo, come detto precedentemente, la curva diventa cubica, cioè di grado tre, con sequenza dei nodi T = {0, 0, 0, 0, 1, 1, 1, 1}. Se si continua a cliccare sul punto iniziale o finale di una curva, aumentandone così il numero di punti di controllo, il grado rimane tre ma la sequenza dei nodi varia in questo modo: 5 punti di controllo, n = 4, k = 4 T = {0, 0, 0, 0, 1, 2, 2, 2, 2} 6 punti di controllo, n = 5, k = 4 T = {0, 0, 0, 0, 1, 2, 3, 3, 3, 3} 7 punti di controllo, n = 6, k = 4 T = {0, 0, 0, 0, 1, 2, 3, 4, 4, 4, 4} 8 punti di controllo, n = 7, k = 4 T = {0, 0, 0, 0, 1, 2, 3, 4, 5, 5, 5, 5} Inizialmente si erano scelte le curve di Bezier per disegnare i contorni delle forme. Purtroppo questa scelta presentava parecchi svantaggi. Col crescere dei punti di controllo, infatti, cresce anche il grado della curva polinomiale. Ciò comporta un pesante rallentamento in tutte quelle operazioni in cui la curva deve essere ridisegnata di continuo ed in tempo reale, ad esempio quando si spostano i punti di controllo della medesima con l apposito tool. L utilizzo di curve di Bezier composte risolve il problema del grado alto ma, per ottenere una certa regolarità della curva, si richiede, da parte dell utente o di una procedura automatica, di posizionare con un certo criterio i punti di controllo sacrificando di molto la flessibilità. 5.4 Applicazioni possibili Le curve B-Spline sono più intuitive e più facili da controllare, mediante il posizionamento dei punti di controllo, rispetto alle curve di Bezier. Nonostante ciò sono raramente implementate nei programmi di grafica 2D, mentre 7 Il primo e ultimo valore ripetuti k volte caratterizzano le B-Spline di tipo Open

70 CAPITOLO 5. DISEGNO DI CURVE 64 sono uno standard nella grafica tridimensionale (vedi [18]). La scelta delle B-Spline per la nostra applicazione, permette di avere curve cubiche indipendentemente dal numero di punti di controllo; ciò permette un comportamento uniforme da parte di ogni sezione curvilinea delle forme disegnate sullo schermo. Inoltre l utente non deve preoccuparsi di collegare più sezioni di curve composte per ottenere una certa regolarità della curva, problema che si presenterebbe con le curve di Bezier. Questo approccio fa sì che il nostro applicativo, magari con l implementazione di qualche altra funzionalità 8, rappresenti un valido tool di disegno per bambini magari da aggiungere come gadget all interno di siti web per l infanzia. Vedremo nel paragrafo come questa applicazione sia stata progettata in modo che fosse facile integrare le operazioni di disegno in altri software. Si potrebbe pertanto utilizzare la funzionalità di disegnare forme chiuse miste del nostro programma, per aggiungere ad un software di fotoritocco uno strumento intuitivo e versatile per scontornare immagini. Ad esempio, l utente potrebbe disegnare una forma che ricopra la parte dell immagine che si vuole mantenere e premere un bottone che cancelli il resto. Siccome le curve B-Spline permettono di avere molti punti di controllo senza appesantire l applicazione, l utente può posizionare, in fase di creazione del poligono iniziale, molti punti di controllo sul contorno desiderato in modo che questi siano relativamente vicini l uno all altro. Dopo di che può ammorbidire i punti di interesse per quelle parti dell immagine che sono curvilinee. Data la vicinanza dei punti di controllo le curve sembreranno interpolare i punti stessi consentendo di scontornare l immagine con precisione. 5.5 Struttura del codice Classi astratte e polimorfismo Nell Appendice A si illustrano i fondamenti del paradigma della programmazione ad oggetti. Approfondiamo qui l aspetto del polimorfismo, introdu- 8 Possibilità di disegnare primitive (cerchi, quadrati...), di cancellare oggetti etc.

71 CAPITOLO 5. DISEGNO DI CURVE 65 cendo il concetto delle classi astratte e dei metodi virtuali perché il codice dell applicazione fruisce di queste caratteristiche. Nell architettura di un programma possono esistere classi che rappresentano entità aventi un comportamento simile. In letteratura è tipico l esempio di classi che rappresentano alcuni tipi di animali. Si avranno pertanto la classe Cane, Gatto, Lupo ecc.. Ognuna di queste classi, ad esempio, avrà il metodo emetti_verso che stamperà a video le onomatopee dei versi dei vari animali. Sempre nell esempio classico tutte queste classi condivideranno la stessa superclasse che chiameremo Animale. Per sfruttare il concetto di polimorfismo dobbiamo definire un metodo emetti_verso anche in questa classe. In questo modo, se definiamo una variabile di tipo Animale ed assegnamo a questa il riferimento ad una istanza di una delle classi rappresentanti un animale, possiamo chiamare il metodo emetti_verso attraverso questa variabile ed ottenere la stampa del verso corrispondente all istanza. Vediamo un esempio in pseudo-codice: \\ creo una variabile di tipo Animale \\ e assegno a questa il riferimento ad un oggetto di tipo Cane var mypet:animale=new Cane; \\ chiamo il metodo emetti_verso tramite la variabile mypet mypet.emetti_verso(); \\ Stampa a video: \\ "Bau Bau" Come possiamo implementare le istruzioni del corpo del metodo emetti_verso all interno della classe Animale? Questa classe è talmente generale per quel che riguarda il metodo in questione, che non ha semplicemente senso scrivere delle istruzioni all interno del metodo. L unica cosa importante è che si possa invocare il metodo emetti_verso attraverso una variabile di tipo Animale in modo che tutte le istanze delle varie sottoclassi abbiano una interfaccia comune. Ovviamente le sottoclassi Cane, Gatto, Lupo devono fare l override di questo metodo implementando le istruzioni per la stampa a video del verso corretto. In gergo informatico il metodo emet-

72 CAPITOLO 5. DISEGNO DI CURVE 66 ti_verso, a livello della classe Animale, viene chiamato metodo virtuale. Le classi aventi metodi virtuali vengono indicate come classi astratte. In ActionScript è sufficiente non includere alcuna istruzione nel corpo del metodo emetti_verso a livello della classe Animale, è necessario comunque lasciare le due parentesi graffe che delimitano il blocco di istruzioni (vuoto) del metodo. Il metodo deve essere invece contrassegnato con la parola chiave override nelle varie sottoclassi. ActionScript ha qualche forma di controllo in meno e qualche limitazione rispetto a linguaggi come Java e C++, vediamo in che senso. Se avessimo programmato la classe Animale in Java avremmo dovuto dichiarare i metodi senza corpo con la parola chiave abstract togliendo del tutto il corpo della funzione cioè anche le due parentesi graffe prive di codice al loro interno, allo stesso modo avremmo dovuto dichiarare abstract anche l intera classe. Inoltre il compilatore Java non permetterebbe la creazione diretta di oggetti Animale, cosa questa che porta maggiore chiarezza all interno di software molto complessi. In ActionScript se un metodo di una classe derivata ha lo stesso nome di un metodo della superclasse deve essere per forza contrassegnato con la parola chiave override ed è pertanto soggetto al meccanismo del polimorfismo. C++ è più flessibile: senza scendere nei particolari diciamo solamente che un metodo è polimorfico solamente se è contrassegnato con la parola chiave virtual nella classe base, altrimenti una classe derivata può implementare un metodo con lo stesso nome ma questo si comporterà semplicemente come un altro metodo e non permetterà il meccanismo del polimorfismo. Il linguaggio C++ è molto apprezzato e versatile ma molti utenti non ne usano tutte le potenzialità perché portano facilmente a degli errori di programmazione, inoltre molti compilatori non sono del tutto compatibili con lo standard ANSI proprio per la grande complessità del linguaggio. Bisogna comunque dire che C++ e Java appartengono alla categoria dei cosiddetti linguaggi di sistema, cioè quei linguaggi nati per costruire applicazioni molto grosse ed (eventualmente) da zero, cioè senza il supporto di framework esterni, al contrario dei linguaggi di scripting progettati per fare da collante fra diverse applicazioni o per far comunicare diversi tipi di tecnologie. I linguaggi appartenenti alla prima categoria sono generalmente

73 CAPITOLO 5. DISEGNO DI CURVE 67 più difficili da imparare, più verbosi e meno espressivi, ma obbligano a strutturare di più e meglio il codice impedendo al medesimo di diventare troppo complesso da gestire. I linguaggi della seconda categoria sono caratterizzati da una ripida curva di apprendimento, sono molto versatili e permettono di condensare complesse operazioni in pochissime righe di codice, ma sono progettati per costruite macro funzionanti all interno di altre applicazioni, per aiutare gli amministratori di sistemi nei compiti ripetitivi o ancora per far dialogare software diversi che magari utilizzano protocolli di comunicazione incompatibili fra loro. Alcuni di questi sono Python, Perl, Tcl e Ruby. Secondo l autore, ActionScript, a dispetto del nome, si colloca a metà strada tra queste due categorie. Vedremo, nei prossimi paragrafi, come sono strutturate le classi principali della nostra applicazione Classe DrawingTarget La classe DrawingTarget funge da regista per ogni operazione di questa applicazione. Il codice si avvale delle facilitazioni della programmazione ad oggetti ma si è preferito mantenere la logica principale del codice raccolta in un blocco singolo per facilitare l integrazione di questa limitata applicazione di disegno, in software di più ampio respiro. Nella classe DrawingTarget è presente la proprietà drawingarea di tipo UIComponent (vedi Appendice A) che contiene il riferimento al componente su cui l utente andrà a disegnare. La scelta del tipo di drawingarea permette di poter includere le funzionalità di disegno su qualsiasi elemento visuale di Flex. Chiaramente tali funzioni possono essere utili all interno di quei widget dotati di un area predisposta a visualizzare un contenuto principale, tipo pannelli (classe Panel), tele (classe Canvas) o qualsiasi loro derivato come la nostra classe AdvancedPanel (vedi 4.3). Pertanto, aggiunti in un altro progetto i widget dell interfaccia e i file della nostra applicazione, è sufficiente creare un istanza della classe DrawingTarget e passare a tale oggetto il riferimento del componente su cui si vuole poter disegnare.

74 CAPITOLO 5. DISEGNO DI CURVE Classe DrawingObject La classe DrawingObject è la superclasse di tutte le classi rappresentanti quegli oggetti che possono essere disegnati sull apposita area della nostra applicazione. Linee e poligoni, che nella versione attuale del software sono gli unici elementi a poter essere aggiunti sullo schermo, sono rappresentati dalle classi Line e Polygon che sono sottoclassi di DrawingObject. La classe DrawingObject, pertanto, fornisce un interfaccia comune ad ogni elemento sull area di disegno e può essere considerata come classe base per altri tipi di oggetti grafici in future implementazioni. Nella classe DrawingObject possiamo notare la dichiarazione di metodi il cui corpo non contiene istruzioni. Questi, come detto precedentemente, sono metodi virtuali. DrawingObject è, pertanto, una classe astratta. Il principale tra questi, il metodo draw, è quello preposto a disegnare l oggetto sullo schermo. Le sottoclassi di DrawingObject, come vedremo, fanno l ovverride di questo metodo implementando le operazioni di disegno vere e proprie, in particolare la classe Line provvede a disegnare una linea e la classe Polygon un poligono. Questa struttura semplifica la scrittura del codice. Ad esempio, durante l esecuzione dell applicazione, il software mantiene un array contenente i riferimenti di tutti gli oggetti disegnati dall utente. Questi riferimenti sono variabili di tipo DrawingObject a cui sono state assegnate degli oggetti Line o Polygon. Si possono chiamare quei metodi senza corpo della classe DrawingObject per tutti gli elementi dell array e, grazie al polimorfismo, per ogni elemento verrà invocato il metodo corrispondente all effettiva classe di appartenenza. La classe DrawingObject ha altri metodi senza corpo, virtuali, oltre a draw. calcbaricenter è preposto al calcolo delle coordinate del baricentro 9. Siccome le classi Line e Polygon, come vedremo nel pargarfo 5.5.4, implementano in modo diverso i punti di controllo, il metodo calcbaricenter non è in grado di calcolare il baricentro di tali punti a livello della classe DrawingOb- 9 Inteso come media dei punti di controllo. L uso del baricentro come punto rispetto a cui applicare trasformazioni affini quando non diversamente specificato dall utente è una scelta seguita in applicativi simili a questo. Vedi MagilloP/GRAFICA04/sugger2D.html

75 CAPITOLO 5. DISEGNO DI CURVE 69 ject. Esso rimane quindi virtuale in tale contesto mentre nelle sottoclassi ne viene fatto l override specificando nei rispettivi corpi le istruzioni specifiche. Quando l utente attiva il tool di selezione, potrebbe avere delle difficoltà a muovere il mouse esattamente sopra una linea o una qualsiasi forma molto allungata avente uno spessore di pochi pixel. DrawingObject estende la classe Sprite, tale classe contiene una proprietà di nome hitarea, sempre di tipo Sprite, che funge da area sensibile agli eventi del mouse nel senso che se l utente fa scorrere il mouse sopra tale sprite, viene generato un messaggio recepibile dall oggetto che si vuole selezionare. Tale area, nel caso di una linea, sarà uguale alla linea stessa solamente di spessore tale da permetterne la selezione mentre, nel caso di una forma chiusa, avrà lo stessa forma del confine di questa ma, anche qui, con spessore maggiorato 10. Il metodo add- SelectionHitArea si occupa di disegnare la hitarea. La hitarea deve essere disegnata per ogni tipo di oggetto, ma il modo con cui questo effettivamente avviene dipende dal tipo di oggetto, pertanto anche questo metodo rimane virtuale nella classe DrawingObject. Gli ultimi due metodi che permettono ad ogni elemento disegnabile di avere un interfaccia comune ma di non poter essere implementati nella loro comune classe base sono: doscaling, che permette lo scaling dell oggetto selezionato, rispetto al baricentro, mediante gli appositi widget dell interfaccia e drawgrid, che disegna una cornice attorno all oggetto selezionato Le classi Line e Polygon Le classi Line e Polygon sono sottoclassi di DrawingObject. Queste due classi implementano in modo diverso i punti di controllo mediante i quali vengono disegnati i corrispondenti oggetti. La classe Line, ovviamente, contiene delle proprietà con le coordinate dei due estremi del segmento. La classe Polygon. invece contiene un array con i punti di controllo della forma chiusa delimitata da una linea mista. Come detto precedentemente questi punti possono essere morbidi o duri. Nell esempio di 10 Tale area sarà ovviamente invisibile perché si tratta solamente di un accorgimento tecnico

76 CAPITOLO 5. DISEGNO DI CURVE 70 Figura 5.1 i punti P 1, P 6, P 7, P 8 e P 10 sono duri mentre i punti P 2, P 3, P 4, P 5 e P 9 sono morbidi. Queste due classi fanno l override dei metodi virtuali di DrawingObject: draw, calcbaricenter, addselectionhitarea, doscaling e drawgrid. Ad esempio, all interno della classe Line, è finalmente possibile e sensato scrivere il corpo del metodo calcbaricenter proprio perché tale classe ha nozione delle coordinate degli estremi del segmento e, pertanto, è possibile calcolarne il baricentro come punto di mezzo. Il metodo draw della classe Line semplicemente disegna un segmento di linea in corrispondenza dei due estremi mentre il discorso per la classe Polygon è più complesso e viene descritto nella prossimo paragrafo La classe BSpline Vediamo ora come è organizzato il codice responsabile del disegno dei tratti curvilinei delle nostre forme chiuse. La classe mediante la quale si gestiscono questi tratti è la classe BSpline. Questa è abbastanza specializzata, nel senso che è progettata per creare curve BSpline con tutte le caratteristiche viste nel paragrafo 5.3, ciononostante non prevede nessun metodo di disegno. Il disegno effettivo della curva è demandato a metodi esterni alla classe e, nel nostro caso, alla classe Polygon. Quando l utente, dopo aver selezionato il tool Soften edges, clicca su un vertice di un oggetto Polygon per renderlo morbido viene invocato il metodo createbsplineobjects della classe Polygon che crea un oggetto BSpline per ogni tratto curvo della forma su cui si sta operando. Ad esempio se l utente avesse appena cliccato sul punto P 5 giungendo così alla situazione di Figura 5.1, il metodo createbsplineobjects avrebbe creato due oggetti BSpline e ne avrebbe salvato i riferimenti nell array BSplineObjects della classe Polygon. Ovviamente il metodo non crea solamente le istanze della classe BSpline ma inizializza opportunamente tali oggetti. Ovvero setta la proprietà n, cioè il numero meno uno dei punti di controllo della curva, e la proprietà k, l ordine della curva. Inoltre per ogni oggetto BSpline invoca il metodo computefdmvaluesarray che svolge le seguenti operazioni: 1. crea, e salva nella proprietà di tipo Array splineknots, il vettore con-

77 CAPITOLO 5. DISEGNO DI CURVE 71 tenente la sequenza dei nodi costruita con il criterio illustrato precedentemente 2. crea, e salva nella proprietà di tipo Array knots, una sequenza di valori, formante una partizione uniforme dell intervallo di definizione della curva [t k 1, t n+1 ]. Il numero di elementi di splineknots è quality (n k+2), dove quality è una proprietà di tipo numerico impostata in fase di creazione dell oggetto BSpline mediante il relativo costruttore crea una matrice, o meglio un Array contenente a sua volta Array 12, di nome fdmvalues, contenente, per ogni valore del vettore knots, i corrispondenti k valori delle funzioni B-Spline (funzioni di miscelamento) che danno un contributo nella 5.1. La funzione createbsplineobjects esamina, uno ad uno, i punti di controllo dell oggetto Polygon nello stesso ordine con cui sono stati posizionati sull area di disegno e crea gli oggetti BSpline man mano che incontra segmenti curvi 13. Quindi, riferendoci sempre al caso della Figura 5.1, crea come primo oggetto BSpline quello relativo alla curva P 1 P 6 e successivamente quello relativo alla curva P 8 P 10. Le proprietà dei due oggetti BSpline vengono quindi impostate in questa maniera 14 : 11 Il costruttore è un metodo che ha lo stesso nome della classe di appartenenza. Viene invocato automaticamente durante la creazione di un oggetto e, generalmente, è utilizzato per inizializzare alcune o tutte le proprietà di una classe. 12 Esiste, nella libreria di Flex, la classe Matrix, ma questa non rappresenta una matrice generica ma solamente matrici 3x3 utilizzate per le trasformazioni affini di oggetti visuali. 13 Se il primo punto dell oggetto Polygon considerato è morbido allora gli oggetti BSpline vengono creati a partire dalla curva successiva a quella contenente tale punto. 14 In questo esempio la proprietà quality dei due oggetti BSpline è impostata col valore 20.

78 CAPITOLO 5. DISEGNO DI CURVE 72 Curva: P 1 P 6 n: 5 k: 4 splineknots: {0, 0, 0, 0, 1, 2, 3, 3, 3, 3} knots: fdmvalues: Curva: {0,.05,.1,..., 1,..., 2,..., 2.90, 2.95, 3} 60 valori righe P 8 P 10 n: 2 k: 3 splineknots: {0, 0, 0, 1, 1, 1} knots: fdmvalues: {0,.05,.1,..., 0.9, 0.95, 1} 20 valori righe Notiamo la forma delle due matrici fdmvalues. Il numero delle righe coincide con il numero di elementi del vettore knots, cioè per ogni valore del parametro t ogni riga contiene i k valori di quelle funzioni N i,k (t) che forniscono un contributo alla sommatoria a secondo membro dell equazione 5.1. Ad esempio, la prima riga della matrice fdmvalues relativa alla curva P 1 P 6 è {1, 0, 0, 0} perchè per il valore del parametro t = 0 le funzioni B-Spline che portano un contributo sono N j,4 (t), j = 0, 1, 2, 3 che, calcolate appunto in t = 0, restituiscono i valori {1, 0, 0, 0}. Si sarà notato che fino ad ora non sono stati inviati agli oggetti BSpline informazioni sulle coordinate dei punti di controllo. Il codice calcola i valori delle funzioni B-Spline mediante la formula di ricorrenza di Cox - de Boor (vedi [19]). Nella equazione 5.1 la valutazione delle funzioni di miscelamento nei punti del vettore knots è, dal punto di vista computazionale, molto onerosa. Siccome gli array splineknots, knots e l array di array fdmvalues dipendono unicamente dal numero di punti di controllo, e non dalle coordinate degli stessi, possono essere settati ogni volta che un punto viene reso morbido

79 CAPITOLO 5. DISEGNO DI CURVE 73 e lasciati inalterati quando invece si spostano alcuni punti di controllo 15 oppure l intero oggetto 16. I riferimenti ai punti di controllo delle curve, con le relative coordinate, verranno passati agli oggetti BSpline nel codice del metodo draw. Quando si clicca su un punto di controllo per renderlo morbido, il codice, come abbiamo visto, invoca il metodo createbsplineobjects per creare ed impostare gli oggetti BSpline e, successivamente, il metodo draw per disegnare effettivamente la curva. Il metodo draw, a sua volta, chiama il metodo computecurve che svolge i calcoli della equazione 5.1 avvalendosi però dei dati contenuti nella proprietà fdmvalues, cosa che velocizza esponenzialmente il calcolo. Siccome quando si rende morbido un punto il metodo draw viene chiamato una volta sola, l overhead dovuto alla creazione degli oggetti BSpline è trascurabile. Quando invece si effettuano quelle operazioni sulle curve di un oggetto o sull oggetto intero che comportano il ridisegno dell oggetto in rapida successione, il fatto che il metodo draw debba soltanto eseguire una sommatoria numerica, e non il calcolo delle funzioni di miscelamento, consente di ottenere un applicativo fluido e leggero. Per ogni elemento del vettore knots, il metodo computecurve esegue la sommatoria di 5.1 sostituendo a P i le coordinate dei punti di controllo e usando gli elementi della matrice fdmvalues per i valori delle funzioni N i,k. Inoltre salva i risultati negli array xvalues e yvalues. Il metodo draw disegna la curva unendo, con dei piccoli segmenti, uno dopo l altro i punti (xvalues[n],yvalues[n]), cioè i punti aventi come prima coordinata un elemento del vettore xvalues e come seconda un elemento di yvalues, entrambi presi con lo stesso indice all interno dei rispettivi vettori. Siccome il numero di elementi di knots è uguale a quello dei vettori xvalues e yvalues, e, siccome un maggior numero di elementi di questi due vettori implica un aspetto più liscio della curva disegnata, si deve trovare un valore del parametro quality che assicuri una grafica gradevole senza sacrificare la fluidità dell applicazione. Si noti che il vettore knots ha un numero di elementi direttamente proporzionale non solo al parametro quality ma anche al numero di nodi compresi nell intervallo di definizione. Pertanto le curve lunghe, cioè con un alto numero di punti di controllo, avranno la stessa qualità grafica di 15 Mediante l apposito tool Select ctrl points. 16 Mediante l apposito tool Select objects.

80 CAPITOLO 5. DISEGNO DI CURVE 74 Click su punto di controllo con tool Soften Edges createbsplineobjects Crea... draw Usa Oggetto BSpline 1 fdmvalues computecurve computecurve computecurve Usa Usa Oggetto BSpline 2 fdmvalues Oggetto BSpline 3 fdmvalues Figura 5.7: Diagramma riassuntivo delle operazioni svolte dal codice in risposta al click su un punto di controllo mediante il tool Soften edges.

81 CAPITOLO 5. DISEGNO DI CURVE 75 quelle corte. 5.6 La gestione degli eventi del mouse all interno dell applicazione Nell implementare la nostra applicazione si è presentata ladifficoltà di gestione degli eventi del mouse. A disposizione dell utente esiste il tool Select ctrl points, che permette di selezionare i punti di controllo dell oggetto selezionato, e di muoverli a piacimento all interno dell area di disegno, per modificarne la forma. Quando l utente muove il mouse sopra un punto, questo si colora di giallo per indicarne la selezione e, se l utente clicca sul punto, questo può essere trascinato. La gestione degli eventi di questa operazione era inizialmente organizzata nella maniera seguente. I punti sono impostati per reagire agli eventi MouseEvent.MOUSE_OVER e MouseEvent.MOUSE_OUT, cioè quando il puntatore del mouse passa sopra un punto o ne esce fuori. Quando l utente passa sopra un punto, il codice lo colora di giallo e lo considera selezionato (impostando a true apposite proprietà della classe ControlPoint rappresentante i punti di controllo). Se l utente clicca sul punto, l applicazione inizia a registrare il movimento del mouse per muovere il punto (evento MouseEvent.MOUSE_MOVE ) e si interrompe l ascolto degli eventi MOUSE_OVER e MOUSE_OUT 17 perché, trascinando il mouse con una certa velocità, il puntatore può uscire e rientrare sul punto di controllo ma non si vuole che questo venga continuamente deselezionato e riselezionato. Appena si inizia a muovere il punto, il codice ascolta il momento in cui l utente rilascerà il pulsante del mouse (evento MouseEvent.MOUSE_UP ). Il rilascio del mouse può avvenire col puntatore fuori dal punto (movimento veloce del mouse), allora il codice provvede a deselezionare il punto e a riattivare l ascolto degli eventi MOUSE_OVER e MOUSE_OUT. Se inve- 17 Mediante il metodo removeeventlistener, il cui utilizzo è analogo a quello di addeventlistener ma interrompe l ascolto dell evento specificato.

82 CAPITOLO 5. DISEGNO DI CURVE 76 ce il rilascio avviene col puntatore all interno del punto il codice ricollega semplicemente l ascolto degli eventi MOUSE_OVER e MOUSE_OUT alle funzioni di selezione e deselezione dei punti di controllo. Quanto esposto descrive gli aspetti principali della logica con cui era inizialmente implementata l operazione di selezione e movimento dei punti di controllo dell oggetto selezionato. Si presenta però un problema nella situazione in cui l utente ha selezionato un punto, ha cliccato sopra questo ed ha iniziato a spostarlo trascinando il mouse, poi rilascia il pulsante del mouse con il puntatore posizionato sul punto di controllo. Seguendo lo schema di Figura 5.8, si vede che non si attiva la funzione di deselezione del punto di controllo. Nonostante ciò dovrebbe riattivarsi l ascolto dell evento MOUSE_OUT sul punto mosso e, all uscita del puntatore dal punto, questo dovrebbe deselezionarsi. Se l utente, dopo il rilascio del pulsante, esegue immediatamente un movimento repentino col mouse, il puntatore potrebbe uscire dal punto prima che l applicazione cominci a registrare l evento MOUSE_OUT. In questo caso il punto non verrebbe deselezionato compromettendo, ovviamente, la consistenza interna dell applicazione. Come si vede la gestione degli eventi del mouse è delicata e porta facilmente a sottili errori di programmazione. Una soluzione è quella di assegnare una hitarea al punto di controllo appena ci si clicca sopra per muoverlo. Questa hitarea può essere, ad esempio, l elemento più grande nel quale il punto può muoversi 18. Un altra soluzione, probabilmente più elegante, è quella di separare completamente le operazioni di selezione e deselezione dei punti da quelle necessarie al movimento di questi. Per fare ciò, non si disattiva l ascolto degli eventi MOUSE_OUT e MOUSE_OVER quando si clicca sul punto da muovere ma si salva in una nuova variabile il riferimento del punto che l utente intende muovere; in questo modo i punti verranno selezionati e deselezionati senza i problemi esposti sopra. Inoltre, fino a quando l utente non rilascia il mouse, l applicazione conosce quale punto deve spostare qualunque sia la 18 Nell applicazione si tratta di un oggetto Canvas contente l area di disegno e che funge da cornice atta a contenere eventuali punti morbidi di un oggetto che fuoriescono da questa.

83 CAPITOLO 5. DISEGNO DI CURVE 77 Selezionato tool Select ctrl points MOUSE_OVER MOUSE_OUT Seleziona punto Deseleziona punto Click su un punto di controllo Fine ascolto MOUSE_OVER Fine ascolto MOUSE_OUT MOUSE_MOVE sul punto selezionato MOUSE_UP sul punto selezionato L utente muove il mouse e poi rilascia Al momento del rilascio il puntatore è dentro il punto di controllo? SÌ NO Deseleziona il punto di controllo NO L utente deseleziona tool Select ctrl points? SÌ STOP Figura 5.8: Sequenza logica seguita dal codice per muovere i punti di controllo

84 CAPITOLO 5. DISEGNO DI CURVE 78 posizione del puntatore, mettendosi al riparo da eventuali movimenti bruschi da parte dell utente.

85 Capitolo 6 La distribuzione sul Web: confronto tra Flex e Matlab 6.1 Introduzione Durante il corso di Laurea sono entrato in contatto con diversi pacchetti software. Uno di questi è MATLAB, di cui ho potuto approfondire le potenzialità e che, in ambiente accademico, riveste un ruolo importante tra gli strumenti di sviluppo di applicativi. Finora si sono viste le potenzialità di Flex per portare contenuti altamente dinamici ed interattivi sul web. I linguaggi e gli standard su cui è basato Flex però sono stati progettati per rendere possibile la realizzazione delle più diverse tipologie di software e non sono specializzati verso il calcolo scientifico e numerico o verso ambiti ingegneristici. Il pacchetto MATLAB è invece prettamente rivolto al calcolo numerico, offre la possibilità di creare applicazioni, anche dotate di GUI, molto rapidamente ed è corredato da numerosi Toolbox, pacchetti aggiuntivi che ne estendono le capacità e sono rivolti ad ambiti scientifici ed ingegneristici. Avendo avuto la possibilità di utilizzare questi due ambienti di sviluppo, MATLAB e Flex, ho voluto dapprima approfondire le possibilità che il primo offre per distribuire le proprie applicazioni sul web e successivamente presentare i dovuti confronti tra i due software tenendo conto dei principali aspetti del ciclo di sviluppo di un applicazione: la scrittura del codice e la 79

86 CAPITOLO 6. MATLAB PER IL WEB 80 distribuzione dell applicativo stesso. Nei prossimi paragrafi, pertanto, vedremo alcune opzioni, offerte da MA- TLAB stesso, per portare sul web le applicazioni con esso costruite. Una di queste è quella di trasformare una applicazione MATLAB in una applicazione stand-alone che, come vedremo, sarà direttamente eseguibile dal computer dell utente. Con questo approccio il web viene impiegato semplicemente come veicolo per distribuire l applicativo stesso. MATLAB inoltre fornisce la possibilità di interfacciare il proprio codice con varie tecnologie, tra le quali la piattaforma.net e l applicativo Excel di Microsoft e il linguaggio Java. Esamineremo cosa offre la cooperazione tra i linguaggi MATLAB e Java sempre nell ottica di permettere all utente di accedere al software realizzato con MATLAB attraverso il web. Infine presenteremo un confronto tra Flex e MATLAB soprattutto evidenziando per quale tipologia di applicazioni sia meglio scegliere l uno o l altro come ambiente di sviluppo. 6.2 Distribuire un applicazione MATLAB in formato eseguibile attraverso il web Questa possibilità ci viene offerta dal MATLAB Compiler, strumento compreso nel pacchetto, che converte il codice MATLAB in codice C/C++ e lo compila creando un eseguibile. In alternativa, il Compiler può creare delle librerie che possono essere usate per implementare applicazioni scritte in C/C++. È possibile, inoltre, utilizzare il deploytool, che permette di compilare il proprio codice mediante la GUI di MATLAB senza usare il compilatore dalla riga di comando. Per testare il tutto si è considerata una piccola applicazione MATLAB, dotata di GUI, che visualizza una curva spline, parametrica, interpolante tre punti (in corrispondenza dei valori del parametro 0, 1/2 e 1) e tangente ad una retta passante per il primo punto 1. Mediante la GUI l utente può specificare le coordinate dei tre punti e la direzione della retta (vedi Figura 1 Reperibile qui: htm

87 CAPITOLO 6. MATLAB PER IL WEB ). Il test ha dato esito positivo, è sufficiente indicare a MATLAB quale m- Figura 6.1: Applicazione per testare il MATLAB Compiler file compilare e selezionare l opzione applicazione stand-alone per ottenere un eseguibile di pochi kilobyte. Tutto il linguaggio MATLAB è compilabile, esistono però delle limitazioni riguardanti alcuni toolbox e le GUI predefinite del pacchetto. A questo punto l eseguibile ottenuto può essere distribuito fornendo un link al file appena creato all interno di una pagina web. In questo modo però non abbiamo un applicazione Internet vera e propria ma utilizziamo il web come strumento per distribuire la nostra applicazione. Ottenuto il file eseguibile l utente può avviare l applicazione anche su un computer che non include MATLAB nel proprio parco software a patto che su tale macchina sia installato il MATLAB Component Runtime di cui tratteremo nel prossimo paragrafo.

88 CAPITOLO 6. MATLAB PER IL WEB Il MATLAB Component Runtime Il MATLAB Component Runtime è l insieme di librerie a link dinamico necessarie al funzionamento delle applicazioni create con il MATLAB Compiler su computer che non hanno MATLAB installato. Il MATLAB Component Runtime si installa con il tool MCRInstaller che automatizza il tutto. Questo però occupa 171 megabyte di spazio su disco 2, rendendone ostico l eventuale download dal web in mancanza di una connessione performante. Inoltre, le applicazioni che si vogliono distribuire, funzioneranno solo se la piattaforma su cui sono state compilate coincide con quella della macchina target. Pertanto un utente con sistema operativo Gnu/Linux non potrà far funzionare applicazioni compilate su un computer con Windows anche con il MCR installato. Molte Università forniscono sul proprio sito web un link per il download del MCRInstaller e i link per le vari applicazioni sviluppate in MATLAB. La distribuzione del MCR è legale e gratuita. 6.4 Matlab e Java Sempre compreso in MATLAB, troviamo il MATLAB Builder for Java. Questo tool trasforma il codice MATLAB in una o più classi Java e, ad ogni funzione MATLAB, corrisponde un metodo Java che può essere invocato da un altra applicazione Java. Infatti questo strumento non prevede la creazione di applicazioni stand-alone, ma solamente di componenti Java che fungono da librerie per altre applicazioni. In ogni caso è sufficiente scrivere un minuscolo frammento di codice Java per chiamare i metodi delle classi creati dal Builder per ottenere un applicazione eseguibile. L m-file contente il codice dell applicazione di test usata poc anzi è di tipo function. I parametri che questa funzione MATLAB accetta in input servono per specificare delle opzioni della GUI mentre, quelli restituiti in output, servono per poter controllare tale interfaccia da codice esterno, entrambi, pertanto, non sono fondamentali. Il MATLAB Compiler, istruito per 2 Nella sua versione per la famiglia di sistemi operativi Windows, questa dimensione è pressoché analoga a quella delle altre piattaforme.

89 CAPITOLO 6. MATLAB PER IL WEB 83 creare un applicazione stand-alone, generava, nell esempio precedente, il codice necessario per invocare la funzione spl senza parametri in input. Questo è possibile perchè il parametro in input della funzione è di tipo varargin e pertanto la funzione può essere invocata senza parametri obbligatori. 6.5 Costruzione di un applicazione Java Vediamo adesso le operazioni necessarie per creare un applicazione Java in quanto, con tale linguaggio, come si vedrà in seguito, è possibile sfruttare un altra possibilità per portare contenuti MATLAB sul web. Anche per il MATLAB Builder for Java è disponibile una GUI per non ricorrere alla riga di comando. Si adopera questo tool per indicare a MATLAB di convertire il m-file spl.m in codice Java. Creiamo un progetto di nome spl e aggiungiamo a questo il file spl.m, dopo di che clicchiamo sul bottone preposto alla trasformazione del codice. Il Builder genera anche dei comodi file HTML con la documentazione delle classi e dei metodi Java appena creati. A questo punto editiamo questo file Java che chiameremo wrapper.java : import com.mathworks.toolbox.javabuilder.*; import spl.*; public class wrapper{ public static void main(string[] args){ try{ splclass instance = new splclass(); instance.spl(0); } catch (Exception e){ System.out.println("Exception: " + e.tostring()); } } } Le prime due righe sono obbligatorie e servono ad importare classi e metodi necessari alla creazione dell applicazione; la prima riga corrisponde al codice

90 CAPITOLO 6. MATLAB PER IL WEB 84 contenuto nell archivio javabuilder.jar fornito insieme al pacchetto, mentre la seconda si riferisce all archivio spl.jar ottenuto grazie al Builder for Java. Analizzando la documentazione HTML generata dal Builder si vede come, nel nostro caso, dobbiamo instanziare la classe splclass e, tramite l oggetto creato, chiamare il metodo spl. La firma di spl è: public java.lang.object[] spl(int nargout, java.lang.object... rhs) throws com.mathworks.toolbox.javabuilder.mwexception Spl richiede pertanto un parametro in input ( nargout ) di tipo int (numero intero) indicante il numero di elementi restituiti dalla funzione MA- TLAB, siccome la funzione in MATLAB restituisce solamente un handle per manipolare la GUI possiamo passare il valore 0. Il secondo parametro ( rhs ) di tipo java.lang.object... rappresenta un array a lunghezza variabile equivalente al varargin di MATLAB, nel nostro caso non passiamo nessun valore dato che questi parametri settano semplicemente delle opzioni della GUI. Si notino i blocchi try/catch, sono indispensabili in quanto sia il costruttore della classe splclass sia il metodo spl possono sollevare eccezioni. La documentazione ufficiale descrive la API MWArray che permette di gestire nel codice Java i vari tipi di matrici di MATLAB. Se non è stato fatto in precedenza si deve scaricare il Java Development Kit (JDK) dal sito il compilatore Java, per compilare il file wrapper.java. Dopo averlo installato compiliamo col comando 3 : javac -classpath javabuilder.jar;spl.jar wrapper.java Per eseguire l applicazione utilizziamo invece il comando 4 : java -classpath.;javabuilder.jar;spl.jar wrapper 3 Si assume che i file javabuilder.jar e spl.jar siano nella stessa cartella del file wrapper.java e che la directory corrente coincida con la cartella contenente questi file. 4 Alternativamente è possibile creare un archivio eseguibile jar, con l omonimo tool fornito insieme al JDK, in modo da ottenere un singolo file avviabile con un semplice click.

91 CAPITOLO 6. MATLAB PER IL WEB 85 Anche in questo caso, per far girare l applicazione, è necessario che sulla macchina sia installato MATLAB o il MCR. Inoltre non è prevista la possibilità di creare applet o applicazioni compatibili con la tecnologia Java Web Start. Questa limitazione, come anche nel caso precedente in cui si creava un programma C/C++, non ci consente di sviluppare delle applicazioni web vere e proprie ma solamente di permettere il download di queste da un sito web. Il vantaggio di usare Java è quello di poter scrivere programmi con un linguaggio più semplice del C/C++ e che, rispetto a questo, ha una libreria standard che permette la creazione di ogni genere di applicazione senza dover ricorrere ad API di sistema o a codice di terze parti. Pertanto è possibile scrivere in Java tutte quelle funzionalità in cui MA- TLAB non eccelle, in quanto non rappresentanti l obiettivo principe del pacchetto, per costruire, ad esempio, software altamente interattivo e graficamente appetibile sfruttando magari il bagaglio di algoritmi MATLAB sviluppati precedentemente MATLAB e le servlet Java Si è approfondito come interfacciare Java con MATLAB anche per un altro motivo, ossia per utilizzare la tecnologia delle Servlet Java, le quali sono dei programmi lato-server che permettono di generare contenuto dinamico nelle pagine web, rientrando di diritto nel campo delle applicazioni web e non più nella semplice distribuzione di software mediante il web. Con questa tecnologia, analoga alla CGI (vedi 1.6), l utente, raggiunta l apposita pagina, compila un modulo con i dati di input, l invia al server che calcola la risposta, con l ausilio del codice MATLAB trasformato in Java, e la invia, formattata come pagina HTML, all utente. Per verificare le potenzialità si è seguito il demo VarArgServlet suggerito dalla documentazione MATLAB, per il quale è necessario disporre di un web server 5 predisposto alle Servlet Java (ad esempio Tomcat in quanto open 5 Un web server è un programma (e, per estensione, il computer) che si occupa di fornire, su richiesta del browser, una pagina web (spesso scritta in HTML). Le informazioni inviate dal web server viaggiano in rete trasportate dal protocollo HTTP. L insieme di webserver

92 CAPITOLO 6. MATLAB PER IL WEB 86 source, affidabile e facile da configurare). Mentre le funzioni MATLAB possono rimanere pressocché invariate, è necessario creare almeno un file Java che svolga le operazioni di lettura dell input inviato dall utente e di formattazione della pagina HTML. Dopo aver seguito le istruzioni di compilazione del codice e aver posizionato i file nelle giuste directory del webserver, questo è pronto a ricevere l input dell utente tramite la pagina web contenente il modulo (vedi Figura 6.2). Figura 6.2: Pagina contenente il form per inviare i dati al web server L applicazione sul server riceve i valori immessi dall utente e restituisce una pagina HTML contenente i dati di media e deviazione standard oltre ad un grafico con il plot dei valori stessi (vedi Figura 6.3). Sopra il plot possiamo notare dei comandi, questi servono per ingrandire, spostare o ruotare in 3D il grafico e sono offerti dalla funzionalità WebFigures di MATLAB, pertanto, questi strumenti, non devono essere programmati a parte ma sono disponibili per tutti i grafici. presenti su Internet forma il World Wide Web (WWW), uno dei servizi più sfruttati della Grande Rete (citazione da [17]).

93 CAPITOLO 6. MATLAB PER IL WEB 87 Figura 6.3: La risposta dal web server