Gian Carlo Mingati. Design and development for interactive media.

Image credits: Perlin noise visualization.
http://www.openprocessing.org/visuals/?visualID=8172 - GC Mingati

La funzione noise() é comoda per generare una serie di numeri in successione con casualità controllata; la tecnica inventata da Ken Perlin negli anni ‘80 é stata spesso usata in computer graphics per imitare l’ apparente randomicità delle textures in natura o per riprodurre terreni, forme ecc. In queste immagini, si può vedere come il ‘Perlin noise’, influenzando la velocità delle particelle rosse, faccia variare il moto delle stesse ammassandole in forme sinuose che ricordano i vasi sanguigni e i meandri dei fiumi visti da grande altitudine. Nella Applet, ho aggiunto attrito e gravità orizzontale per influenzare ulteriormente questo ordine aggiungendo disordine; ne é derivato un caos su cui ho voluto indagare qualche ora.

Lo scorso mese di ottobre, ho acquistato un MiniMag - della tedesca Multiplex. Dicevo ma che aerei, non c’è paragone; vuoi mettere la complessità, le performances, la bellezza del volo stazionario e traslato degli elicotteri? E invece inizio a prenderci sempre più gusto, al punto che in tutto questo periodo invernale ho raramente levato in volo il Logo500 in favore di questo piccolo e leggerissimo modello in Elapor® - un materiale brevettato da Multiplex simile all’EPP (Expanded PolyPropylene), ma molto più resistente.

Ecco una breve recensione su questo famigerato modello stravenduto in tutto il mondo, adatto a principianti e piloti con esperienza intermedia; il MiniMag è un trainer ad ala alta del peso di 550/600 gr. (all-up-weight), molto semplice da montare, leggero e facile da far volare. Tutti i modelli Multiplex sono fatti in Elapor e si assemblano con poche ore di lavoro incollando le parti con colla cianoacrilica; il kit contiene i due gusci della fusoliera, le ali (costituite da un unico pezzo) con relativi incavi per i servi, la deriva, il piano di coda, un resistente carrello in acciaio, tiranteria, rinforzi, decals ed un motore a spazzole classe 400. Investigando un po sui vari forum ho capito che era meglio dotarlo da subito di un motore più potente tipo brushless Hacker A20-22L ed elica 8×6; scelta azzeccata visto che con questo motore, associato ad una batteria 3S (11,1V 1300mAh) si ottengono decolli ‘verticali’ e si esce facilmente da qualsiasi situazione di incertezza con ‘un tocco’ alla manetta del gas; gli assorbimenti sono inferiori ai 20A, e per ogni pacco batterie ci si diverte per una decina di minuti.

Il modello non é dotato di ruotino di coda sterzante, quindi non c’è possibilità di rullare in posizione attendendo l’ok della torre così come non c’è modo di mantenerlo allineato alla pista una volta atterrati ma il decollo (col motore Hacker) avviene in 3 metri scarsi ed una volta in aria il MiniMag rivela da subito caratteristiche di volo molto prevedibili, buona manovrabilità, ottime doti di planata ed è molto, molto rilassante (rispetto al mio Logo500 con i suoi 700 Watt di assorbimento ed un peso di 2.5Kg che ti costringe ad un continuo controllo ed impegno perchè non permette errori); un modello adatto a tutti, che si può far volare anche senza gli alettoni (ricavabili dalle apposite scanalature nelle ali) ma che consiglio di utilizzare, perchè rendono il tutto molto più governabile e si riesce a volare con venti medio/sostenuti - a patto di avere un pista di atterraggio orientata nella direzione del vento, perchè per esperienza vi assicuro che atterrare con venti laterali con un modello così leggero non è facile; piccolo e facilmente trasportabile, il MiniMag sarà il vostro compagno di viaggio per le scampagnate e le vacanze al lago (si possono mettere galleggianti per atterrare e partire dall’acqua) e vi permetterà di farvi le ossa per poter passare a modelli più grandi ed impegnativi in balsa e/o materiali compositi come questi, che sono i candidati al mio prossimo acquisto ma tra i quali in realtà non saprei proprio quale scegliere.

