Category Archives: Processing

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!