NODEBOX AND THE SENSITIVE GRID
ACKNOWLEDGMENTS Francesco Tacchini
INTRODUCTION Nodebox is a program that is used to output simple/complex visual results through defining a process and certain parameters. These parameters can be tangible data that you define or they can be live data that is dictated through sensors. These parameters and data input are defined through specific “nodes” that have predetermined functions. For example, live data can be extracted from another program through a “CSV import” node. This node takes a live feed of data that is constantly updated from a different program (processing). Using this data (which are imported as pure numbers) you can manipulate shapes and grids or shapes within grids. I will be using Nodebox in conjunction with external sensors and programs to create a visual output that will provide for an immersive environment that is unique to a user. This will form the metaphysical aspect of the project—something that is nonexistent physically but rather exists within a digital realm but still interacts with the physical realm.
THE INTERFACE Nodebox is a very simple program that consists of three main aspects within itself. These aspects are explained below.
1
3
1
2
1.1. The main preview “screen�. Everything you do is output through this preview section. It is also interactive, meaning that you can interact with the objects inserted into the environment. 1.2. This is the main nodes area. New nodes are created using this part of the screen. You can use this area to interconnect different nodes that define different things. For example, you can insert a rectangle node and connect it to a grid node to create a grid of rectangles. 1.3. This area is used to define the different variables within a node (ones that can also be defined visually using the preview area). This area is a much more accurate way of defining the visual characteristics of a shape. It is also necessary to have this area for nodes that cannot be defined visually (for example, the grids node has to be defined in terms of the number of rows and columns wanted).
THE NODES As explained earlier, different nodes are used to define different things that from the parameters for a visual. Below are all the nodes that have been used for this particular project. 2.1
2.7
2.2
2.8
2.3
2.9
2.4
2.10
2.5
2.6
2.11
2.1 CSV Import Node—Imports the live data from the processing serial list. 2.2 Lookup Node—Looks for a specific prefix within the serial print out. 2.3 Make Number Node— Gets rid of the prefix for the live data.
2.12
2.4 Divide Node—Divides the imported values by a set denominator. This is important because the values being imported are too large to use tangibly to change values in other nodes. 2.5 Ellipse Node—Makes a circle. The radius of this is dictated by the imported value.
2.13
2.6 Colourize Node—Adds colour to the ellipse node. The colour values for this node is dictated by the HSB Colour Node. 2.7 Grid Node—This node places the ellipses in a grid. The number of rows and columns are set manually.
2.14
2.8 Translate Node—Translates the ellipse node into a grid. 2.9 Rectangle Node—Provides for a background for the grid. 2.10 Combine Node—Combines the rectangle as a background and the ellipse grid as a fore ground so that both of them render. 2.11 Audio Analysing Node—Analyses audio taken from the microphone in the laptop and converts it into numbers. 2.12 Round Node—Rounds up/down the numbers received through the audio analysing node. 2.13 Multiply Node—Multipies the rounded numbers from the Round Node. This is important because it increases the numbers to a larger one so that it is usable within the HSB color node. 2.14 HSB Color Node—Dictates the colour of the ellipses. This colour in turn is dictated by the values being received through the audio analyser.
CONNECTING THE NODES 3
4
3. This image shows how the nodes are interconnected and how they all depend on each other to produce a full rendered image. 4. A final rendered visual output still from the conditions defined in the nodes. It is to be noted that these two processes happen simultaneously next to each other.
NODES AND THEIR PARAMETERS 5.1
5.2
5.1 The CSV file is imported from a folder located within the processing file. All the numbers being imported are marked by the prefix “value� 5.2 The numbers are then stripped of their preffix. This prefix is used only as a marker to categorise them into tangible numbers. If the suffix is not removed then it cannot be used as a constantly updating variable by other nodes.
5.3
5.4
5.3 Once stripped of its prefix, it has to be transferred to a usable list. This node is used as a buffer that receives the data and filters an output of that data in pure numbers. 5.4Since the numbers being filtered through are too large to define the parameters of the geometric node that will be connected to this node, it has to be divided by a constant denominator (in this case, 10)
5.5
5.6 5.5 The other live data being considered within this project is sound. However, unlike pressure sensor readings sound does not have to be imported from another program as this particular node utilises the computer’s built-in microphone to detect sound and convert into tangible numbers. 5.6 The numerical data received from sound in the sound analysis node are not whole numbers and the decimal points are insignificant enough to be rounded up/down to the nearest whole number. This node facilitates that process. 5.7 However, in this case the numerical data is too small to be utilised effectively to produce a tangible result. This node is used to multiply that number into a larger one—something that can have a visible affect (in this case, 2)
5.7
5.8
5.9
5.10
5.8 This node defines the colour and transparency of the geometric shape by way of defining the colour through the colorize node which is attached to this node and the geometric shape node. This node has a range of defining parameters. The “Hue” parameter defines the colour changes. This parameter is dictated by the numeric data coming in from the Multiply node. The “Saturation” parameter defines the amount of colour the object is saturated by. This is set to 2 so that the colours aren’t too strong. Also, this allows for the transparency to be more obvious. The “Brightness” parameter dictates how bright the colour in the object is. The “Alpha” parameter defines the transparency of the object. This parameter is also dictated by the
multiply node. And finally, the “Range” parameter defines the amount of colours available, The higher the number the more colours are used and therefore the more subtle the changes. This has been set to a relatively low 5 to allow for more apparent changes. 5.9 This node is used as a means to apply the settings used in the HSB Color node to the geometric object. 5.10 This node is the main object node that all the different nodes are connected to and therefore is the main node that is affected by all the different changes made in the different nodes.
5.11
5.12
5.13
5.14
5.11 This node is used to lay out a grid that the ellipse node will be translated in. It is essentially a way of translating a single ellipse into several copies of itself in a grid. It’s parameters are manually set. It is set into 10 rows and 10 columns within a 1000X1000 pixel size canvas. The “Position” parameter defines where the centre of this grid is located. In this case it is located within an X and Y axis of (0,0)—i.e. this grid is laid out in an X axis and Y axis grid. 5.12 This node is very similar to the colorize node since it facilitates for the connection of two nodes to produce a tangible result. In this case it translates the ellipse node and all its attached nodes and parameters into the grid. 5.13 This node is very similar to the ellipse node. It is a defined geometric shape (in this case, a square of equal width and height—2000X2000 pixels). This is used as a background upon which the grid sits. This is added so that the changes within the grid is visible with ease.
5.14 Finally, this node combine the translate node with all the nodes connected to it with their respective parameters and the rectangle node as a background to produce the full tangible result of the project. In this project, it is used as a live data processing tool that outputs a visual representation of the data being translated.
PROCESSING Unlike Boids1, processing is used in conjunction with Nodebox in this particular project. Processing is used purely as a means of importing live data through a sensor into Nodebox. In this case, processing is used as a tool for facilitating the transfer of data between the sensor and Nodebox. THE CODE import processing.serial.*; Serial lightSensor; PrintWriter output; int valRequiredCount = 60; String[] vals; void setup() { lightSensor = new Serial( this, Serial.list()[2], 9600 ); vals = new String[ valRequiredCount ]; for( int i = 0; i < vals.length; i++ ){ vals[ i ] = ""; } } void draw() { if (lightSensor.available() > 0 ) { String value = lightSensor.readString(); if ( value != null ) { vals = addValueToArray( value ); } } } void keyPressed() { println( "SAVING FILE WITH DATA: " ); println( vals ); output = createWriter( "score.csv" ); output.println("value"); for( int i = 0; i < vals.length; i++ ){ output.println( vals[i] ); } output.flush(); output.close(); // exit(); }
String[] addValueToArray( String val ){ String[] temp = new String[ valRequiredCount ]; for( int i = 1; i < vals.length; i++ ){ temp[ i - 1 ] = vals[ i ]; } temp[ temp.length - 1 ] = val; return temp; }
1. See â&#x20AC;&#x153;Boidsâ&#x20AC;? booklet
ARDUINO The arduino is used in a similar fashion to how it was used in Boids project. It is used to upload a code to the arduino and is used as an communication relay between the sensor and the processing code. The arduino code informs the arduino board along with the sensors attached to it to capture data within processing. THE CODE /* FSR testing sketch. Connect one end of FSR to 5V, the other end to Analog 0. Then connect one end of a 10K resistor from Analog 0 to ground Connect LED from pin 11 through a resistor to ground For more information see www.ladyada.net/learn/sensors/fsr.html */ int int int int
fsrAnalogPin0 fsrAnalogPin1 fsrAnalogPin2 fsrAnalogPin3
int int int int
fsrReading0; fsrReading1; fsrReading2; fsrReading3;
= = = =
0; 1; 2; 3;
void setup(void) { Serial.begin(9600); rial monitor }
// // // //
FSR FSR FSR FSR
is is is is
connected connected connected connected
to to to to
analog analog analog analog
0 0 0 0
// the analog reading from the FSR resistor divider
// We'll send debugging information via the Se-
void loop(void) { fsrReading0 = analogRead(fsrAnalogPin0); fsrReading1 = analogRead(fsrAnalogPin1); fsrReading2 = analogRead(fsrAnalogPin2); fsrReading3 = analogRead(fsrAnalogPin3); Serial.println(fsrReading0); Serial.println(fsrReading1); Serial.println(fsrReading2); Serial.println(fsrReading3); delay(10); }
HOW IT IS INTER-CONNECTED 1
2
3
4
5
1.The code is written in the arduino coding interface and is verified and uploaded to the arduino uno. 2.The sensors are soldered and plugged into the arduino and the code is saved. It is now interactive and receiving input from the sensors and outputting data. 3.The data collected from the sensors is “printed” back through a serial port (the serial port being a Univeral Serial Bus aka USB) called a serial print. 4.This serial print data is exported into the processing coding interface. 5.When the processing code is run, the data is uploaded into nodebox and the results of the data interpretation is live and vivid.