Computer Graphics e Web Design - Chi sono · algoritmi e tecniche di rappresentazione ... modellare...

©2004 { Dr. M. Carta, Ing. M. Ennas, Ing. S. Piras, Ing. F. Saba }

Computer Computer GraphicsGraphicse Web Designe Web Design

Elementi di informatica grafica e tecniche di progettazione

visuale di siti Web


Note di Copyright

Queste trasparenze (slide) sono coperte dalle leggi sul copyright. Testi grafica

e immagini in essa contenuti sono di proprietà dei rispettivi autori:

Dr. Maurizio Carta, Dr. Maurizio Carta, IngIng. Mauro. Mauro EnnasEnnas,, IngIng. Stefano . Stefano PirasPiras e e IngIng. Fabrizio . Fabrizio SabaSaba..

Tali slide possono essere duplicate e riprodotte dalle scuole di ogni ordine e

grado italiane o estere per applicazioni legate alla didattica e senza finalità

di lucro.

Ogni altra finalità o uso (ivi compresa la duplicazione su supporto magnetico, la

trasmissione, la memorizzazione e la stampa totale o parziale) è vietata senza

autorizzazione scritta da parte degli autori.

Gli autori non si assumono nessuna responsabilità sulle informazioni contenute in

queste slide che sono state realizzate per finalità meramente didattiche e sono

aggiornate alla data riportata in calce.

L’intestazione a piè pagina deve comunque non essere alterata e deve sempre

essere riportata anche in un utilizzo parziale del suddetto materiale.


Obiettivi del corso

Alla fine del corso sarete in grado di:• Distinguere e comprendere le tecnologie della computer graphics come:

– le tecniche di “rasterizzazione”, le trasformazioni geometriche e il trattamento del colore

– le tecniche di modellazione, texturing, illuminazione e rendering

• Riconoscere e valutare l’uso integrato di hw e sw per la progettazione grafica e il Web design

• Distinguere l’uso specialistico dei maggiori software di grafica avanzata 2D/3D e fotoritocco

• Comprendere a fondo le tecniche di Web design per la progettazione avanzata di siti


Indice del corso

•• Modulo 1Modulo 1: : Definizioni e termini ricorrentiDefinizioni e termini ricorrenti

• Modulo 2: Hardware per la grafica e il Web design• Modulo 3: Spazio e rappresentazione• Modulo 4: Illuminazione• Modulo 5: Teoria del colore• Modulo 6: Web design e Web marketing• Modulo 7: Usabilità Web• Modulo 8: La percezione delle forme• Modulo 9: Progettare il front-end di un sito Web• Modulo 10: Web systems• Workshop: Progettare un sito Web


Modulo 1Modulo 1

Definizioni introduttive e concetti ricorrenti


In questo modulo

• Definizioni e terminologie della Computer Graphics

• Approccio interdisciplinare alla grafica• Campi d’applicazione della Computer Graphics


Cos’è la Computer Graphics

• E’ il settore dell’informatica che riguarda l’impiego del calcolatore nel campo della grafica, e quindi lo studio di algoritmi e tecniche di rappresentazione delle infor-mazioni atte a migliorare la comunicazione tra uomo e macchina

• Gli algoritmi sono in grado di creare, modellare e simulare strutture visuali ottimizzando le prestazioni della elaborazione e della visualizzazione mediante l’utilizzo di hardware dedicato


Cenni storici

• Si sviluppa parallelamente all’introduzione dei computer per soddisfare la necessità di definire formalmente il modo di rappresentare in forma visuale i dati numerici generati

• La Computer Graphics oggi è praticamente solo interattiva ed opera in un contesto in cui l’utente del sistema ha il controllo continuo sul contenuto, l’aspetto e la struttura degli oggetti rappresentati

Cos’è la Computer Cos’è la Computer GraphicsGraphics


Cenni storici

• Fino agli anni ‘80 l’utilizzo di strumenti di Computer Graphics era limitato a causa dell’alto costo delle attrezzature (~50.000-100.000€)

