Nodebox 3 how to tutorial

What: 

NodeBox is a node-based software application for generative design. It helps designers and everyone that uses it to automate boring productiong challenges, visualise large sets of data and manipulate the raw power of computer without using mechanical language of machines. The tools are able to integrate with traditional design applications and are cross platform.

In my case it was used as a tool for artistic expression and beauty of the heart.

 

Where:

Main page: https://www.nodebox.net/node/

Download: https://www.nodebox.net/download/

The project:

Explanation of the project itself. followed by through explanation of tutorial with pictures etc explanation of workflows and rendering. It is at least in a nice part based on howtos of Nodebox wikis and tutorial, with some changes to make it more suit to my purpose as for example retracing animations and shapes  by letter shapes, reconfiguring the borders  a few different things on color algorithms, but don’t worry. We will cover most of the needed things in this tutorial.

 

Before we go too into depth I will first try to explain the following graphical representation and a bit about Nodebox 3 specifically at the same time. So, the software itself is meant to be used as a tool toward generative design, mathematical and data representation in a visual way. In this case I had used it as a tool of artistic expression, or at least so I have envisioned my use. Also you can do everything through programming and only Nodebox version 3 enables you to do it in as intuitive and useful way like you can see here. They also offer library for Open GL which is bloody good. Maybe some fun and intriguing use can be found for games or virtual reality ?

 

For this tutorial I will also assume basic knowledge and that you have done the official tutorial which is here and also part of the references and things that I find connected at the bottom of the article. And for this current variation of nodes, it may help taking the original tutorial and checking the differences or using the following images as better reference and maybe learning in process how to make it your own with some fluffy new funny variations. And now directly to the already done node diagram bellow.

 

Overral description of the diagram:

You get a number in a defined range from range1 node. Run that number through 3 separate nodes of add1 divide1 and multiply1. From there the new unique numbers continue down the path. One to the wave1 which will take care for wave generation and the wave1 output will be the input of make_point1. Which will actually visualize the dots based on the waveform itself. The divide node is used as a parameters for ellipse1, if i am correct it should be used for width and height.

Ok now lets jump to the right side. Through the colour modes you provide your choice of colours (you can also use RGB nodes if you want instead). From there colour nodes are connected to the combine list and to repeat list. Which basically in practice means that the different make_points will be covered in a certain colour for certain length of points. For example 5 consecutive points…

From the make_point lover we go to ellipse which just defines the shape of the points, following by colourize which will help us colour the points themselves, via a normal connection like on the picture of a group1 one followed by align1 node. copy1 node settings will be explained more in detail bellow on a separate picture. Via scale1 node you can define the sizes and scalation of your wavy points. If you are wondering what are those lines that go into left upper direction… they are parent inputs which a parent network of nodes provide to a child network group which is what we see at the moment.

 

1

 

On the middle top you have range node, which you use through its settings  and manipulate the range of the number generated. From there i sent the number in 3 ways, from addition node to dividing node and multiplying node.

The addition node continues to wave1 form which other argument comes from a parent (Basically you can use grouping for a lot of modes, and use that group as a single node one level up the hierarchy and define which inputs are available from the upper hierarchy down etc. The grouping itself can be done via selection and right click until you see a menu to create a subnetwork). From wave1 node (where you can set up the wave size and repeat period through its parameters – picture screen can be seen below) which defines the size of a wave we continue to make_point1 which will create actual point themselves.

 

2Capture

 

Example of used wave1 node with current configuration of sizes period and type.

3wave1

 

Exact configuration of copy1 node. If you look closely you can see that I have chosen 9 copies with 40 angle rotation. Due to this node you can create a circley slightly angled starfish like looking structure. It basically takes the wave points created before which were also coloured, takes that makes 9 copies of them and angles everything together around a common centre point.

4copy1

 

Ok, the lowest level is finished for the time being. Select all the nodes, press right mouse button and choose Group into Network. and name it a thing. Connect 2 random_numbers nodes and a frame nod like you see on the picture. You can actually ignore the mod and add nodes since I have just forgot to remove them while doing this.

This and the next picture are showing you confighs for random_numbers1 and random_numbers2 node configurations which I have chosen. After all is done feel free to play with any configs with keeping the eye on the changes.

5randomnumbers1

 

6randomnumbers2

Showing the thing config which contains all the low level node configuration seen from earlier.

7overallview

And now comes the proper fun part of the tutorial with awesome looks and all the glitter!

Create nodes according to the image bellow.

For the randomnumbers1 values are: 50 min and 500 max

For the randomnumbers2 values are: 0 min and 800 max

For the randomnumbers3 values are: 0.75 min and 4.00 max

For the range1 start is 0.00 and Step property is 1.00.

For the number1 itself I do actually think the number itself is not so important since I circumvented it via scatter1 node, but in case it is important its value is 12.00.

And now the coolest part follows 🙂

8viewonendproduct

 

Lets take a closer look to 2 specific nodes which make the biggest difference of them all. textpath1 node is a very special node. It is capable of tracing lines of any letter or character in general from at least in theory all supported fonts and UTF-8. As you can see in the properties window you can input Text which will be used by scatter node to populate points on the path of the letters.

9fonttextpath1

And a look on scatter node with its config. In this case we used amount of 100 points, which translates in reality in 100 starfish coloured in different shades of colour in a shape of CU (Code and unicorns)

10fontpointbasedsystem11amountofpoints

 

By |July 27th, 2015|Categories: ALL|

About the Author:

Senior lead developer currently working in Java, architecture design, mix of tech from Front-end in JS and templating to chef,rundeck etc. For fun and challenge I am writing different blog posts from stories to poems, programming tutorials and many more. Currently working on my Masters degree on a part-time basis.