Tag Archives: openprocessing

Automata

conesnail
Image credits: Conus Textile (da Wikipedia). Il pattern del guscio é generato con meccanismi che ricordano quelli degli automi cellulari, cioé ogni cellula secerne pigmento a seconda dello stato di attività delle cellule adiacenti.

Ho indagato sull’ offscreen buffer di Processing, ed in particolare su come lo si può usare per ottenere e manipolare immagini generate a runtime. Con l’oggetto PGraphics e i metodi beginDraw() ed endDraw(), è possibile disegnare (anche in 3D) fuori dallo schermo, e poi usare l’immagine ottenuta per eseguire ulteriori calcoli e/o applicare effetti e usarla come fosse una qualsiasi immagine da visualizzare a schermo; in realtà pGraphics si usa molto spesso per l’output ad alta risoluzione da Processing (per es. immagini TIFF da 3000 px di larghezza), ma in questo caso, ho utilizzato questi buffer (nel mio caso sono 6, 251 px di lato) per disegnare una serie di patterns per mezzo di un automa unidimensionale. Gli automi sono molto interessanti perchè a dispetto della loro apparente semplicità producono risultati inaspettati e sorprendenti; frattali, automi, L-systems e in genere tutte le funzioni ricorsive governate da ‘regole’ servono a comprendere e spiegare i modelli morfologici di una grande varietà di organismi del mondo che ci circonda; in computer graphics quindi, questa serie di algoritmi e regole rappresentano l’unica via per poter simulare efficacemente organismi complessi, come le piante.

cautomata
Elementary Cellular Automaton http://www.openprocessing.org/visuals/?visualID=8207 – GC Mingati

Un Cellular Automata (CA) di tipo unidimensionale é un sistema composto da griglie di celle e regole che definiscono le modalità di comportamento di ogni cella, per ogni nuova generazione, a seconda dello stato (colore) dei suoi vicini. In altre parole, supponendo di avere una riga di 3 pixel posti orizzontalmente ed il pixel di mezzo bianco con gli altre due vicini neri, possiamo stabilire, di generazione in generazione quale sarà il colore risultante da questa condizione di vicinato. Avremo quindi una nuova condizione, a cui applicare una nuova regola. E così via. Ci sono 8 possibili configurazioni di vicinato da cui scaturiscono 256 possibili regole.

Nella Applet ho usato l’oggetto PGraphics per disegnare un automa su ogni faccia. Una volta completato il render delle facce, potete premere ‘r’ da tastiera per disegnare nuovi pattern.

noise

screen0499
screen0211
pnoise3d
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.

Tentacles

tent01
tent02
tent03

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 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.

magTentacle http://www.openprocessing.org/visuals/?visualID=7207 – GC Mingati

pineTree forest

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.

forest

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.

forest02

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).

recursive tree
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.

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…

lineMorph

lm01
lm02
lm03
lm04
lm05
lm07
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.

Visualizing data


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.

3D con Processing

rotation incident
Rotation Incident – GC Mingati

Ho iniziato ad investigare sul renderer 3D di Processing (P3D):
se aggiungiamo un terzo parametro nel setup della nostra applicazione, size(800, 600, P3D), significa che intendiamo usare il renderer tridimensionale di Processing, il più compatibile ed indipendente da librerie esterne (come per esempio OPENGL) ma leggermente più lento se si ha a che fare con forme geometriche complesse e molti vertici.
Per iniziare, ho usato i metodi box e sphere per creare forme molto semplici in 3D e ho cercato di capire il funzionamento di camera e luci. Creare un box è stato un attimo, ma per renderlo realistico avrei dovuto vestirlo con una texture; purtroppo i box creati col metodo statico box(w,h,l) non sono “texturizabili”. Per fare ciò, ho capito che dovevo comprendere come usare vertici e primitive in Processing.
Non c’è niente da fare, se vuoi fare 3D da codice devi studiarti un minimo di OPENGL: ok, allora devo disegnare un cubo creando prima i suoi sei lati, ognuno composto da 4 vertici – quindi non basta dire box(larghezza, altezza, profondità) – e ad ogni lato applicare una texture (il grosso è disegnarlo, vestire una superficie piatta è semplice). Non mi dilungo troppo anche perchè è solo l’inizio, ma sono felice del primissimo risultato; ho capito che risultati sorprendenti (cioè che mi sorpendono) sono possibili già solo capendo il sistema di primitive (x,y,z) .

