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

Working with Math

First things first.

Before starting this section you should:

Math operations.

Nodebox allows a range of arithmetic operations suchs as multiply, divide, add, subtract. The nodes representing these functions can be used for instance to add numbers together but can also be used within more complex operations. In the following example we will have a look at a network which will create a set of hairs on a shape.

The idea is to create a network which grows hair on all these points. In order to give it a location from which the hairs should grow away from, we will implement a make point node with X set to 0.0 and Y also set to 0. This node will allow us to change the direction of each hair later in the process.

Hair step 1

Since the scatter node and the make point node contain point elements we will need a node to define the x and y values as a seperate list. Therefore:

Hair step 2

Now we will subtract the x value of the make point1 node to each of the x values of the scatter1 node. We will do the same for the y values.

These new values will be used as the length of each hair. In order to be able to change that length:

Now we will add these values to the original x and y values of the scatter node and convert them into a set of new points.

Hair step 3

In order to create the hairs add a line node

This should be the result:

Hair step 4

Try out:

Using angle and distance.

We can do the same function in a complete different way. In order to do that we will use the angle and distance node.

Now we will calculate the angle and the distance of each of these points to a center point.

In order to create the hairs, we will add a certain number to this distance and then convert it back to a point by using coordinates node.

Hair too


Suppose you want to create a set rectangles that vary in dimensions but get a color based on the average of all the dimensions. Nodebox allows you to do comparisons by using the compare node.

First let’s create a set of random numbers and calculate the average of them. We will use the amount of numbers of a grid to specify the amount of the random numbers.

Compare step 1

We will use the random numbers as dimensions for a rectangle placed on each point of the grid. We will also compare the random numbers with the average number so we can use this information (boolean True-False) to pick a color from a set of colors.

Compare step 2

Now for the color part. All rectangles smaller than the average should get one color, the others an other color.

Compare step 3

Try to change it so the bigger rectangles change into an ellipse of the same dimensions and color.

Compare step shape

Math and paths.

Nodebox allows you to create a range of different paths and functions based on sine and cosine. The next example shows how to create a Lissajous path which is based on the parametric equations

x = A*sin(at+δ)
y = B*sin(bt+γ)

Lissajous curves can be seen on oscilloscopes and are the result of combining 2 trigonometric curves at right angles.

Create a sample node to start with a set of numbers.

Create two multiply nodes and send the sample node to each one of them.

Create two sin nodes and send the multiply nodes respectively to the first one and the second one.

Create two more multiply nodes and send the sin nodes to them. These two multiply nodes will handle the width and height of the Lissajous path. You can rename them by using right click and select the rename option.

Create a make point node.

Create a connect node and send the make point node to it. Finnally create a colorize node to give the path a fill and stroke color.


Writing Filters.

Nodebox can be used to write more complex functions. We described a hair filter as the first example on this section. Below we will describe another two of them.


A first one we will call the web filter. The idea is to create a subnetwork that draws lines between points based on their distance and on a secondary selection.

We need a shape and the resampled points of it first.

The idea is to build a network for each point of the list that calculates the distance to each other points. We will select a few of them later to draw a line between the point and each one of those selected points.

Previous procedure sorts all points by distance from the control point. The second slice node selects the first 8 and pick1 select 5 out of these. Now we will draw a line between the control point and the selected points

Now the function get evaluated for 1 point. Change Start_index of slice1 to see the result for an other point. We will create a subnetwork to do it over all points.

web subnet

The creation of the subnetwork now allows us to evaluate it for each point. We will increase the number of Start_index of webby to do that. Let’s build a range.

You can increase the number of the secondary selection on webby itself. You can change the number of points by changing Length of resample1.

Try implementing color to it.


The webfilter applied on this svg of Obama.


Alternative web.

The procedure ask described above is a pretty heavy one. Sometimes it works to rethink the outcome. What do i want to achieve?

A web filter could also achieved through a less cpu intensive procedure:

The idea is that we will use comparison to find out if two arbitrary points are within a certain distance to each other. Therefore we will shuffle the original list so we have to list to pick points from. We will do this a few times to increase the possibility of having to point near each other. We will use a repeat node for that.

Now that we know the distance we can select a few of them based on a comparison procedure.

alternative web

Closest point.

As a second filter we will create a subnetwork that will calculate the closest point for a set of random points. We will visualize it by connecting both points to each other with a line.

closest point step 1

Now we will turn this procedure into a subnetwork so we can evaluate every point instead of just one.

closest point step 2

Same Obama, different filter. Some modifications on color and strokewidth.

closest point obama