Friday, August 1, 2008

Processing and NodeBox

I have played around with processing on and off for a few years now.

setpixel told me about the app pretty soon after it came out. I have never spent much concentrated time working with it, though. This year, at pycon, i learned about NodeBox, which is essentially processing for mac os x using python instead of java. I have also dabbled a bit with that app, but to no real end.

I have a copy of Ben Fry's new book Visualizing Data and have been reading through it every once and a while. I decided today to try to work through that book and translate the examples to python along the way so i can learn nodebox a bit better and get through some more hands on processing work.

This morning at the coffee shop, i made a quick example app to run in both nodebox and processing just to get things started. The design is a simple stairstep of squares with changing fill and stroke colors. Even this simple application shows some interesting differences between nodebox and processing (as well as java and python).

Processing
---------------
Processing Design

Code sample:

int sizeWidth = 600;
int sizeHeight = 600;

void setup()
{
size(sizeWidth, sizeHeight);
background(.7*255);
noLoop();
}

void draw() {
for (int i = 0; i<20; i++) {
fill(ceiling(i*40,255));
stroke(ceiling(i*20,255));
rect(i40, i40, 40, 40);
}
}

int ceiling(int inputVal, int ceilingVal) {
if ( inputVal > ceilingVal ) {
return ceilingVal;
} else {
return inputVal;
}
}


Nodebox
------------
Nodebox Design

Code Sample:

sizeheight = 600
sizewidth = 600

def background (w,h):
size(w, h)
fill(.7, .7, .7)
rect(0, 0, w, h)

background(sizewidth, sizeheight)

for i in range(20):
fill(i*40/255.0, i40/255.0, i40/255.0)
stroke(i*20/255.0, i20/255.0, i20/255.0)
rect(i40, i40, 40, 40)


While this sample design is very simplistic, there are a few interesting points that i learned while making this example.

* processing will not automatically cap color values at 255 if given numbers > 255, so i needed to make the ceiling() function to keep the behaviour between processing and nodebox the same.
* nodebox has a richer rect() method that lets you specify corner radius. The stroke will follow the corner radius settings. I haven't dug into processing enough yet to figure out the equivalent method for drawing rounded rectangles, but it is definitely possible.



No comments:

Post a Comment