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

Getting Started

Welcome to NodeBox! In this tutorial we’re going to learn the essentials for working with the program.

Downloading NodeBox

If you haven’t done so already, you should download NodeBox first.

To install on Windows, double-click the installer and walk through the steps. On Mac OS X, drag the icon to your Applications folders (or anywhere you like).

Creating your first node

Open the application. After a short loading time, NodeBox opens a new document window that looks like this:

A new NodeBox window

NodeBox documents are composed of networks of connected nodes.

Remove the default rect node by selecting it and by entering the backspace button.

Click the New Node button or double-click anywhere in the network pane. This brings up the node selection dialog:

Node Selection Dialog

From this window you can create an ellipse node. There are three possible ways:

NodeBox window with one ellipse node

The NodeBox document window consists of three panes. These are (clockwise, from the top):

NodeBox named the new node “ellipse1”. That’s because each node in NodeBox needs to be uniquely identifiable.

Let’s change some parameters:

Your screen should look like this:

A smaller ellipse

Everywhere you see a number, you can drag it to see what it does. If you make a mistake, you can undo it (Cmd+Z on Mac or Ctrl+Z on Windows/Linux).

Connecting nodes

The power of NodeBox comes from connecting nodes together. Nodes are connected using their ports. Each node has one output port and zero or more input ports. In this simple example, we’re going to put shapes on the points of a grid.

Click the New Node button again, and choose the grid node. Double-click it to place it in the network.

Instead of an ellipse, you should now see a grid of little blue dots in the viewer pane. We can connect the grid1 and ellipse1 nodes by dragging from the output port of the grid1 node to the position input port of the ellipse1 node. Double-click the ellipse1 node and you will see this output:

Ellipse and grid node, connected together

Rendered and Selected Node

NodeBox can only show the output of one node at a time. We see the output of this rendered node in the viewer pane. Currently, ellipse1 is the rendered node, this is indicated by the little white triangle in the right corner of the node.

We can view at the results of one node while working on the parameters of another one. We’ll keep the ellipse1 node rendered while selecting the grid1 node (click on it once).

We’ve just updated the grid1 node, but we’re still looking at the results of the ellipse1 node. This means the changed output of grid1 is passed on to serve as the input of ellipse1. This is the core idea behind NodeBox: nodes passing (in this case) visual geometry or other information to other nodes.

To recap:

Selected vs Rendered Node

Variety

Instead of connecting the grid node directly to the ellipse node, another possibility is to create a translate node and connect the output of ellipse1 to the shape port of translate1 and the output of grid1 to the translate port of translate1.

An alternative way of putting ellipses on a grid

For the moment we’re drawing the same ellipse on each point of the grid1 node so let’s create some variation in size and color.

Suppose we want 4 different sizes for the ellipse and 5 different colors.

Click the New Node button again, and choose the sample node. (You can also double-click in the network view to open the node selection dialog). Double-click it to place it in the network.

If you now take a look at the viewer pane, you should see a list of 4 values (30.0, 40.0, 50.0 and 60.0), listed vertically. Now connect the output of sample1 both to the width port and to the height port of the ellipse1 node.

Leave all other nodes as before and double-click the translate1 node. Take a look at the result:

Ellipses having different sizes

What happened is that the first ellipse gets a size of 30.0, the second one a size of 40.0, the third a size of 50.0 and the forth a size of 60.0. Since there are only 4 (size) options but a lot more points in the grid it will loop again over the same (size) list so the fifth ellipse gets a size of 30.0, the sixth a size of 40.0 and so on.

Have a look at the Nodebox Concepts page for more detailed information on this principle.

Now let’s add color to the network.

Click the New Node button again, and choose the colorize node. Double-click it to place it inside the network and position it between the ellipse1 node and the translate1 node. You don’t have to remove connections, just connect the output of ellipse1 to the shape port of colorize1 node and the output of colorize1 to the shape port of translate1. Nodebox will remove the previous connection.

Double-click the colorize1 node and click on the fill parameter: a color picker window will appear.

Nodebox color picker

Choose a color and render the translate1 node. As a result all ellipses will have the same color.

Now let’s create 5 different colors.

Create a hsb color node and

In order to create a number of colors we will change the value of hue a number of times.

Create an other sample node and

Now connect the output of this sample2 node to the hue port of the hsb_color1 node. This will create 5 colors within the range of green and blue. Finally connect the output of hsb_color1 to the fill port of colorize1. Render the translate1 node again and have a look at the result:

Ellipses with different sizes and colors

Until now we have worked with the same ellipse shape. NodeBox allows you to work with a variety of shapes. Let’s replace the ellipse1 node with a polygon node.

Create one and:

You should get this result:

polygons

Saving and Exporting

NodeBox saves documents in the .ndbx file format. These files can only be opened by NodeBox. If you want to use NodeBox compositions in other programs, export the document to PDF. You can use PDF files in other graphic programs such as Adobe Photoshop or Illustrator. NodeBox preserves all vector information so your compositions won’t be pixellated.

Export the document:

NodeBox will export the rendered node. In our example, if we just wanted to export one polygon, we need to double-click the polygon1 node to rendere it, then export again.

Next Steps

Now that you’ve seen the basics, you can: