Tag Archives: code

Stippling


Stippling.

Applet and source: stippleVerletReplay.
Made with Processing.

Anche io, come Robert Hodgin (e qualche anno dopo, a dire il vero) ho voluto implementare il mio algoritmo per ricreare le immagini con un pattern di punti – in inglese stippling. Sono andato oltre le immagini statiche e lo ho fatto con un video feed: partendo dalla webcam analizzo la luminosità ed in base a questa modifico massa e raggio di 5000 particelle che si respingono fra loro. Maggior massa e maggior effetto repulsivo; come al solito trovate il sorgente su openprocessing, dal link sotto al video, anche se lì per ragioni di performance ho limitato il particle system a 1000 elementi. Enjoy the stippling effect.

gridTyper


231174
75121
26426

gridTyperSet
gridTyper.

Applet and source: gridTyper.
Made with Processing + HE_Mesh.

L’estrusione dei pixel font ha destato il mio interesse già in passato 123 ma gridTyper è l’implementazione di un’idea di Jan Vantomme (vormplus) sul cui blog due o tre settimane fa ho trovato un interessantissimo post sul processo utilizzato per realizzare delle bellissime lettere in plastica acrilica delle dimensioni di 40 × 50 × 20 mm usate per la corporate identity di cloudswimmers. Sfortunatamente, nonostante abbiano realizzato questo set di lettere con Processing ed HE_Mesh – ambedue opensource – non hanno diffuso il codice sorgente; mi sono quindi permesso di seguire il processo descritto nel post per realizzare io stesso un tool che potesse estrudere un pixel font (direttamente sul keyPress a runtime) e smussarlo (Catmull-Clark); questi oggetti – se suddvisi ulteriormente possono divenire molto lisci al tatto – e possono essere salvati in .stl per poi essere stampati in 3D con shapeways o i.materialise tramite processi di selective laser sintering (SLS). Full credits a vormplus quindi per l’idea ma sopratutto grazie a Frederik che mi ha supportato nella realizzazione del tool, chiarendomi dubbi e perplessità su come procedere.

my Flickr PhotoSphere

fps04
flickrsphereboth
Applet and source code: http://www.openprocessing.org/visuals/?visualID=17064 Type a search term and press ENTER; UP/DOWN keys toggles images/descriptions. made with Processing.

This thread has lit the spark! Using the code provided by Gustav Bjordal in his PhotoWall sketch, I developed a very quick prototype wich a) connects to the Flickr API service and performs a query with a user-defined keyword, b) parses (with the proXML lib, tho I could have used the default processing xml parsing cababilities) the response, c) creates a matching number of texturized boxes, d) draws a sphere made of randomly sized boxes properly rotated along the surface. It is a signed Applet (Applets are normally executed in a sandbox that prevents them from accessing the local hard disk/network) so you’ll have to grant all the alerts that may pops up at first run.

Not the smartest way to query Flickr, but it’s been cool to code.
Applet and source here.
Merry Christmas, everyone!

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…

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.

We are Pixels.

Esigenza: trovare un modo per spostare dei punti (istanze di una ipotetica classe con proprietà relative a massa, accelerazione, velocità e posizione e relativo moto e forze – da qui l’effetto ‘organico’ se si usano sempre Vettori per muovere un punto) verso un determinato altro punto. Esiste in processing un metodo statico (get(x,y)) per ricavare il colore e (per come esso viene ricercato) la posizione x y del suddetto pixel (con un doppio loop per popolare un Array 2D).
Ipotizzando di avere una scritta o una forma all’occhio non visibile – perchè renderizzata con un canale alpha troppo basso, ma sufficiente ad essere rilevato come un valore rgb (es. 122545) – ecco che di conseguenza si può (sopratutto) conoscere quella posizione in coordinate cartesiane xy; da qui ho voluto – con la solita classe dei precedenti esperimenti che però appena sono creati vengono solo accelerati verso un altro punto – creare delle istanze che sanno – anche – quale è la loro origine, cioè per ognuna una posizione ‘originaria’ espresa in x ed y alla quale si può ‘tornare’ magari premendo un tasto.
Più o meno è questo il concetto di base e comunque il codice è visualizzabile in questa pagina insieme alla Applet. Premendo un tasto, tutte si spostano verso la loro origine perchè viene applicata una accelerazione verso quel punto; tutte insieme danno origine ad una forma o come in questo caso, del testo. Ma potrebbbe essere il solo colore nero di una qualsiasi foto, non visibile all’occhio ma scannerizzata pixel per pixel da una più evoluta classe Pixel(x, y, color, mass etc)…

Il prossimo step (e su questo progetto forse vale la pena spendere qualche ora) sarebbe di far andare le particelle in una certa direzione che viene impostata in tempo reale, cioè caratteri che si formano mentre si scrive sulla tastiera … E se pò fà…

Ah un’ultima nota su Processing. Ovviamente per quasi qualsiasi applicazione scriviate e certamente per tutte quelle che hanno un otput video, c’è sempre la possibilità (per default, solo importando una delle librerie presenti nel pacchetto) di fare un movie quicktime della grandezza che la vs macchina permette di generare come questo (QT movie 19.729 Kb) in tempo reale mentre la vostra applicazione gira nel suo IDE oppure gererare jpg, png, tiff e pdf.