• L’introduzione, nei Personal Computer (PC), di schede grafiche con sistemi raster incorporati, ha reso acces-sibile, a basso costo, l’uso di grafica sofisticata sia in ambito 2D che 3D (~100€)



Cenni storici

• La Computer Graphics è la naturale evoluzione del processo di rappresentazione della natura che ha portato l’uomo a sviluppare pittura e scultura, la stampa e la fotografia

• Con la CG si possono rappresentare anche oggetti e modelli virtuali, costruiti rigorosamente a partire da solide fondamenta matematiche



Principali campi di ricerca Principali campi di ricerca e di applicazionee di applicazione

A cosa serve la Computer Graphics


Interfacce Grafiche (GUI)

• Le interfacce grafiche consentono all’utente di gestire molteplici attività con crescente facilità e soprattutto in modo parallelo (contemporaneamente)

• Permettono all’utente di selezionare da un menù, icone ed oggetti qualsiasi sullo schermo, tramite un mecca-nismo “point & click”

• La tastiera si rende necessaria solo per inserire testo, utilizzare scorciatoie o macro

Principali campi di ricerca e di applicazionePrincipali campi di ricerca e di applicazione



• Word Processor (elaboratore di testi), Spreadsheet (foglio di calcolo) e applicazioni per il DeskTop Publishing(DTP) sono tipiche applicazioni che traggono enorme vantaggio dall’uso di interfacce grafiche (GUI, Graphical User Interface)

• La facilità d’uso degli strumenti visuali in ogni ambiente unito alla grande espansione delle reti di calcolatori ha portato alla possibilità di scambiare informazioni in un ambiente ipertestuale e multimediale, riducendo drasti-camente l’uso del tradizionale supporto cartaceo



Computer Aided Design (CAD)

• Progettare componenti e sistemi meccanici, elettrici ed elettronici incluse strutture come automobili, edifici, circuiti microelettronici

• Durante la fase di progetto si può interagire con il modello per verificare le caratteristiche (simulare le caratteristiche meccaniche di una struttura o quelle elettriche di un circuito in condizioni particolari)

• Il sistema guida il progettista nel compiere scelte sulla base dei risultati di prove simulate ripetute



Computer Aided Design (CAD)



Visualizzazione scientifica

• Rappresentazione visuale di fenomeni naturali modellati matematicamente e simulati numericamente

• I dati che si vogliono rappresentare possono essere generati da programmi di simulazione numerica o anche acquisiti in forma digitale




• La “prototipazione virtuale” di oggetti ovvero la visualizzazione di un insieme di soluzioni numeriche ed equazioni che descrivono l’oggetto

• Il prototipo virtuale è molto più semplice e veloce da modificare di uno reale e la sua modifica è meno costosa





Software di calcolo strutturale: visualizzazione degli sforzi in relazione a carichi agenti, azione del calore, pressioni idrodinamiche


Medical Imaging

• Mediante tecniche grafiche si vogliono rappresentare dati piani (2D) o volumetrici (3D) acquisiti da apparati come la TAC (Tomografia Assiale Computerizzata) o la RMN (Risonamza Magnetica Nucleare), visualizzando partico-lari anatomici nascosti, malformazioni ecc.

• Il fine è quello di aiutare il medico specialista nella diagnosi



Medical Imaging



Intrattenimento

• E’ il settore della Computer Graphics nel quale attualmente si investono più risorse – I videogiochi (strumenti hardware e tecnologie software

sviluppate in grafica interattiva)– La realizzazione di cartoni animati sintetici, di sigle e filmati

pubblicitari per la TV, di scene virtuali per il cinema, di demo interattive per il training on the job, la didattica e l’editoria



Realtà virtuale

• I sistemi di realtà virtuale (virtual reality) sono quelli in cui l’utilizzatore non solo interagisce con il sistema in tempo reale ma ha anche la sensazione che il suo mondo (reale) sia diverso da quello che realmente è

