Tag Archives: design

saving hi-res, transparent png files from Processing – with a key press

self portraitAn effective method to save a frame with a different size than the size of the 3D sketch you’re drawing, is to use a PGraphics to make an enlarged copy of the scene; this image (click on it) has been created from the webcam feed wich is normally set to 320×240 pixels; when you create a PGraphics (Processing’s main graphics and rendering context) you must specify the width and height of the object itself; try to multiply the sketch’s original size by 10. You get images of 3200×2400 pixels or more. See hi-res anemone and hi-res webcam feed, they’re both transparent png files saved with this technique from two of my sketches.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
void keyPressed()
{
    switch(key) {
    case 's':
    noLoop();
    drawbg = false; // this is a boolean wich you can use to remove the background from the main draw() method; eg: if(drawbg) background(255)
    recorder = createGraphics(width*10, height*10, P3D); //  original app size is multiplied by 10
    recorder.beginDraw();
    cam.getState().apply(recorder); // useful for 3D scenes, sync the perspective - you need the peasyCam library, applies the latest CameraState
    draw();
    recorder.endDraw();
    recorder.save("test.png"); // save to disk (skecth folder)
    recorder = null;
    println("screenshot saved");
    loop();
    break;
    }
}

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

3D shapes with Hemesh

hemesh01
HEC_Geodesic. made with Processing and Hemesh.

These incredible shapes have been created with Hemesh, a library for Processing created by Frederik Vanhoutte (W:Blut) for creating and manip­u­lat­ing 3D meshes. I just downloaded the lib and started coding, trying to render them with Christopher Warnow’s SunflowApiApi. So far, these are the results. Amazing libraries!

hemeshsunflow
hemeshsunflow02

After some figuring out, I got SunflowApiApi to work directly from Processing! Still did not get perfectly how to use the 8 available shaders and how to set up the scene global illumination, but the first results are impressive.

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!

Ken Schles uses slideViewerPro

kenschles
Image credits: Ken Schles photography – portaits page. featuring slideViewerPro.

Tre o quattro settimane fa, il fotografo Ken Schles mi ha contattato chiedendomi se potevo aiutarlo ad implementare slideViewerPro (il mio jQuery gallery engine) sul suo sito; mi capita abbastanza spesso di ricevere richieste di ‘aiuto’ o di implementazioni di nuove features. Questo ‘Ken’ mi aveva inviato anche una url per vedere come stava implementando l’engine e per farsi aiutare a risolvere alcuni problemi di allineamento su altri elementi della pagina; incollo la url nel browser e appena parte lo slider ecco apparire volti molto noti, tra i quali mi sembra di riconoscere Rod Stewart, Alicia Keys e Martin Scorsese. Dico, ma chi é questo Ken? Leggo la sua bio e mi accorgo che é uno dei fotografi americani più noti ed importanti, con esposizioni permanenti al MoMa di New York, autore di libri definiti una “intellectual milestones in photography” (Süddeutsche Zeitung) e di foto degli album di rock bands come Cypress Hill e Green Day, solo per citarne alcune. Insomma un pro della macchina fotografica.

In un primo momento ho tentato di applicare qualche fix al CSS ma mi sono subito reso conto che avendo Ken costruito quel sito nell’arco di alcuni anni, si era portato dietro parecchie incongruenze e ripetizioni inutili nelle dichiarazioni; un altro grande problema risiedeva nel fatto che nessuna pagina aveva lo stesso markup della precedente: ogni pagina era unica. Ovvio, un progetto amatoriale ma tutto sommato abbastanza bene eseguito; si vede che usa un Mac e che il suo browser di riferimento deve essere Safari: ha usato selettori ed animazioni ‘tipiche’ del webkit, molto avanzate e questo mi ha stupito. Comunque, mi sono proposto di riscrivere per intero il CSS e anche i templates dai quali avrebbe potuto continuare da solo a ricodificare l’intero sito; era l’unico modo – fra l’altro – di far funzionare correttamente la gallery e rendere la grafica consistente in tutte le pagine. Oggi lo ha pubblicato e sono davvero contento di averlo aiutato a ricostruire questo suo sito, nel quale evidentemente ha investito ore di lavoro e voglia di imparare. Bravo Ken.