Premendo “l” si attiva/disattiva una luce direzionale; premendo il tasto sx del mouse muove la camera, tasto dx zoomin/zoomout e tasto centrale pan; il movimento della cam è gestito da una libreria esterna per Processing, PeasyCam sviluppata da Jonathan Feinberg.

The PeasyCam is positioned on a sphere whose radius is the given distance from the look-at point. Rotations are around axes that pass through the looked-at point.

La grafica 3D come la conosciamo oggi, ha origine dalla teoria della prospettiva a punto unico di fuga, o prospettiva lineare centrica, sviluppata più di 600 anni fa dall’architetto fiorentino Filippo Brunelleschi. Con l’ausilio di due tavolette in legno ed uno specchio, egli calcolava le distanze tra oggetto e punto di osservazione, e così poteva disegnare una sorta di intelaiatura prospettica utile alla rappresentazione artistica e dimostrò l’esistenza di una sorta di punto di fuga all’orizzonte, verso il quale gli oggetti rimpicciolivano.

Poco dopo questa tecnica fu codificata e artisti come Albrecht Dürer iniziarono ad ideare tecniche e apparati atti a produrre rappresentazioni convincenti (realistiche) di spazi 3D su quadri (2D). Anticipando metodologie moderne come il ray-tracing, questi apparati furono i progenitori delle odierne graphic cards, capaci di disegnare miliardi di vertici al secondo. Oggi artisti, designers, architetti e ingegneri usano il computer per creare, manipolare e produrre forme tridimensionali.

In parte tratto da “Processing: A Programming handbook for Visual Designers and Artists”; testo di Simon Greenwold, tradotto dal sottoscritto

anemone

Lavorando sul concetto dello steering vector (così ricavabile: ‘desired_velocity’ minus ‘velocity’) – un algoritmo ideato alla fine degli anni 80 da Craig W. Reynolds per far muovere in maniera automatica e pseudo-naturale degli oggetti (characters) nel loro mondo digitale implementando strategie per cercare, muoversi, arrivare, seguire, scappare, seguire un percorso, evitare ostacoli… insomma una sorta di intelligenza artificiale che facesse sembrare ‘vivo’ e in grado di prendere decisioni un character – sono arrivato a creare questo mostriciattolo, una sorta di anemone/medusa.

Senza entrare troppo nei dettagli che comunque potete leggere qui, qui e dal sorgente, ci basti sapere che per ottenere questo movimento ‘organic-like’ dei tentacoli del nostro anemone marino, ho applicato il metodo dello steering vector ad una serie di particelle contenute in 110 ArralyList (s) (particle Systems) con differente massa; il metodo riceve in input un vettore target (un punto x,y) e ritorna una ‘forza’ vettore steer (sterzante) che fa muovere in quella direzione l’oggetto. Poichè la chiave qui è la velocità col quale le particelle si muovono verso il target e visto che hanno massa differente, avremo le parti tonde dei tentacoli (più pesanti) che vi arrivano dopo e quelle più leggere che vi arrivano prima… inoltre usando una semplice sinusoide ecco che l’anemone sembra ‘pulsare’ ed in più ogni ‘tentacolo’ (il singolo particle system fatto di 100 particelle) ruota a partire dalla sua posizione iniziale.

Il bello di Processing, come direbbe Robert Hodgin è che non hai mai idea di dove ’sei diretto’ mentre lavori, cioè, le cose prendono forma mentre scrivi codice e magari parti con un’idea e alla fine ottieni un’altra cosa. Volete sapere a cosa stavo lavorando? Volevo simulare i coronal loops del sole, cioè quegli sbuffi di materia/plasma che si possono osservare sul sole se lo si osserva durante un’eclisse. Poi mi sono reso conto che la versione 2D già realizzata non poteva essere migliorata (a livello di prestazioni) se non facendola divenire 3D con opengl e quindi ho ‘ripiegato’ su quest’altro progetto.

live Input

Ecco, nello scorso post dicevo che forse sarebbe valsa la pena di proseguire la ricerca nel campo dei ‘pixel’ per arrivare ad una specie di word processor che usa questo sistema di particelle per comporre i caratteri a video; una prima Applet corredata di sorgente è visualizzabile qui ed in questo video (anche .mov format). Per ora ha un bug: non posso cancellare i caratteri e c’è un problema con l’ultima lettera a dx.