• Si parla invece di realtà aumentata (augmented reality) quando, attraverso schermi semi-trasparenti, si riesce a sovrapporre immagini reali e sintetiche nella stessa scena



Realtà virtuale

• I sensi dell’utilizzatore (soprattutto la vista) sono portati a credere che il mondo sintetico costruito dal computeresista veramente

• Si simula il tatto usando degli strumenti che applicati alle mani dell’utilizzatore ne stimolano i recettori tattili per far credere che si stiano toccando degli oggetti che sono solo sintetici, immaginari o virtuali



Realtà virtuale


Guanti per lo stimolodei ricettori tattili

Workstation consoftware per VR

Occhiali per la “visione”degli oggetti in RV


Web Design



Altri campi di applicazione

• Nel controllo di processo industriale• Simulatori di volo per l’addestramento di piloti civili e

militari• Simulatori di interventi chirurgici per l’addestramento di

personale medico (realtà aumentata)• Sistemi informativi territoriali e geografici (SIT o GIS, Geographical Information System)



Altri campi di applicazione

• Sistemi informativi territoriali e geografici (SIT o GIS)



Computer Art



Computer Art


Mattew Simmonds arts


Computer Art


Gary Hopkins arts

Mckenzie arts


Principali campi di ricerca

• Geometria computazionale• Modellazione solida• Curve e superfici• Texturing

• Illuminazione• Rendering e Animazione • Human Computer Interaction (HCI)



Geometria computazionale

• Progettazione di algoritmi per la soluzione di problemi geometrici (ad esempio, la “tassellazione” di una regione convessa del piano per mezzo di triangoli) basandosi su fondamenti di geometria descrittiva

• E’ la disciplina che si occupa di risolvere problemi intrinsecamente geometrici con l’utilizzo di strumenti automatici



Modellazione solida

• E’ la disciplina che studia come definire gli algoritmi e quali strutture dati utilizzare per la rappresentazione matematica tramite segmenti, curve e superfici di oggetti reali e non

• È la base teorica dei sistemi CAD• Le due linee di sviluppo principali sono la modellazione

tramite le superfici che delimitano un solido o la modellazione del solido stesso descrivendolo direttamente come un modello tridimensionale (modelli volumetrici)



Curve e superfici

• Definizione di algoritmi e strutture dati per rappresentare curve (2D e 3D) e superfici in maniera approssimata

• Rappresentazioni geometriche approssimate (segmenti e poligoni)

• Stretta relazione con le tecniche di modellazione solida



Texturing

• Il texturing è la disciplina che, analizzando le caratteristiche delle superfici, ci permette di cogliere aspetti importanti della realtà

• Ogni superficie ha una sua caratterizzazione sensoriale (visiva e qualche volta tattile), può essere liscia o ruvida, uniforme ovariegata, porosa o compatta; questi aspetti che concorrono a definire una forma visiva legata ad una associazione sensoriale complessa, prendono il nome di texture– La buccia d’arancia, i pori della pelle, le superfici delle pietre, la

corteccia degli alberi sono texture naturali che caratterizzano le forme, ce le fanno riconoscere e ne completano il significato

– Alcuni materiali variano il loro aspetto se vengono “texturizzati”. Una grande varietà di texture artificiali si trova nei materiali da rivestimento: intonaci, pietre lavorate per le facciate dei palazzi, ecc…


Texturing


Illuminazione

• Gli effetti dell’illuminazione, luce ed ombra, hanno il compito importantissimo di facilitare la percezione dei volumi in una scena– luce ed ombra non sono sempre uguali, di conseguenza

varia anche l’effetto di volume che queste determinano

• Si definisce chiaroscuro, il contrasto fra luce ed ombra• Si definisce sfumatura il graduale passaggio tra toni

chiari e scuri


Illuminazione

• L’osservazione attenta di come varia la percezione del volume di un oggetto al variare della fonte luminosa ci fa capire quale tipo di luce sia necessaria per ottenere gli effetti di volume, di plasticità, di chiaroscuro o di sfumatura della scena


Illuminazione

• Luce naturale diretta: – ombre nette (giornata di sole)

• Luce naturale diffusa:– ombre meno nette con effetti vicini allo sfumato (ad

esempio una giornata coperta)

• Luce artificiale:– puntiforme– diffusa– più sorgenti luminose


Rendering

• L’insieme degli algoritmi che consentono di passare dal modello matematico (geometrico) della scena che si vuole visualizzare alla sua rappresentazione sullo schermo o su altro dispositivo di output

• Varie tipologie di oggetti reali possono essere rappresentati in maniera anche molto sofisticata (ad esempio l’erba, le asperità, i piumaggi, il fumo)


Human Computer Interaction

• Studio e progettazione delle tecniche di gestione delle interazioni uomo-macchina (HCI, Human-Computer Interaction)

• Si occupa di definire in maniera rigorosa come costruire le porzioni dei programmi che devono essere diret-tamente utilizzati dall’utente

• È una disciplina a cavallo tra Computer Graphics e la psicologia percettiva e cognitiva, poiché deve tenere conto anche di come le cose vengono percepite e non solo di come esse sono nella realtà



Cos’è il Web Design

• Il Web design è l’arte di costruire i siti Web• Tra le varie professioni del Web quella del Web designer è quella che richiede maggiori competenze interdisciplinari: coinvolge la psicologia cognitiva, il marketing applicato, la progettazione visuale, la defi-nizione e la creazione di contenuti artistici

• Il compito del Web designer è quello di dare forma alla “presenza” in rete e di facilitare l’usabilità delle funzionalità messe a disposizione dai servizi on-line


Cos’è il Web Design


Layout design

• Il layout design è la progettazione dello spazio visuale che conterrà gli elementi grafici (disegni e immagini), gli sfondi (margini, interlinee, spaziature), i contenuti (testi, allegati …) per l’editoria, per la stampa o per il Web

• Il layout design è la tecnica del disporre testi, immagini e contenuti multimediali di diverso genere all’interno di una stessa pagina o di più pagine Web, in continuità tra loro in una successione stilisticamente armoniosa


Illustrazione vettoriale

• Le illustrazioni vettoriali vengono create manipolando linee e curve: i dati dell'immagine vengono tradotti in formule matematiche che contengono tutte le istruzioni necessarie per tracciarle (ad esempio per un segmento vengono solo memorizzate le coordinate del punto iniziale e di quello finale, per un cerchio il centro e il raggio …)

• Le illustrazioni vettoriali registrano ogni immagine come un assieme di istruzioni che indicano come tracciare l'oggetto. Queste istruzioni sono di solito molto semplici e i file vettoriali che ne risultano sono molto più piccoli delle loro controparti bitmap


Illustrazione vettoriale

• Alta Precisione per disegni dettagliati

• Dimensione compatta• Gli oggetti grafici contengo-

no intelligenza codificata• Sono indipendenti dalla ri-

soluzione, purché siano sempre resi alla più alta risoluzione che il dispositivo di output può produrre

• Possono variare in dimen-sione senza perdita di qualità


Illustrazione raster

• L’illustrazione raster (o bitmapped) è definita da un insieme di elementi (pixel). La composizione avviene come in un mosaico e la memorizzazione attraverso una codifica basata su pixel e colori – Le immagini bitmap sono dipendenti dalla risoluzione:

quando si crea un file occorre specificare una risoluzione e quando si cambia la risoluzione (ad es. diminuendola) la qualità dell'immagine degrada

• Le immagini bitmap sono ideali per rappresentare immagini realistiche come le fotografie– Possono essere trasformate usando filtri di image editing

per creare una gamma di effetti speciali e look naturali


Illustrazione raster

• Rendono con qualità maggiore immagini con un numero elevato di colori o con texture complesse, come ad esempio le fotografie– la grafica bitmap si presta meglio alla

visualizzazione su video (il monitor è formato da una griglia)

