Bolle di sapone

Introduzione

Dopo il successo riscontrato con la pubblicazione del mio primo tutorial su Quartz Composer (pf!) , rieccomi di nuovo qui con una nuova idea in testa ed un nuovo progetto completo tra le mani.
Questa volta mi soffermerò su come ottenere un vero “effetto bolle di sapone” e su come mantenere al suo posto un logo o una scritta all'interno della composizione indipendentemente dalla risoluzione dello schermo.


Bolle di sapone con una consistenza di Quartz

Come al solito questo progetto è nato a partire da una idea che non era quella che vedrete realizzarsi a poco a poco: io avevo in mente proprio tutt'altro. :P
Mentre però non riuscivo ad ottenere proprio l'effetto a cui avevo pensato con il disegno che avevo fatto, mi è saltata in mente l'idea che alla fine questo progetto potesse prestarsi per realizzare un effetto “bolle di sapone nel cielo” che non mi dispiaceva affatto. Come al solito quindi, mi sono rimboccata le maniche e ho aperto Gimp. :D


Creare una bolla di sapone con Gimp

Premesso che per me è ancora un arcano l'utilizzo dello strumento “curve” di Gimp (!), ho utilizzato il filtro “xFig”, nel menù “Render”. E' stato con questo strumento che ho potuto disegnare un cerchio credibile (opzione “Cerchio”) con un piccolo riflesso al suo interno (opzione “Curva”), utilizzando un pennello abbastanza “grassoccio” e il colore bianco su una superficie trasparente di dimensioni 255x255: quello che consiglio di fare è di non di tracciare i due punti di riferimento e indicare il verso di percorrenza della curva ma di cercare di “accompagnare” l'arco in due passi. Semplicemente in questo modo tutto il disegno risulta meno asettico e più personale.
Naturalmente a questo punto ho salvato tutto e sono tornata a Quartz Composer.


Gradiente e bolle di sapone

All'inizio avevo pensato che potesse essere una idea da cui iniziare quella che prevedeva un numero abbastanza limitato di bolle di sapone in giro per lo schermo con interpolazioni di movimento diverse.
Riflettendoci bene però mi sono accorta che parlare di un sistema di questo tipo voleva semplicemente dire parlare di un “Particle System”  con parametri particolari, nel mio caso ancora tutti da scoprire.
La scelta di usare questo componente, tra le altre cose, mi avrebbe portato qualche vantaggio in più: avrei potuto per esempio scegliere il numero di oggetti nel cielo, la loro velocità e il problema del movimento lungo i tre assi si sarebbe ridotto notevolmente.
Avendo deciso di basarmi su un disegno molto minimalista ho creato il cielo utilizzando un semplice gradiente con “Start Color” Aqua e “Middle Color” Sky.
Per renderizzare il disegno delle bolle ho importato l'immagine realizzata poco prima e l'ho messa come input della proprietà “Image” del “Particle System” con il Blending impostato a “Over” mentre per rendere bene in movimento casuale ho piazzato sulla griglia due oggetti “Random” con range [-1,1] che poi sono diventati l' input di Y e Z Position nel sistema.


Il bello della composizione: scritte che non si scompongono mai

In tutte le composizioni che sono capitate sul mio desktop ho sempre rilevato una grossa pecca: le scritte che non erano centrate nella composizione ma che al contrario si trovavano in qualche altra posizione, finivano sempre per sparire fuori dallo schermo per qualche risoluzione.
Anche se non avevo proprio idea di come cominciare, mi sono fatta un bel giro tra tutte le patch fornite dall'applicazione e ho trovato “Rendering Destination Dimensions”: premesso che in questo componente vengono forniti i pixel di altezza della finestra di rendering, quelli in larghezza della stessa finestra e i pixel per unità, è stato semplice capire che con qualche semplice calcolo era possibile far stare al suo posto praticamente ogni tipo di scritta.
Andiamo in ogni caso con ordine: per prima cosa ho creato una immagine da una stringa e l'ho mostrata con un oggetto Sprite sempre con “Blending” impostato a “Over” e altezza e larghezza prese in input da quelle in output da “Image With String”.
Per ottenere la X Position dello Sprite, ho preso “Pixel Wide” e l'ho diviso per “Resolution” con un componente “Math”: siccome infatti lo spostamento sulla finestra delle immagini si calcola in unità, questa conversione si era resa necessaria. Al suo risultato ho sottratto la width in output dell'immagine da stringa e ho diviso il tutto per due.
Praticamente allo stesso modo, per ottenere la posizione Y dello Sprite ho preso l'altezza dell'area di rendering e l'ho divisa per la  risoluzione; al suo risultato ho sottratto la larghezza della scritta e ho diviso tutto per due.
Adesso ridimensionando la finestra la scritta non esce mai dallo schermo, garantendo una visibilità massima ad ogni risoluzione.


Aggiungere del colore


Per colorare le bolle di sapone ho impiegato un “RGB color” collegato per ogni colore a tre LFO differenti solo per tipo (Sin, Cos, Triangle): questo mi ha permesso di osservare una colorazione  abbastanza varia senza regolare troppi parametri.

La panoramica del progetto