Tag Archives: source

re-mesh

hmrecreate04
hmrecreate04det
hmrecreate03
hmrecreate02
Re-constructed structures. Made with Processing+Hemesh+SunflowApiApi.

Creating meshes is cool (for a given amount of cool) but destroying them is even cooler.
— W:Blut

True, but once a mesh is modified (with the Lattice modifier, for example) how can we re-construct the shape keeping track of the removed ones? I wanted a way to render some glass-looking windows on the buildings faces and discovered (hacked) a way to re-generate a polygon (a new cube but still missing the 6th face) where initially a hole have been created. One can draw the polygons by going through the WB_Point array of each poly, creating a polygon for every face you delete.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import wblut.hemesh.*;
import wblut.hemesh.creators.*;
import wblut.hemesh.modifiers.*;
import wblut.hemesh.subdividors.*;
import wblut.hemesh.kdtree.*;
import wblut.hemesh.tools.*;
import wblut.geom.*;
import wblut.math.*;
 
import peasy.org.apache.commons.math.*;
import peasy.*;
import peasy.org.apache.commons.math.geometry.*;
 
HE_Mesh mesh, holes;
PeasyCam cam;
HE_Selection selection;
 
ArrayList<WB_Polygon> removedPolys = new ArrayList<WB_Polygon>();
ArrayList<WB_Quad> qua = new ArrayList<WB_Quad>();
 
void setup()
{
	size(650, 650, P3D);
	cam = new PeasyCam(this, 450);
	HEC_Creator cube = new
	HEC_Box(this).setWidth(100).setWidthSegments(5)
		.setHeight(100).setHeightSegments(5)
		.setDepth(100).setDepthSegments(6);
	mesh = new HE_Mesh(cube);
	selection=new HE_Selection();
	Iterator fItr=mesh.fItr();
	HE_Face f;
	while(fItr.hasNext()){
	 f=fItr.next();
	 if(random(100) < 50){
	   selection.add(f);
	   removedPolys.add(f.toPolygon());
	 }
	}
	HEM_Lattice lattice = new HEM_Lattice().setDepth(6).setWidth(3);
	mesh.modifySelected(lattice, selection);
 
	for (WB_Polygon wb:removedPolys){
	  for(int i = 0; i < wb.points.length; i+=4){
		WB_Quad wbq = new WB_Quad(wb.points[i], wb.points[i+1], wb.points[i+2], wb.points[i+3]);
		qua.add(wbq);
	  }
	}
	HEC_FromQuads hfq = new HEC_FromQuads(this).setQuads(qua);
	holes = new HE_Mesh(hfq);
	HEM_Extrude extrude = new HEM_Extrude().setDistance(1);
	holes.modify(extrude);
}
 
