Plotting data on screen

This is part 4 of an N part series detailing how I make my animations.

Prev Next

Now that we have the data loaded into a string array we can start doing something with it.

Delete the println command from setup() and in the draw() function add println(frameCount); Running that should result in incrementing numbers whizzing by in the console. frameCount is a special variable created for us by Processing which starts at 1 and increments by 1 everytime draw() is executed.

Replace the contents of draw() with

int dataIndex = frameCount + 43;
String frameData = _data[dataIndex];
println(frameData);

You should now see all the data whizzing by in the console. Because frameCount starts at 1 and _data is zero based then adding 43 to frameCount starts at line 45 of the original file¹.

Now we want to be able to access the date and CO2 concentrations separately, to do that we use the split() function. The split function takes as parameters a string you wish to split and a character to split with. It returns an array of strings where each string was separated by the character.

So for example

String[] values = split("apples,oranges,pears", ',');

will result in values containing three strings: apples, oranges and pears. Notice that , is wrapped by ' and not ". This is because an individual character is a special data type itself and is denoted by single quotes².

Replace the println command with

String[] values = split(frameData, ',');
println(values[0]);
println(values[1]);

You can now see that the date is in values[0] and the CO2 concentration is in values[1].

We have finally got to accessing the individual values but unfortunately we can’t do much other than displaying the value. To be able to graph them we have to convert the string representation of the CO2 concentration into a number the computer can understand. As the concentration is not an integer but a real number we logically need to convert it into a float. Real numbers are technically known as “floating point numbers” as the decimal point can float around depending on the significant digits of the number.

So on the line after the split command add

float co2 = parseFloat(values[1]);

parseFloat() converts the string representation of the CO2 concentration to a floating point real number. This now means that we can plot some points! But first set the size of the animation by adding size(500,500); to the setup() function.

Add

ellipse(frameCount, co2, 1, 1);

The ellipse function takes four float values³ X, Y, Width, Height. The width and height are set to 1 pixel so we simply draw a dot. Having frameCount as X means that the dot is drawn one pixel further to the right for each frame and co2 is the value for Y.

Your code should look something like this

String[] _data;
void setup()
{
loadData();
size(500,500);
}
void draw()
{
int dataIndex = frameCount + 43;
String frameData = _data[dataIndex];
String[] values = split(frameData, ',');

float co2 = parseFloat(values[1]);

ellipse(frameCount, co2, 1, 1);
}
void loadData()
{
_data = loadStrings("weekly_in_situ_co2_mlo.csv");
}

Running that should produce this:

There are two major problems with this output (other than it being the most dull looking thing imaginable). See if you can figure them out before heading to the next post.


¹ You can see why even seasoned developers trip up! There are four hard problems in computing; naming things, cache invalidation and off-by-one errors.

² Can be confusing as you can also have strings with just an individual character. You can consider a String as an array of character data types, in fact in some languages (not Processing unfortunately) you can access a particular character in a string like so print("Hello"[1]); will print “e”.

³ Integer variables, such as frameCount are automatically converted to float variables by Processing.