Notebook

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

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(i*40, i*40, 40, 40);
      }
    }

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

Nodebox

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, i*40/255.0, i*40/255.0)
        stroke(i*20/255.0, i*20/255.0, i*20/255.0)
        rect(i*40, i*40, 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.