void draw()
{
    background(255);
    lights();
    noStroke();
    fill(220);
    mesh.drawFaces();
    fill(#B90202, 70);
    holes.drawFaces();
}

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!

Emitter

e02
e01
e03
e04

Emitter series, realizzati con Processing; qui trovate la Applet ed il sorgente della prima versione.

Di questa seconda versione, denominata IR1916 (come la galassia a noi più lontana, circa 120 milioni di anni luce dalla Terra) ho caricato il file .mov su Vimeo; purtroppo la compressione non risparmia i singoli pixel in movimento – che sono il particolare che ho cercato e ricercato – e per questo consiglio di scaricare il .mov originale nel portfolio (se scrollate, lo trovate); ho comunque estratto alcuni frames dai quali si nota come l’uso del perlin noise fà sì che si formino delle textures durante la generazione delle particelle e anche per spiegare i concetti di base che governano la colorazione di questo Emitter. mò, con due minuti lo spiego…

slideViewer (image click)

Durante lo scorso anno ho ricevuto decine di mails a proposito di slideViewer, il mio modesto – ma ampiamente apprezzato – engine per image-galleries fatto con jQuery. La maggior parte delle richieste erano: “si può fare in modo che le immagini vadano avanti facendo click sulle immagini stesse?”.
Stamane, dopo 18 mesi (giugno 2007) dalla prima release del plugin, ho voluto vedere quanto ci voleva a fare questa modifica.

1
2
3
4
5
6
7
8
9
10
// next image via image click 14/01/2009
jQuery("div#stripTransmitter" + j + " a").parent().parent().parent().prev().find("img").each(function(z) {
jQuery(this).bind("click", function(){
	var ui 	= 	jQuery(this).parent().parent().parent().next().find("a");
	if(z+1 < pictEls){
		ui.eq(z+1).trigger("click");
	}
	else ui.eq(0).trigger("click");
   });
});

All’inizio, come per tutte le cose che hai fatto da molto tempo e di cui non ricordi neanche come ci sei riuscito, ho cominciato a giocherellare coi selettori per trovare l’immagine, associarvi un evento click, ripassare la posizione alla interfaccia coi numeri… poi un lampo: bastava usare .trigger(”click”) per ’simulare’ il click su uno degli elementi della UI. In effetti era già tutto pronto, selezione/deselezione del link interessato, spostamento della UL… l’unica cosa chè ho dovuto fare è verificare se stiamo cliccando sull’ultima immagine della lista per ‘riavvolgere’ tutto alla posizione 0, iniziale.
Sarebbe il caso, se avessi tempo, di calcolare l’offset del mouse rispetto all’immagine. In questo modo se clicco nella metà destra di una foto posso andare alla prossima, viceversa se sono nella metà sinistra, torno indietro. Boh, aspettiamo che me lo chiedano.
slideViewer 1.1

magnet-ink

magnetink07
magnetink03
magnetink04
magnetink08

Il mio secondo sketch fatto con processing. magnet-ink.

In modalità HSB i colori sono distribuiti su una gamma di 360 possibilità (H), poi c’è la saturazione (S) con scala da 0 a 100 e lo stesso vale per la luminosità (B). Con questo nuovo sketch continuo la mia esplorazione della classe Vector3D: un campo gravitazionale (in realtà è un nuovo vettore di coordinate, e al click calcoliamo la differenza di posizione tra il mouse e tutte le particelle) è creato dal mouse e l’effetto di tavolozza magnetica è dato dal fatto che i colori vengono creati in base alla posizione delle due stecchette da 3px bianche poste a sx e dx dello schermo; tali colori sono strettamente connessi con la massa (in realtà è una doppia mappatura cioè colore in base all’indicatore e massa in base all’indicatore).

L’accelerazione verso il mouse è: accelerazione = Forza / Massa e siccome la massa è variabile, i rossi saranno sempre prossimi al mouse (attratti con più forza e, una volta rilasciati più soggetti all’attrito) e i blu essendo più pesanti arrivano ‘dopo’ verso il mouse e l’attrito li ferma dopo, anche. E ‘ normale, se prendete due biglie di ferro una da 1Kg e l’altra da 1/2 Kg e le lanciate lungo un piano, quella più pesante a parità di velocità iniziale, si fermerà dopo.

Ho distribuito i 360 colori in rapporto all’altezza dello schermo (mi sembrava più semplice ) e sempre in base alla posizione delle due stecchette (li chiameremo indicatori), la particella nascente viene anche dotata di una massa (più è alto l’indicatore verso il punto y=0, meno massa ha la particella). E così progressivamente dall’alto verso il basso le particelle hanno colore e massa differente. Quelle rosse, create in alto avranno massa leggerissima quelle in mezzo (gialle, verdi, azzurre) media e quelle in basso, blu, turchesi, alta.

Ma quante particelle? 35000. Ah. Eh; ho scoperto che in processing, se si usa il renderer P3D, size(800, 600, P3D) si possono applicare calcoli a molte particelle (e anche l’alpha incide sulla smoothness del rendering), ma la cosa che rende possibile il tutto, è l’uso di un ArrayList per craere/distruggere le particelle. Eh si, perchè la tavolozza magnetica magnet-ink ha a disposizione il numero massimo di oggetti definito come limite dell’array (35000). Se una particella tocca il bordo viene eliminata – remove(i) – e crata un’altra al suo posto, in una posizione (quindi con colore, massa e posizione) relativi alla posizione dell’indicatore. Così la tavolozza disegna sempre e soltanto le particelle nuove, rese disponibili sotto forma di nube di particelle colorate con un determinato colore non appena altre escono dallo schermo. Ed escono, poichè c’è un effetto di gravità che trasporta inevitabilmente le particelle fuori dallo schermo, in basso.

Giocateci un pò, io ce posso stare minuti. Un consiglio: fate brevi click col mouse, cercate di mantenere le particelle (tutte) intorno al mouse e poi, in base a dove si trovano gli indicatori (alto o basso) cliccate e muovete il mouse.
Forme che ricordano le esplosioni delle galassie si formeranno in magnet-ink. In più ha un effetto ‘nevicata’ e visto che siamo in periodo…. buone Feste e buona fine e buon inizio!

drawConnections

drawConnection
drawConnections è il mio primo sketch realizzato con Processing, in Java; è quindi una Applet. Si tratta di un modesto esempio di Computational Art: una prima esplorazione della classe (libreria) Vector3D di Daniel Shiffman, per mezzo della quale ho realizzato un piccolo mondo di trenta particelle che sono attratte da due oggetti con forza gravitazionale. Ogni particella, con massa differente, disegna una connessione tra l’una e l’altra se si trova ad una certa distanza. Lo spazio ha un vago attrito, quindi, anche se non si nota poichè le particelle sono solo punti, quelle con più massa (più pesanti) si fermano dopo, quelle più leggere, prima. Alla fine tutte le particelle (ci vuole almeno un minuto) trovano un equilibrio tra i due attrattori, fermandosi al centro dei due campi gravitazionali.
In ogni caso: la forza (o lavoro) = massa * accelerazione, accelerazione = forza/massa, (ed è quello che abbiamo voluto calcolare in questa simulazione) , velocità = velocità + accelerazione, e posizione = posizione + velocità.

Model-View-Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
package net.gcmingati.jsp.beans;
import java.util.*;
public class RoomBean implements java.io.Serializable {
    private static int index = -1;
    private List staffNames;
	public static void main(String [] args)
	{
		RoomBean rb = new RoomBean();
		rb.getStaffNames();
	}
    public RoomBean() {
        initStaff();
    }
    public List getStaffNames() {
		for (int i=0; i<staffNames.size(); i++)
		{
			//return (String) staffNames.get(index);
			System.out.println((String) staffNames.get(i));
		}
        return staffNames;
    }
    private void initStaff() {
        staffNames = new ArrayList();
        staffNames.add("Gian Carlo Mingati");
        staffNames.add("Francesco D.");
        staffNames.add("Fabrizio L.");
    }
}

Un semplice esercizio con la sintassi Java; con questa classe (o JavaBean), visualizziamo gli elementi di un array (di stringhe) su una pagina JSP (in locale con Jakarta Tomcat) per mezzo dei tags JSTL e del linguaggio di espressione EL.

1
2
3
4
5
6
7
8
<jsp:useBean id="stanza" class="net.gcmingati.jsp.beans.RoomBean" />
<ul>
<c:forEach items="${stanza.staffNames}" var="selezione">
	<li>
		<c:out value="${selezione}"/>
	</li>
</c:forEach>
</ul>

E’ che sono stato abbastanza fortunato da poter seguire – obbligatoriamente – un corso di quattro settimane sulla programmazione Object-Oriented, ed in particolare su J2EE (Java Enterprise Edition), ed in particolare sull’utilizzo del framework Java che usiamo qui per sviluppare applicazioni; in partica è Struts 1.2 con una serie di plugins.

Un’esperienza che è giusto definire tale, che ha subito stimolato tutta una serie di considerazioni tra le quali, la più importante è che – con Java si può fare qualsiasi cosa.
Il bello é che comunque i concetti di base sono applicabili a qualsiasi linguaggio di programmazione e una volta che sai cosa vuoi ottenere e sai come scriverlo, il solo limite è la tua fantasia; insomma, passo molto volentieri dalla ricerca sul DOM scripting a quella su come creare applicazioni J2EE basate sul design-pattern Model-View-Controller.

processing.js

processing.jsIl buon John ci stupisce con la sua ultima ‘fatica‘. Il porting del linguaggio di programmazione Processing in JavaScript. Processing.js (così come processing in Java), permette di realizzare applicazioni interattive e farle girare all’interno di un browser, ma la versione js sfrutta l’accoppiata js/canvas (per il momento gli esempi più ‘impressive’ girano su Firefox 3 beta, Opera 9.5 e l’ultimo WebKit Nightly built) e quindi ci vuole Firefox2, Safari3, Opera9 o IE con excanvas. A differenza di processing versione Java, che gira sotto forma di applet nel browser, processing.js usa il tag <canvas>, un ‘elemento’ HTML per mezzo del quale si può disegnare via scripting, – appunto JavaScript – creare animazioni ed effetti grafici. E’ una valida (ma non semplicissima) ed entusiasmante alternativa a Flash e sia questa iniziativa come altre, rivoluzioneranno nel medio periodo il modo di progettare e sviluppare la user interaction e l’ interface design.

Tutto questo fermento in ambito opensource conferma che il mondo continua a muoversi in questa direzione e che il browser non verrà mai abbandonato – come dicevamo nel post sulle web-tv on-demand – ma anzi, lo sviluppo degli stessi permetterà la distribuzione di WebApps sempre più sofisticate e forse, presto, sarà l’unico strumento che gli utenti dovranno avere per poter usare fogli di calcolo, applicazioni di image editing, word processing ecc. Un mondo di applicazioni distribuite che girano tutte, semplicemente nel browser. Questa é la direzione più plausibile, ed auspicabile.

Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain.

Per giocare con processing.js ci vuole una certa dimestichezza coi concetti chiave della programmazione OO e con JavaScript in genere. I miei complimenti a John Resig (già ideatore e team leader di jQuery), per un’altra idea davvero notevole in favore -alla fine- dell’uso di software opensource e della creatività.

Vediamo cosa si può fare con processing.js (questi esempi funzionano tutti con Firefox2 ++): cominciate con questa; non c’è trucco e non c’è inganno (Flash), e tra l’altro, a differenza di qualsiasi DIV, P e famiglia, coi canvas si possono creare forme tonde e lavorare su interazioni del genere.

Sorridete? Fà venire in mente gli ‘anni 2000-2005′ quando artisti e designers di tutto il mondo, con i loro stupefacendi ‘flash experiments’ (Praystation, Bit-101 tanto per citarne un paio tra i più innovativi… all’epoca) contribuirono a rendere Flash quello che è diventato; ma a questo punto, visto il supporto nativo dei canvas per tutti i browser di prossima release, potremmo assistere allo sviluppo di questi frameworks e di questo tipo di tecnologie per lo sviluppo di UI.

Processing.js demos
All Examples Written by Casey Reas and Ben Fry
Basic demos, topical demos, custom “in the wild” demos