Calmato SP EP 1400. © Kyosho Corporation

Beechcraft Bonanza 15e ARF. © E-flite - Advancing Electric Flight

Alcuni dati sul MiniMag: apertura alare 1010 mm; lunghezza 820 mm; area delle ali 22 dm2; carico alare (FAI) 26 gr/dm2; motorizzazione consigliata Hacker A20-22L + prop 8×6 + batteria 3S; funzioni: timone/elevatore/alettoni.

Investigando ulteriormente nella modellazione di coni e clindri al fine di poter generare alberi realistici, ho preso (come é naturale se si usa Processing) tutta un’altra strada; per realizzare ciò che avevo in mente avevo due problemi da risolvere: (1) orientare un oggetto nella direzione di un punto in continuo movimento e/o generato randomicamente e (2) scrivere una funzione di branching per i rami. Il punto 1 mi sembrava ragionevolmente semplice da risolvere, ma ben presto mi sono reso conto che non lo era affatto. Il punto 2, senza aver risolto il punto 1 era inutile affrontarlo. Grazie all’aiuto di Dave Bollinger però ho potuto fare il reverse-engineering del codice che descrive le coordinate sferiche ed in particolare, dato un punto iniziale ed uno finale, trattarli come fossero il centro ed un punto sulla superficie di una sfera e quindi calcolare raggio e rotazione sugli assi.


// Let particle b coords be the desired base center, and particle a coords be the desired top center.
Particle a;
Particle b;
//If that's where the center of the base stays, then the center of the top needs to end up at:
PVector c = new PVector(a.position().x()-b.position().x(),a.position().y()-b.position().y(),a.position().z()-b.position().z());
float h = dist(0,0,0,c.x,c.y,c.z);
//then define the radius
float r = sqrt(pow(c.x,2)+pow(c.y,2)+pow(c.z,2));
float theta = atan2(c.y,c.x);
float phi = acos(c.z/r); //thank you Dave!
pushMatrix();
//now translate to b position
translate(b.position().x(),b.position().y(),b.position().z());
//and rotate the new tentacle segment
rotateZ(theta);
rotateY(phi);
rotateX(-HALF_PI);
//Segment to rotate
popMatrix();


Queste poche righe, in Processing permettono di ruotare un qualsiasi oggetto nella direzione definita da un altro sistema di coordinate; se volete usarlo per i vostri esperimenti, troverete la Applet corredata di classi nel link sotto al video, o anche qui; col mouse e tasto sx premuto potete ruotare la bestia, e avvicinarvi ed allontanarvi col tasto dx.

Tentacles.
Il mostro é nato perchè una volta trovato il modo di orientare i nuovi coni verso la direzione voluta, ed avendo definito ognuno dei due punti di ancoraggio del cono (centro della circonferenza inferiore e centro della circonferenza superiore) con altrettante particelle unite da una spring (una molla), ecco che variando le distanze variava la lunghezza del cono ed anche (per via del ‘molleggio’ e qualche altro parametro) la rotazione. E’ stato un attimo creare tentacoli. Le particelle e le springs sono realizzate con la libreria per Processing traer.physics la quale permette anche - dato un sistema di particelle - di definire una gravità sui 3 assi ed un attrito. Applicando attrito, una gravità negativa sull’asse y, una differente massa per ogni particella del tentacolo (crescente verso la parte più lontana dalla base) ed una gravità che varia continuamente tra -1 ed 1 sull’asse x, ecco che i tentacoli hanno iniziato a muoversi sinuosamente e l’effetto finale é davvero naturale. Ho aggiunto una texture ‘urticante’ et voilà: Tentacles. Una bestia velenosissima - in genere le creature marine con colori sgargianti sono sempre velenose.

Image credits: magTentacle
http://www.openprocessing.org/visuals/?visualID=7207 - GC Mingati

Qualche mese fa, Sue Jenkins (Luckychair) mi ha chiesto il permesso - prontamente accordato - per poter pubblicare sul suo libro di prossima uscita “Web Design All-in-One For Dummies“, in una sezione relativa alla creazione di gallerie di immagini, un tutorial su slideViewer - il mio famigerato quanto semplice (per dummies?) jQuery plugin; il libro è uscito, e alle pagine 447-449 (Chapter 8 > Creating slide shows) si parla proprio del mio plugin e di come costruire una galleria di immagini per il proprio sito. Sono piccole soddisfazioni, ma questo dimostra quanto alla fine, lavorare ‘per gli altri’ porti sempre buoni frutti.

In celebration of jQuery’s 4th birthday, the jQuery team announces the latest major release of the jQuery JavaScript library! A lot of coding, testing, and documenting has gone into this release.

Innanzi tutto, felice 2010.

Sarà stata l’aria di Ortisei, la neve e i boschi ma da quando sono tornato ho in mente di voler realizzare degli alberi con Processing. Ho creato una versione molto semplificata e stilizzata di un pino (per il momento é quanto sono riusciuto a pensare con qualche ora di tempo libero) ma ammetto che per realizzare forme convincenti c’è molto da approfondire sulle strutture geometriche e matematiche costruite dalla natura - in particolare sui frattali. Si può trovare qualche compromesso, probabilmente, ma ritengo interessante cercare di riprodurre il pattern col quale si dispongono e suddividono i rami nelle piante. Si lo so, non ci siamo. Almeno non al primo sketch.

Per creare questi alberelli ’simil-Lego’ ho pensato di partire disegnando un tronco principale (una linea posizionata randomicamente e con altezza casuale, il cui spessore diminuisce mentre si sale) e dei rami, anche questi con spessore e lunghezza decrescente.

Per i rami ho quindi semplicemente disegnato delle rette le cui coordinate esterne x e z (come fosse solo in 2D) fossero: x = initPos.x + radius * cos(theta); z = initPos.z + radius * sin(theta); qui PVector initPos contiene le coordinate x, y, z del tronco; radius è la lunghezza del ramo, e diminuisce mentre si sale. In pratica non ho fatto altro che calcolare alcuni dei punti che descrivono una serie di cerchi con raggio decrescente e poi ho usato tali coordinate per descrive l’ancoraggio del secondo punto (quello esterno) dei rami (i punti iniziali sono gli stessi del tronco). Salendo con la y (-y) ecco che i rami vengono wrappati attorno al tronco e divengono sempre più corti, fino alla cima, dove radius è 0. Il codice dello sketch e la Applet li trovate nel link sotto al video (il risultato finale è abbastanza gradevole).

Image credits: Recursive Tree. Rendered with p5sunflow lib - GC Mingati

Ecco invece una versione in cui rami e tronchi sono formati da coni/cilindri. Questo mi permette di ottenere un effetto 3D pieno e - se riesco - texturizabile; ma quello che appare subito evidente é che usando una funzione ricorsiva si ottengono rapidamente più rami (una funzione ricorsiva richiama se stessa fino a quando una data condizione non viene raggiunta - in questo esempio un numero di 5 cicli). Anche questo esempio é visibile sotto forma di Applet a questa url, ma credo dovrò cambiare radicalmente modalità di generazione: la ricursività non soddisfa la randomicità di forma/lunghezza che desidero poichè in realtà i rami nascono ruotati randomicamente sugli assi Z ed X solo alla prima generazione; i rami più piccoli sono copie rimpicciolite dei primi e non sono riuscito a trovare un modo per allontanarli dai loro ’simili’; credo però che aggiungendo una forza magnetico-repulsiva ad ogni ramo eviterò che essi si sovrappongano (al momento è inevitabile) e probabilmente avranno una forma più naturale.

Image credits: pineTree forest
http://www.openprocessing.org/visuals/?visualID=6824 - GC Mingati

Anche quest’anno quindi parecchi progetti da realizzare - alcuni ancora troppo complessi visti i miei skills attuali e per il tempo che richiedono (terreni 3D, alberi, flocking e piante mosse dal vento) e altri certamente più ‘alla portata’ (approfondire Struts e lo sviluppo delle apps J2EE) ma tutti comunque necessiteranno di costanza ed impegno. Ho un anno a diposizione, e Saturno contro…

Image credits: 3D lineMorph
http://www.openprocessing.org/visuals/?visualID=6221 - GC Mingati

