Effetto Acqua

Juna - 21 giu 2005
Prefazione

L’esigenza di scrivere questo piccolo saggio sulla realizzazione di uno dei miei primi lavori completati con “Quartz Composer” nasce dalla constatazione che questo strumento divertente e straordinario è stato di fatto per la gran parte ignorato da quella che si è soliti indicare come “letteratura specializzata informatica”.
In effetti anche se questo applicativo può vantare una interfaccia assai intuitiva, può non essere chiaro, almeno durante i primi tentativi di utilizzo, l’  “approccio” ai problemi più comuni che possono presentarsi durante la realizzazione di un lavoro.
Ecco dunque lo scopo di questo testo: fornire una buona (almeno spero!) documentazione per un primo “contatto” con il programma e con le sue problematiche.
Spero che vi diverta leggere questo testo almeno quanto mi sono divertita io a scoprire, passo dopo passo, tecniche e segreti di questo “compositore di effetti”.


L'idea

Tutto nasce con i miei primi esperimenti con Quartz Composer: piazzare quattro o cinque componenti sulla griglia e constatare la "potenza" grafica di questo applicativo sono tutt'uno.
Mossa dalla voglia di concepire e realizzare un progetto tutto mio, ci metto poco a buttare giù una bozza di questo screensaver: una scritta "DigitalWaters" nel bel mezzo di un gradiente con i colori del sito; siccome poi si avvicina l'estate, trovo carina l'idea di "sommergere" il tutto con tanti metri cubi di "acqua digitale".


Primi passi nel progetto: lo sfondo e la scritta

Siccome sono alle prime armi e non ho proprio intenzione di complicarmi la vita buttandomi in imprese che per il momento posso definire "più grandi di me", comincio con lo sfondo.
Trascino un componente "Gradient" sulla griglia ed imposto il colore iniziale, di mezzo e finale rispettivamente a "verde digitalwater" (:P), "bianco" e "bianco". :D
Per ottenere la scritta utilizzo un componente "Image With String" in cui assegno alla proprietà (se di proprietà si può parlare anche in questa applicazione!) "String" il valore "DigitalWaters.net": da questa "patch" (così si chiamano in gergo questi rettangolini che cominciano a essere disposti in modo più o meno disordinato sulla griglia) ottengo una immagine che rispecchia la stringa.
Adesso finalmente posso passare alla parte più interessante: la composizione degli elementi dell'effetto acqua vero e proprio e la loro disposizione nella scena.


Comporre l'immagine di una ondina con Gimp

Dopo qualche giorno di riflessione sono approdata alla soluzione che per ottenere un effetto acqua realistico c'è bisogno di una maschera, qualcosa che "plasmi" la mia scritta secondo un pattern preciso ma non troppo...
Apro Gimp e penso: "se proprio non mi riesce di usare questo tool per le curve, come posso cavarmela lo stesso?".
Seleziono un rettangolo alto due quadretti e lungo dodici che riempo con il solito "verde DigitalWaters" (ormai lo chiamo così per comodità).
All'inizio ce la metto proprio tutta per deformarlo oppure disegnare l'ondina a mano, poi concludo che per queste cose (almeno con Gimp) sono scarsissima :( e devo di nuovo ingegnarmi per automatizzare questa composizione.
Mi accorgo allora che tra i filtri, sotto il menù "Distorsione", ne esiste uno che si chiama (ma guarda un po'!) "Onde": sicura di essere più vicina al miracolo gioco un po' con i parametri fino ad ottenere una ondina più o meno credibile (!).
Ritaglio il pezzo dell'immagine che mi sembra più "affiancabile" e gli applico una leggerissima sfuocatura per essere sicura che acquisti abbastanza versatilità per il mio proposito: anche se l'immagine non rimane perfetta, non mi preoccupo perchè ho buone ragioni di credere che durante il suo utilizzo nell'effetto le imperfezioni non mi daranno problemi.

La salvo come png con sfondo trasparente, con una dimensione totale di 98x16 e chiudo Gimp.


L'effetto acqua

Ho speso più di qualche giornata a fare prove su quale fosse il miglior modo di ottenere quello che volevo: un effetto acqua abbastanza credibile.
Alla fine, dopo aver scartato bump e distorsioni varie, ho deciso di abbracciare la filosofia della "Glass Distortion": piazzo sulla griglia una patch di questo tipo e imposto come "Image" in input l'immagine ricavata in output da "Image With String"; siccome è arrivato anche il momento di sfruttare la mia ondina, la metto come "Texture" di input.
Gestire il movimento è abbastanza facile perchè basta sfruttare un semplice contatore basato su un componente "LFO", che ho chiamato "LFO Acqua".
Questo oscillatore è di tipo "Square" e per motivi tutt'altro che scientifici, bensì puramente estetici, lo imposto ad un periodo pari a 0.08, una fase pari a 0, una ampiezza pari a 0.4 ed un offset pari a 0.1. Il suo risultato, arrotondato con un oggetto "Round", diventa l' "Increasing Signal" di un "Counter", la cui proprietà "Count" finisce per determinare il valore "Center (X)" del "Glass Distortion" sopracitato.
Tutto questo solo per ottenere un movimento fluido, particolare, ma non troppo rapido. :P


Ultimazione del lavoro

A questo punto manca solo una cosa: il metodo di displaying.
Poichè "Glass Distortion" genera una immagine di output che può anche avere dimensioni infinite, è necessario utilizzare un oggetto "Crop"che in un certo senso "taglia via" le dimensioni in eccesso e  mi permette di mostrare il risultato su una semplice Billboard.
Ecco fatto, l'effetto è abbastanza realistico e posso considerarmi proprio soddisfatta! :D



 
Weblog Koan Progetti Foto Contatti