Running with Data

fun with data, music, and visualization

This project is maintained by jsundram

NodeBox vs Processing

TL;DR: NodeBox-OpenGL gives you the sugar and power of Python and the ease of Processing, but with a significant speed penalty. The good news is: there’s lots of low-hanging fruit. Let’s submit some diffs!

Lynn Cherny’s talk, Data Visualization with NodeBox (Slides, Video) made an excellent case for using NodeBox as a framework for creative data visualization instead of Processing. NodeBox lets you code in Python instead of Java. And although NodeBox lacks Processing’s vibrant community of developers and rich ecosystem (including geomerative and toxiclibs), NodeBox comes with a lot built-in (flocking, particle systems, graphs), plus easy access to all the goodies you could ever want in Python.

So, I decided to give it a whirl and installed NodeBox-OpenGL (hereafter referred to as “NodeBox”). If you have mercurial, git, and pip installed, it’s not too bad (on OSX, you need to install pyglet from HEAD because version 1.2, which switches from using Carbon to Quartz, has not yet been released):

    pip install hg+https://pyglet.googlecode.com/hg/
    pip install git+https://github.com/nodebox/nodebox-opengl

Once that was out of the way, I decided the most instructive thing to do was to port an existing Processing sketch to NodeBox. BoxyLady2, a 72-line sketch by analogpixel became 20 lines shorter (yay!), but also 11x slower (.375 fps for NodeBox, 4.4 fps for Processing v2.0b9). That’s a hell of a performance price to pay.

My rendered output is here (I used ImageMagick to stitch the frames together – it’s a ~9 MB animated gif)

boxy jsundram

click the photo above to open the animation

Despite its performance problems, NodeBox does have a primitive that Processing is lacking: the star. Interestingly, it was implemented using an inefficient intermediate class (BezierPath) instead of directly in OpenGL, like the other primitives. Rewriting star in OpenGL (along with some cute tricks), I was able to commit fast_star, a function that runs 23x faster. So, of course, I made this.

starry jsundram

click the photo above to open the animation

And, as advertised earlier, Python’s many great libraries are easily callable from NodeBox. I decided to make a quick project, starry.py with fast_star and scikit-image. It barely scratches the surface of what can be done, but it’s a fun demo.

Out of curiosity, I also ported the sketch to processing.js (which was pretty straightforward); you can see the result here. I was expecting processing.js to be similarly slow – how could you expect javascript to keep up with the mighty JVM? I was wrong; the processing.js sketch was the fastest of all, averaging 5.3 fps, or 14x faster than NodeBox! Admittedly, the code does less work; it doesn’t save any images to disk. (On a side note, the code is easily extended to write out an animated gif using gif.js) Removing the image-saving code from Processing (Java) yields a blistering 27.6 fps, while removing it from NodeBox makes almost no difference.

So why is NodeBox so much slower? I took a look at context.py, the file where all the drawing happens. I was able to increase the performance of all the drawing primitives (line, rect, triangle, and elllipse) by taking advantage of some specific OpenGL instructions. Performance improvements ranged from 12 - 50% — still not enough to make NodeBox competitive with Processing in regard to rendering speed; with the improved code, BoxyLady2.py still only runs at .6 fps, still about 8x slower than javascript.

Perhaps it’s the JIT in JavaScript that makes the difference? To find out, I installed PyPy, an implementation of Python that uses a JIT. After a slight rewrite to avoid using numpy, I was able to get 2.7 fps — about half as fast as processing.js, and over 4x as fast as my existing Python implementation (Apple-supplied Python 2.7.1). So if you’ve got frame rate problems in NodeBox, PyPy may very well be your answer.

Even with the JIT, and some OpenGL improvements, NodeBox lags behind both Processing implementations. Perhaps they employ occlusion culling or other tricks to avoid doing unnecessary work. If you’re a committer on Processing.org, please take a look at NodeBox and tell us what we could be doing better.

Rendering Speeds in frames per second (FPS)

NodeBox
(v0.7 stock)
NodeBox
(latest)
NodeBox
(latest + PyPy)
Processing Processing
(no image saving)
Processing.js
.375 .6 2.7 4.4 27.6 5.3

Long story short, NodeBox has a lot to like, but has a long way to go before it can compete with Processing in terms of community and performance. But that means making incremental improvements is really easy. Go pull out your profiler —@huyng wrote a great post on profiling Python — and submit a pull request!


Originally published: Sat, 06 Jul 2013 to https://runningwithdata.tumblr.com/post/54781756667