Continua l’esplorazione. Queste immagini sono frames salvati (e ridotti) della Applet 3D lineMorph. Con questo progetto ho voluto dare uno sguardo alle tecniche necessarie a posizionare una serie di punti (Particelle) in uno spazio tridimensionale al fine di formare una sfera con superficie irregolare. A prescindere dal bellissimo (per me) risultato, ho impiegato una equazione semplificata che descrivere il volume (e le coordinate) della sfera, perchè in realtà i punti sono stati dapprima posizionati in maniera randomica e poi col solito metodo del “trial-and-error” li ho wrappati come fosse una spirale. L’effetto era interessante (immagine 4), ma il progetto prevedeva appunto di realizzare una superficie irregolare - variando le distanze dei punti dal centro, un pò come se ci fossero delle catene montuose alternate a valli e pianure.

In ogni caso, per risolvere il problema quale miglior modo di affidarsi alla potenza del caso, e di attrattori e springs per dare randomicità alle distanze dei punti dal centro della sfera? Ed ecco un’altra utilissima libreria per processing: traer.physics. Con questa ho potuto creare una serie di ‘molle’ (springs) che colleganoo la particella/attrattore al centro (invisibile) con ognuno dei punti; le springs, a prescindere dal raggio iniziale della sfera, mantengono in modo elastico i punti ad una certa distanza e poi ho aggiunto un attrattore: questo attrae i punti verso il centro, e questi si concentrerebbero tutti in un unico mucchio di particelle, come se collassassero, quindi per mantenerli distanti ecco che le ‘molle’ aiutano a contenere l’attrazione, annullandone la forza. Ma come posizionare le 3000 particelle a distanze differenti dalla superficie? Dando massa differente (per es. compresa tra 1.0 e 10.0) ad ognuna di esse.
Newton dice che “due corpi, rispettivamente di massa m1 ed m2, si attraggono con una forza di intensità direttamente proporzionale al prodotto delle masse ed inversamente proporzionale al quadrato della distanza che li separa. Tale forza ha la direzione parallela alla retta congiungente i baricentri dei corpi considerati.” Quindi : F = G * m1 * m2 / D2, dove G = gravitational constant, m1 = mass of M1, m2 = mass of M2, D = distance M1 - M2.
Se ogni particella ha massa differente, l’attrazione e la repulsione avranno effetti differenti. Poi hoi collegato tutti i punti in sequenza tra loro a formare una linea continua col metodo curveVertex(x,y,z) ed ho ottenuto il tratto. La linea si muove fino a trovare un equilibrio quando tutte le forze si annullano.
Nella Applet, premendo ‘i’ ci si posiziona al centro della sfera e si può osservare l’interno (ultima immagine) e con ‘o’ si torna alla coordinata z originaria. Ho aggiunto uno slider che permette di variare la massa della particella attrattore, e settando massa a 0 noterete che si torna alla ‘forma’ della immagine 4. Invece aumentando la massa, aumenta l’attrazione. Premendo e trascinando si ruota la sfera.

Image credits: p5sunflow rendering test - GC Mingati
Primi test con p5sunflow, un 3D render engine open source con tanto di global illumination (una serie di algoritmi realizzati per aggiungere realismo alle scene 3D - riflessi, rifrazioni, ombre) originariamente chiamato Sunflow. Sunflow è un raytracer scritto in Java e reso compatibile con Processing da hipstersinc più di un anno fa col nome p5sunflow che poi però, a partire dalla versione 1.0 del framework, non ha più funzionato.
Finalmente qualcuno ha apportato le opportune modifiche e p5sunflow può nuovamente essere utilizzato per rendere “your Processing sketches look sexy as hell”.
Niente male davvero.

3D and XML data
Applet and code http://www.openprocessing.org/visuals/?visualID=5451 - GC Mingati
Tutti conoscete Google Analitycs. Se lo avete installato su qualcuna delle pagine del vs. sito, avrete visto che bei report che fa (con Flash) e quante opzioni abbia; inoltre si possono esportare i report in vari formati e oggi, quello che ha destato il mio interesse è il formato XML.
Processing permette di leggere un file XML, ma la libreria proXML permette di leggere e scrivere un file XML. In particolare, di questa nuova libreria scritta da Christian Riekoff, mi piace il modo intuitivo in cui si può navigare il DOM di un XML… bene, e allora? Ho usato proXML per costruire (facilmente) un grafico 3D delle visite al mio plugin jQuery slideViewer, sulla base dei dati di un report di Analitycs per il periodo 22 settembre - 22 ottobre 2009. La Applet ed il codice sorgente sono visualizzabili a questa URL.