– la grafica vettoriale per essere visualizzata deve passare necessariamente attraverso un processo di “rasterizzazione”

• Cambiando le dimensioni di un'immagine bitmap la qualità viene peggiorata perché i pixel non riescono ad adattarsi facilmente alla nuova “mappatura”


Lettering e tipi di fonts

• Il lettering è quella disciplina che si occupa della progettazione del carattere tipografico, dal disegno sino al criterio di scelta nell’elaborazione del progetto grafico

• I problemi affrontati dal lettering riguardano in particolare la chiarezza visiva dei caratteri, la loro leggibilità, il rispetto delle regole geometriche nella spaziatura fra le lettere e le righe, le distanze, gli allineamenti, le filettature, il rapporto lettere e fondo, la dinamicità o staticità dell’effetto, la progettazione di nuovi caratteri, infine il problema della parola come immagine visiva


Lettering e tipi di fonts

• Nei sistemi DTP (DeskTop Publishing = editoria) il termine carattere tipografico è stato sostituito con il termine font, che indica la versione “digitalizzata” del carattere

• I font sono particolari tipi di istruzioni (software) che contengono la descrizione matematica, sotto forma di profili, di tutte le lettere e dei segni contenuti in un set di caratteri tipografici

• Le descrizioni sono indipendenti dalla dimensione: ciò significa che esse permettono di riprodurre un segno in modo identico e in qualunque misura. Queste vengono definite printer font (font per la stampa)

• Le visualizzazione dei font sul monitor vengono definite screen font poiché vengono descritte da pixel


Lettering e tipi di font

I punti evidenziati sono quelli che servono alla descrizione geometrica del carattere

Screenfont

Printer font


Fotoritocco

• Per fotoritocco si intende la manipolazione dell’immagi-ne digitale

• Per manipolazione dell’immagine digitale intendiamo l’ap-porto di modifiche che ne consentano il:– recupero e restauro– ritocco professionale– fotomontaggi– computer art, pittura digitale


Fotoritocco: recupero e restauro

David Truly photos


Fotoritocco: ritocco professionale

Shan Canfield photos


Fotoritocco: fotomontaggio


Fotoritocco: computer art – pittura digitale

Manuela Iurisci arte digitale - www.artxworld.com


Formato dei file

• Il numero spropositato di applicazioni per la grafica porta, inevitabilmente, alla proliferazione di un numero enorme di formati di file. Infatti, ogni applicativo ha il suo formato proprietario al quale si associa almeno un forma-to universale d’interscambio

• Questi formati universali sono leggibili e scrivibili da tutti i software professionali che si occupano di computer graphics

• I formati di file si possono dividere in vettoriali e raster


Formato dei file

• I principali formati vettoriali sono:– Per oggetti 3D: dxf – dwg – 3ds – xyz – obj – pixar– Per oggetti 2D: dxf – dwg – wmf– Vettoriale o raster incapsulato: eps

• I principali formati raster sono:– Per la grafica illustrativa: jpg – tiff – tga – bmp – pcx – Per il Web: gif – png – jpg

• Ci sono poi altri formati, sviluppati su piattaforme differenti da Intel®/MS-Windows®, che sono ormai utiliz-zati da tutti i sistemi:– iff – raw – psd – pict – ai – lwo – max – c4d – cdr – fhd


Questions Time!


Suggerimenti per approfondimenti

• Altri corsi da noi proposti:– CAD e Grafica 2D

• AUTOCAD• Photoshop• Golive

– Modellazione, Rendering e Grafica 3D • Rhino 3D• LightWave

– Grafica per il Web• Flash• Advanced Web Advertising

– Web Project Management • Web Marketing • Web Design• Web Systems


Bibliografia


Grazie per l’attenzione

Computer Graphics e Web Design - Chi sono · algoritmi e tecniche di rappresentazione ... modellare...

Documents

Transcript of Computer Graphics e Web Design - Chi sono · algoritmi e tecniche di rappresentazione ... modellare...