1. NodeBox 3
    1. Homepage
    2. NodeBox 3Node-based app for generative design and data visualization
    3. NodeBox OpenGLHardware-accelerated cross-platform graphics library
    4. NodeBox 1Generate 2D visuals using Python code (Mac OS X only)
  2. Gallery
  3. Download
  4. Documentation
  5. Forum
  6. Blog

How NodeBox Works

NodeBox uses a different model from traditional applications such as Photoshop or Illustrator. Imagine an assembly line of workers. Each worker does one thing, and one thing only. After he or she has done their operation, the object is passed on to the next person who does his thing.

The FSO Assembly Line Warszawas assembled at FSO in the early 1950s.

In the NodeBox assembly line nodes are the workers. They are the basic building blocks of the application.

By connecting nodes together, you create your own assembly line where a new shape goes in and a complex result comes out. Every step along the way can be changed and animated.

Here’s an example:

  1. We create a rect node. This node is a generator: it generates a new shape. Step 1
  2. We connect a colorize node to the rect node. This node takes the output of the rect node and changes its color. We call it a filter node, since it filters an existing shape. Step 2
  3. Finally we create a rotate node and connect it to the color node. It takes the output of the color node and changes its rotation. This is also a filter node, it filters the colored rectangle node. Step 3

We can examine what each worker node is doing by changing the rendered node. The rendered node is the one that’s displayed in the viewer. You can render a node by double-clicking it.

Ports

Nodes can send data to each other using their ports. Ports represent the inputs and output of a node. A node takes data in from its inputs, processes it, and sets a value in its output port, ready to be picked up by the next node.

The input and output ports of a node are displayed in the network view. The input ports are also displayed in the port view:

Dual views of the node Ports are displayed both in the port view (vertically) and the network view (horizontally).

Whenever a port is connected, the port view indicates that the value for this port comes from another node:

Connected ports The values for the width and height ports come from another node.

Port Types

Each port expects a certain type of values:

The color of a port indicates its type. The background color of a node is the color of its output type.

Type Conversions

NodeBox automatically converts between types of ports. For example, if you connect a number to the text of the textpath, NodeBox converts the number into a string so it can be rendered as text.

Automatic Type Conversion The integer output gets converted automatically to a string for the textpath node.

Not all inputs and outputs are compatible. Here’s an overview of which output ports (on the left side) can be converte to which input ports (on the top).

To →
↓From
Integer Float String Boolean Color Point Geometry
Integer =  
Float =  
String =  
Boolean =    
Color       =    
Point         =  
Geometry         =

Lists

In essence, NodeBox is a list processing machine. Although initially invisible, the input and output of all nodes are lists.

If you wonder why NodeBox does not have a “for loop” like in programming, that’s because looping is implicit: generally, if a node receives a list of data, NodeBox will execute that node for each element in the list, and give back a list with the same size.

Here’s an example:

A grid node connected to an ellipse node The grid node provides a list of positions for the ellipse node.

A grid with three by three columns executes the ellipse node 9 (3 x 3) times:

A grid of 3 by 3 ellipses

A grid with ten by ten columns executes the ellipse node 100 (10 x 10) times:

A grid of 10 by 10 ellipses

The grid node doesn’t do the looping: it just gives back a list of points. The NodeBox engine takes care that the ellipse node gets executed for as many elements as there are in the list:

A short list of 9 points for a 3 x 3 grid:

The points of a grid of 3 by 3

A long list of 100 points for a 10 x 10 grid:

The points of a grid of 10 by 10

The output of the ellipse node is – again – a list: a list of 9 paths for a 3 x 3 grid, and a list of 100 paths for a 10 x 10 grid.

List Matching

So far, we’ve only connected one port on a node. The behavior should now be obvious: execute the input node as many times as there are elements in the list. But what if we have more than one connected port? What if the lists have different sizes? NodeBox matches lists in a smart way.

Imagine that you want to change the colors of a number of textpaths. You have five text paths (A-E) and three colors: red, green and blue:

Five letters, three colors Five text paths, three colors.

NodeBox executes the colorize node (which is what we’re using to change the color of the text paths) as many times as there are elements in the longest list. If other lists run out of data, they wrap around:

List wrapping Red and green are re-used for letters D and E

Another example: say we have create 10 ellipses on a line (I use a grid node with one row and ten columns):

10 ellipses, 1 size value

I can connect a sample node to the width and the height. The network now looks like this:

Ellipse network

The amount of numbers wraps around:

10 ellipses, 10 size values 10 ellipses, 10 size values

10 ellipses, 9 size values 10 ellipses, 9 size values

10 ellipses, 5 size values 10 ellipses, 5 size values

10 ellipses, 2 size values 10 ellipses, 2 size values

10 ellipses, 1 size value 10 ellipses, 1 size value

Note that the last one is the same as specifying one value: the value list “wraps around” for every ellipse, effectively providing only one value.

A Visual Programming Language

NodeBox is actually a visual functional progamming language. It is inspired by a number of textual functional programming languages, notably Clojure and Haskell.

In functional programming, the functions take a central role, transforming data from one representation to the next.

Note that in NodeBox, we haven’t really talked about classical object-oriented programming constructs such as classes and objects. Instead, the objects of NodeBox are really holding places for data. The functions take in the data and generate new data.

Internally, nodes have a reference to a function: a piece of code written in Java, Python or Clojure.