An Introduction To Programming With Processing

Working with external data

Text File
There are many ways of getting data into a Processing sketch from importing a simple image, 3D geometry or importing spread sheet data and the list goes on. But amongst the simplest and most versatile methods of getting external data into Processing is by means of a text file.

A text file imported into a sketch should have the file extension .txt. A word processor document might have additional formatting and as a result might produce unexpected results when used in a sketch. For this exercise it is recommended that you use the file named names.txt in the data folder of the viz05 exercise directory. Importing a text document into a sketch works in the same way that images are imported into a sketch. Locate the file to be imported and click and drag it into the PDE with the sketch you are working on. The PDE will report that a file has been added successfully to the sketch and if you were to open the sketch's data folder you will find a copy of the file in there. In order to display the contents of the names.txt file in the Display Window we will use an array of Strings with each element of the String array representing a line of characters in the names.txt file. Lets have a look at how to do this.

In the global variable scope declare a new array of Strings and call it names:
String[] names;
Notice that declaring an array like this does not indicate how many elements will be in the array. This is because we want Processing to tell us how many elements are going to make up this array. In other words if we had a text document with many lines each of which was intended to be an element in an array, instead of counting the lines in the text document and creating the array like so:
String[] names = new String[10560];
We would use the former method were the number of elements is decided by Processing and if we wanted to know how many elements Processing has populated the array with, we would use the array's object variable, length to find out. We'll have a look at how to do this a bit later. In setup() we're going to populate the array with the loadStrings() function, which will accept one parameter that is the name of the text file containing the data that will be used to populate the array.
names = loadStrings("names.txt");
We now have an array of Strings that we can refer to by it's variable name called names. This array has several elements each consisting of a String representing each individual line of the names.txt file. Finally to display the information contained within the elements of the names array we will use the text() function within a for loop:
void draw() {
  for(int i = 0; i < names.length; i++){
      text(names[i], 20, i*20 + 20);
  }
} 
using load Strings
The array object variable's names.length data stores the amount of elements in the names array, this information is important for creating the test of a for loop iteration. The text() function uses each element in the names array as a data input parameter, subsequently rendering each line of the text file one after the other and offset on the Y axis.

Using this technique of loading external data does not have to be confined to working with the Strings datatype. Typecasting provides a convenient approach to converting String data into numerical data that can be calculated. Here's an example of the loadStringsExample.pde file that does just that with a file containing numbers. It is worth noting that although when you open the numbers.txt (in the viz05 data directory) file it reveals a list of numbers to you, when this information is read into our sketch Processing identifies this data as String data. Which is why we must first typecast each element of the numbers array with the int() function into an int datatype before we can perform addition on the data.
String[] names;
String[] numbers;
int tCast;

void setup() {
  size(300,300);
  smooth();
  names = loadStrings("names.txt");
  numbers = loadStrings("numbers.txt");
}
void draw() {
  background(100);
  for(int i = 0; i < names.length; i++){
  text(names[i],20,i*20 + 20);
  }
  for(int i = 0; i < numbers.length; i++){
    tCast += int(numbers[i]);        //typecasting int(numbers[i])
  }
  text(tCast,250,20);
}

Download the example file

Social Commentary Visualization

Social Commentary Visualization

The file viz05.pde is a demonstration of how we can apply the knowledge of what we have learned about classes, software objects and working with external data in Processing to create visualizations of some of the vast (and sometimes obscure) information that can be sourced from the internet. This particular visualization demonstrates how the four major provinces in South Africa are spending thier money on digitally related media. You might often find that visualizations of this sort serve the main purpose of abstracting the numerical details they are representing, and subsequently simplify this information to convey a single idea or meaning from many different data sources. Take some time to examine the code, all you need to understand about how the sketch works is contained within this guide. Once you are confident that you have a firm grasp of the main concepts that make up this sketch, try sourcing your own data and creating your own visualizations using Processing.

Download the example file