Visualisation: graphs

Now we'll look at the Processing platform and code.

The tutorials on the processing site are really good, and actually a nice refresher for a lot of java. Go to the Tutorial site and work through as many of the basic tutorials as you like. I'd recommend at least the following:

Getting Started
Overview
Objects (NB: see below)
Processing in Eclipse

Note that all the tutorials but the last one encourage you to forget you are writing java calls - and this is good advice. This is particually key with the Objects tutorial - just write the classes in the same editor window as the initialisation code. You can put it in a separate tab if you like (see right-pointing-arrow-icon on right of the toolbar), but don't use java filenames as the name, so, for example, call your tab Car not Car.java, as the latter will cause the class to be created outside of the core PApplet class, and you'll then have to deal with it as a separate fully-formed java object.

Once you are confident in using the Processing Development Environment, we'll try and run some code someone has placed on the web and utilise one of their libraries.

For this we're going to download City University's giCenter geoMap library and examples.

Go to the geoMap homepage and download the latest release as a zip file. You'll notice that it says you should be able to use the library manager in Processing 2 to install it, but unfortunately the University routes all its internet traffic through a proxy and the library manager doesn't seem to work with proxies. No problem, installing it old-skool is good experience for loading in other libraries.

Unzip the file somewhere you can get at it, and the look at the initial directories. You'll see there are four: data (which contains some shapefiles); reference (which contains the library's javadocs); examples (which includes examples); and library (which contains a jar file). It is the latter you would add to your own project to gain access to the code that the giCentre have written to help do mapping. For now, let's open one of their maps...

Go into the examples directory and open the "Bad Teeth" example, by finding and clicking on the Bad_teeth.pde. If this doesn't open processing automatically, either associate the file type with it by right-clicking on it and choosing "Open with..." and finding Processing.exe wherever you've put it, or otherwise open processing and the opening the project file using the File menu. Don't run it yet.

We now need to add the library to the project. You can do this using the "Import Library..." option, or placing it within a "libraries" directory in your sketchbook. However, I've always found these a bit hit-and-miss. Your best bet is to use the Add File... option under the Sketch menu. Using the same method, add the data that the project will use: all the "world" shapefile components in the "Data" directory (shapefiles with attribute data are made up of three files: a geographical .shp file, a database .dbf file, and a .shx file linking the two). All the other files it needs are in the "data" subdirectory of the project and should be picked up. You should now be able to run the application (depending on which version of Processing you are running, you may find that it is unsure which version of the Table class you are trying to use, geomap's or Processing's. Alter each case it complains of to its full name of org.gicentre.geomap.Table and try again).

Once you know what the code does, look it over and see how simple the addition of a library makes this complex job. Have a look at the javadocs and try adapting the example code. Try, for example, adding the 'moving rectangle' code from the lecture notes and see if you can get it moving over the map (a good start towards a dynamic visualisation). You'll have to think through the looping of the current example (in several senses) and where to set the background to white.

When you're done with this, either have a play with the various elements of this project, or go back and try some of the other tutorials. Also, have a look at the excellent Processing Exhibition to see some of the things you can do with it. Also check out the other giCentre libraries.