Simple Examples of Database Manipulation in Processing: Part 1

I have used Processing many times to import and manipulate database files but I tend to either forget exactly how I did something or not be able to find the kind of instructions I am looking for. I greatly appreciate all of the example’s Ben Fry and others have on Processing and they are important tools in learning to work with data. I would like to provide a one-stop tutorial, reference and explanation for exactly how to get an array of data into Processing and then how to manipulate it for data visualization purposes. And, if possible I will make an extremely simple example so that it is easy to build from here.

Arrays are one of the most creative and interesting aspects of programming, they create structure but with variation depending on the data source. So many of the tools in art and design are based on grids, structure and variation. A few examples I have found are the ABA structure I learned from Ben Day, a very gifted typographer, to MoGraph in Cinema4D which is really nothing but an array manipulation tool and even the most basic tool in digital art – noise. These all provide methods for creating interesting visual rhythms in artwork, which is beautiful in it’s own right, but once you add information with meaning to a data source it is really something to explore.

So, to get started, I am going to base my examples off the Processing.org examples : 2D Array , Load File 1 and Load File 2. Let’s start with a basic example and definition of a one-dimensional array in the 2D Array example:

int[] myArray = {5,10,20,30};

void draw(){
   for (int i = 0; i < myArray.length; i++) {
   println("This is integer number " + myArray[i]);
   }
}

If you copy this code, it will simply iterate through the 4 entries in the array, printing out each one. That’s the myArray[i] function. It might seem odd, since as we can guess “i” is actually 0,1,2,3 and 4. So why is it printing 5, 10, etc.? Because when i is in the myArray[] it is looking for the first entry, second, third or whatever and then printing it out. In this case, those are the integers 5,10,20,30 .

Let’s add another one-dimensional array to the code to see for sure:

int[] myArray = {5,10,20,30};
String[] myStringArray = {"red", "blue", "yellow"};

void draw(){
   for (int i = 0; i < myArray.length; i++) {
   println("This is integer number " + myArray[i]);
   }

   for (int i = 0; i < myStringArray.length; i++) {
   println("This is my String " + myStringArray[i]);
   }
}

Try this out in Processing. Notice anything odd? Well, we have 4 iterations of myArray and only 3 iterations of myStringArray (those names can be whatever you want, BTW). An Array will have a number of entries, and that is a property that we can call by using myStringArray.length. This is actually pretty important, and handy! It’s important because a common error is: Exception in thread “Animation Thread” java.lang.ArrayIndexOutOfBoundsException: 3 This error occurred because I forgot to change myArray.length to myStringArray.length when I copied the code. I asked the program to give me the 4th entry in the StringArray and it did not have one, so the program stopped cold.:-( Make sure you have an entry when asking for it!

OK. Pretty boring stuff but it is essential to getting started. Above I have put 2 One-Dimensional arrays in the code, please don’t confuse that with a 2-Dimensional array. The 2D Array example on Processing demonstrates how you can iterate through a grid of pixels, coloring each one a random color. Noise!

I’m most interested in getting data that is more complex than just a number. So, let’s move on to reading in a tab (.tsv) or comma separated (.csv) text file into Processing and using that information in some way visually. The next code is based off the Load File 1 and Load File 2 example on Processing.org. First let’s build an array for putting 4 white pixels at various locations in the display:

String[] myStringArray = {"10,190","100,19","1,90","110,90"};
int index = 0;

void setup() {
  size(200, 200);
  background(128);
  stroke(255);
  frameRate(12);
}

void draw() {
  if (index < myStringArray.length) {
    String[] pieces = split(myStringArray[index], ',');
    if (pieces.length == 2) {
      int x = int(pieces[0]);
      int y = int(pieces[1]);
      point(x, y);
    }
    index = index + 1;
  }
}

That’s a simpler version of the Processing Load File 1 code, just so we can see that we are still dealing with Arrays and what they look like. We needed to split each entry into an x and y coordinate, since we are using commas to separate the coordinates we told it so – ‘,’. The comma is the “10,100” inside the quotes, the other comma is functioning as a line return to tell the program to move on to the next line of data.

The line directly beneath the split is checking to see that we have a valid line with at least 2 entries (it’s going to prevent errors) and if so, convert the entry from a String to an Integer so we can use them for positioning.

Now, it’s very inconvenient to copy and paste database into your program, and if you plan to pick data off the web in real time, not at all practical. So, we need to read in a text file of some kind, and for this example let’s just plop the same coordinates into a text file a few times. You don’t want to use quotes and instead of commas use a TAB to separate the two coordinates and then a return to create a new line. Name this text file “positions.txt”. Essentially, this is how all databases and spreadsheets work. If you paste this directly into Xcel, it will fill out the spreadsheet with two entries for each line and then move to a new line. You can also use commas, but I prefer tab separated text files when working with various kinds of data.

10 190
100 19
1 90
110 90

OK, now the code Load File 1 on Processing makes more sense:

String[] lines;
int index = 0;

void setup() {
  size(200, 200);
  background(0);
  stroke(255);
  frameRate(12);
  lines = loadStrings("positions.txt");
}

void draw() {
  if (index < lines.length) {
    String[] pieces = split(lines[index], 't');
    if (pieces.length == 2) {
      int x = int(pieces[0]);
      int y = int(pieces[1]);
      point(x, y);
    }
    // Go to the next line for the next run through draw()
    index = index + 1;
  }
}

I changed a couple of things, they multiplied int x and y by 2, for some reason which made it hard to see how the pixels were being positioned. I also left the background black, but the white pixels should be in the same place as before. You should notice that we are now reading a file from our drive and splitting based on the tab – ‘t’.

Cool, still pretty simple but it’s a start! Now, let’s get some real-life data examples which tend to be more complex. We’ll iterate through a bunch of entries, identifying each entry as a String, float or integer and then we can start messing with things visually.

Continue to Part 2
Finished Example

2 thoughts on “Simple Examples of Database Manipulation in Processing: Part 1

Leave a Reply