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

Next

For my animations I use a language called Processing. As a tutorial I’m going to go through step by step on how to animate data from Dr. Keeling’s atmospheric carbon-dioxide concentration curve. If you want to play along please visit processing.org and follow the download instructions for your device.

I won’t go through the basics so for absolute beginner coders check out hello.processing.org.

There’s plenty of tutorials here processing.org/tutorials but I will assume you’ve at least gone through processing.org/tutorials/gettingstarted.

Create a new Processing sketch called Keeling .

Download weekly_in_situ_co2_mlo.csv from http://scrippsco2.ucsd.edu/data/atmospheric_co2/primary_mlo_co2_record

Copy the CSV file to the Keeling folder created when you made the above Processing sketch. You should have Keeling.pde and weekly_in_situ_co2_mlo.csv in the same folder. (I highly recommend making your file explorer display file suffixes).

So what is a CSV file? CSV simply stands for Comma Separated Values. It is a plain text file but you’ll probably notice that if you double-click it it opens in a spreadsheet application. Not particularly useful for this file as there is some informational text at the beginning of this file which contains commas confusing the spreadsheet application.

To properly view this file it needs to be opened in a text editor. On windows do not open in Notepad! It looks shit because Notepad is shit. I recommend Visual Studio Code which works on Windows, Mac and Linux (Yes, even on a Raspberry Pi!). Tip: when installing Visual Studio Code make sure you tick Add “Open with Code” action to the Windows Explorer file context menu. This means you can simply right click a file and select Open with Code. (Sorry, not sure what happens on a Mac but I’m sure it’s just as easy)

After the info text at line 45 we get the actual data:

1958-03-29, 316.19

1958-04-05, 317.31

1958-04-12, 317.69

1958-04-19, 317.58

1958-04-26, 316.48

1958-05-03, 316.95

Which shows the atmospheric concentration of CO2 in parts per million for most Saturdays since 1958. There are gaps in this data due to powercuts and hurricanes!

Now back to the Processing IDE (Integrated Development Environment: basically a fancy-pants way of saying “Editor”). You should now be presented with:

First we need some structure to our code so go ahead and copy and paste the following into the IDE.

void setup()

{ } void draw()

{ }

These are the skeletons of functions used by Processing to display animations. As its name suggests setup() is run once at the beginning of the animation while draw() is run once for every frame of the animation.

What the void ? This, bizarrely, is the return type of the function, as these functions don’t return anything then the return type is void . If they returned a number then they’d look like this:

int twoPlusTwo()

{

return 2 + 2;

}

Here int is the return type as twoPlusTwo() returns an integer.

We’re all ready to actually do something now…