The Extensible Markup Language XML has become the standard for exchanging structured data in Internet applications. proXML allows you to easily integrate and manipulate this data in Processing.

Se usate Processing e volete smanettare coi vostri report, andate sul vostro Analitycs e salvatevi il report in formato XML. Questo sketch costruirà un grafico a barre navigabile (via peasyCam) esponendo dati per: URL della pagina, periodo di riferimento, visite totali, giorno con maggiori visite (cubo blu), giorni del periodo di riferimento; non è che aggiunga chissà cosa ai report di Analitycs, però è un altro modo di visualizzarli e sopratutto per me, è un modo per esplorare nuove librerie e nuovi modi per fare le cose che mi piacciono, e alla fine, per integrare Processing col mio lavoro di tutti i giorni. Per muoversi intorno al grafico tasto sx click + drag; per avvicinarsi/allontanarsi tasto dx click + drag.

Al mio rientro dal fantastico viaggio di nozze negli US, ho cercato di vedere cosa mi ero perso in un mese di completo isolamento da Internet; per 30 giorni non ho controllato mail, visto sketches, controllato le statistiche, nulla di nulla. Solo una lunga immersione in infiniti landscapes, colori mozzafiato, scenari da far West attraverso Utah, Nevada e Arizona, con punte a New York, Las Vegas e San Francisco. 6000 chilometri con mia moglie Alessandra e presto metterò sù una gallery con le foto più belle anche se già vi dico che nessuna foto renderà mai giustizia alle immagini che ho in testa, ai vasti scenari del south-west, roba da restare senza fiato, davvero.

Image credits: Capitol Reef National Park, 52 Scenic Dr Torrey, UT 84775, USA
Painted with Processing - GC Mingati

Durante questi trenta giorni è stata pubblicata questa interessante intervista agli ideatori di Processing (Ben Fry, Casey Reas), il framework col quale indago su generative graphics, geometry, chaos, particles e qualsiasi altra cosa desti il mio interesse: Daniel Shiffman ha condotto questa intervista pubblicata su Rhizome che vi invito a leggere. Processing stà crescendo, nuove librerie ed entusiasmanti novità sono in fase di sviluppo e vedranno la luce con le versioni 1.5 - 2.0. In particolare il sistema di gestione dei video abbandonerà QuickTime in favore del framework multimediale opensource GStreamer ed inoltre Processing sarà molto meglio integrato con OpenGL, cosa che renderà il framework (le applicazioni che useranno OpenGL) molto più veloci (molti, molti più FPS…); uno degli studenti di Reas, Andrés Colubri, stà lavorando all’integrazione di GStreamer e OpenGL in Processing. Con la versione 2.0, verrà rivisitato anche l’IDE.

Interessante anche processingjs.org (ricordate il porting JavaScript delle parti 2D di Processing eseguito da John Resig? Ne abbiamo parlato qualche tempo fà in ogni modo giusto per ricapitolare in due parole si tratta della possibilità (usando JavaScript ed il tag canvas - parte integrante delle specifiche HTML 5) di effettuare un rendering dinamico di immagini bitmap; il lavoro, continuato da Al MacDonald stà portando alla nascita di una community e fà crescere l’interesse nei confronti del framework perchè permette di ‘disegnare’ senza usare le Applet Java (non è quindi necessario installare un Java runtime environment o nessun altro plugin, ma basta avere un browser di ultima generazione); inoltre la semplicità delle API e della sintassi lo rendono (e lo renderanno sempre di più) uno degli strumenti ideali per lo sviluppo di rich-user-interfaces, widgets per la data-visualization e per lo sviluppo di giochi web-based favorendo la sperimentazione ed incrementando la già notevolissima notorietà di Processing.