Tag Archives: architecture

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();
}

vizlab.it

vizlab
VIZLAB – Digital Images for Architecture and Design www.vizlab.it

Gli amici di modostudio hanno chiesto la mia collaborazione per un nuovo progetto: Vizlab. Vizlab é il loro Visualization Department cioé l’area dello studio dedicata ai rendering; per un buon showcase dei loro incredibili lavori, abbiamo pensato di realizzare una gallery di immagini fullscreen con una interfaccia minimale ed effetti di fading fra una slide e l’altra, con jQuery, ovviamente. Dai rendering pubblicati ci si rende subito conto che ricerca, sviluppo ed un elevato livello tecnico rappresentano il motore e la vision del gruppo; modostudio/vizlab é una realtà tra le più promettenti del panorama italiano… e come si dice? Una immagine vale più di mille parole.

Dal punto di vista design/development del minisito, oltre a consigliarvi di dare uno sguardo al codice JavaScript (jQuery), posso anticiparvi che parti di esso potrebbero essere utilizzate per costruire soluzioni similari o più avanzate; non entrerò troppo nel dettaglio ma posso dire che data l’esigenza di dover visualizzare delle immagini a fullscreen, l’unico problema poteva essere quello di dover attendere il caricamento delle stesse (5, 25 o 100 e molto grandi) prima di far partire lo slideshow (come avviene per slideViewer e slideViewer Pro). Per risolvere il problema ho pensato di sviluppare una soluzione in cui gli oggetti immagine vengono reperiti a partire da un file JSON nel quale si trovano il path e la descrizione – non sono quindi inseriti del DOM della pagina; in questo modo, definito un limite minimo di attesa (per es. si attenda che le prime 3 immagini siano in memoria) é possibile far partire lo slideshow. Non é di certo una soluzione non intrusiva (se JavaScript é disabilitato non si vede nulla) ma se state tutti in fissa con FaceBook vuol dire che avete tutti JS abilitato.

In realtà si tratta del motore per slideshow basati su JSON che avevo ideato per visualizzare le mie foto da flickr ma che non ho mai realmente completato e reso pubblico sotto forma di plugin poichè in questo momento sono più interessato allo sviluppo con Processing. In ogni caso, usando il metodo getJSON() é possibile parsare un file di questo tipo ed utilizzarlo per costruire a runtime tutto il DOM che volete; poche righe di codice per un risultato professionale e la base per un plugin molto interessante, che mi riprometto di completare, prima o poi.

na3.it

E’ stata lunga ma dopo qualche mese di lavoro (freelance, a partire dalle ore 20 p.m, quindi se fossero continuativi sarebbero una quindicina di giorni) sono felice di postare il link al nuovo sito na3 Studio di Architettura.

Come già accennato in qualche post precedente, per l’interaction design ho utilizzato jQuery; in particolare, per questo progetto ho usato i plugins Cycle, SafeMail, Reflect, e ho scritto neanche duecento righe di codice.
Il sito si presenta estremamente semplice nel design, chiaro, pulito, leggero e snello nel markup, potente e conciso nel codice JS.

na3
na3 studio di architettura

Da segnalare la homepage, la pagina studio e la pagina indice dei progetti; quest’ultima in particolare si basa sul menu accordion già visto su questo mio sito, ma in più può far scrollare – con effetto easing – gli elementi figli di una categoria (projects>design), se questi sono più di cinque. Abbiamo realizzato (customizzandolo nello style e in qualche elemento di markup) anche un corporate blog per na3, powered WP 2.5.

Very clean and concise markup, degrades wonderfully. Truly the type of work one would look for and appreciate.
— Kris, from the jQuery discussion group

— Kris, from the jQuery discussion group

Il lato backend è stato curato dal mio esimio collega freak Heracleum (di cui non abbiamo una foto), in PHP.
Enjoy the new na3 website!