Your Random Numbers – Getting Started with Processing and Data Visualization

Over the last year or so, I’ve spent almost as much time thinking about how to teach data visualization as I’ve spent working with data. I’ve been a teacher for 10 years – for better or for worse this means that as I learn new techniques and concepts, I’m usually thinking about pedagogy at the same time. Lately, I’ve also become convinced that this massive ‘open data’ movement that we are currently in the midst of is sorely lacking in educational components. The amount of available data, I think, is quickly outpacing our ability to use it in useful and novel ways. How can basic data visualization techniques be taught in an easy, engaging manner?

This post, then, is a first sketch of what a lesson plan for teaching Processing and data visualization might look like. I’m going to start from scratch, work through some examples, and (hopefully) make some interesting stuff. One of the nice things, I think, about this process, is that we’re going to start with fresh, new data – I’m not sure what kind of things we’re going to find once we start to get our hands dirty. This is what is really exciting about data visualization; the chance to find answers to your own, possibly novel questions.

Let’s Start With the Data

We’re not going to work with an old, dusty data set here. Nor are we going to attempt to bash our heads against an unnecessarily complex pile of numbers. Instead, we’re going to start with a data set that I made up – with the help of a couple of hundred of my Twitter followers. Yesterday morning, I posted this request:

Even on a Saturday, a lot of helpful folks pitched in, and I ended up with about 225 numbers. And so, we have the easiest possible dataset to work with – a single list of whole numbers. I’m hoping that, as well as being simple, this dataset will turn out to be quite interesting – maybe telling us something about how the human brain thinks about numbers.

I wrote a quick Processing sketch to scrape out the numbers from the post, and then to put them into a Google Spreadsheet. You can see the whole dataset here: http://spreadsheets.google.com/pub?key=t6mq_WLV5c5uj6mUNSryBIA&output=html

I chose to start from a Google Spreadsheet in this tutorial, because I wanted people to be able to generate their own datasets to work with. Teachers – you can set up a spreadsheet of your own, and get your students to collect numbers by any means you’d like. The ‘User’ and ‘Tweet’ columns are not necessary; you just need to have a column called ‘Number’.

It’s about time to get down to some coding. The only tricky part in this whole process will be connecting to the Google Spreadsheet. Rather than bog down the tutorial with a lot of confusing semi-advanced code, I’ll let you download this sample sketch which has the Google Spreadsheet machinery in place.

Got it? Great. Open that sketch in Processing, and let’s get started. Just to make sure we’re all in the same place, you should see a screen that looks like this:

At the top of the sketch, you’ll see three String values that you can change. You’ll definitely have to enter your own Google username and password. If you have your own spreadsheet of number data, you can enter in the key for your spreadsheet as well. You can find the key right in the URL of any spreadsheet.

The first thing we’ll do is change the size of our sketch to give us some room to move, set the background color, and turn on smoothing to make things pretty. We do all of this in the setup enclosure:

void setup() {
  //This code happens once, right when our sketch is launched
 size(800,800);
 background(0);
 smooth();
};

Now we need to get our data from the spreadsheet. One of the advantages of accessing the data from a shared remote file is that the remote data can change and we don’t have to worry about replacing files or changing our code.

We’re going to ask for a list of the ‘random’ numbers that are stored in the spreadsheet. The most easy way to store lists of things in Processing is in an Array. In this case, we’re looking for an array of whole numbers – integers. I’ve written a function that gets an integer array from Google – you can take a look at the code on the ‘GoogleCode’ tab if you’d like to see how that is done. What we need to know here is that this function – called getNumbers – will return, or send us back, a list of whole numbers. Let’s ask for that list:

void setup() {
  //This code happens once, right when our sketch is launched
 size(800,800);
 background(0);
 smooth();

 //Ask for the list of numbers
 int[] numbers = getNumbers();
};

OK.

World’s easiest data visualization!

 fill(255,40);
 noStroke();
 for (int i = 0; i < numbers.length; i++) {
   ellipse(numbers[i] * 8, width/2, 8,8);
 };

What this does is to draw a row of dots across the screen, one for each number that occurs in our Google list. The dots are drawn with a low alpha (40/255 or about 16%), so when numbers are picked more than once, they get brighter. The result is a strip of dots across the screen that looks like this:

Right away, we can see a couple of things about the distribution of our ‘random’ numbers. First, there are two or three very bright spots where numbers get picked several times. Also, there are some pretty evident gaps (one right in the middle) where certain numbers don’t get picked at all.

This could be normal though, right? To see if this distribution is typical, let’s draw a line of ‘real’ random numbers below our line, and see if we can notice a difference:

fill(255,40);
 noStroke();
 //Our line of Google numbers
 for (int i = 0; i < numbers.length; i++) {
   ellipse(numbers[i] * 8, height/2, 8,8);
 };
 //A line of random numbers
 for (int i = 0; i < numbers.length; i++) {
   ellipse(ceil(random(0,99)) * 8, height/2 + 20, 8,8);
 };

Now we see the two compared:

The bottom, random line doesn’t seem to have as many bright spots or as evident of gaps as our human-picked line. Still, the difference isn’t that evident. Can you tell right away which line is our line from the group below?

OK. I’ll admit it – I was hoping that the human-picked number set would be more obviously divergent from the sets of numbers that were generated by a computer. It’s possible that humans are better at picking random numbers than I had thought. Or, our sample set is too small to see any kind of real difference. It’s also possible that this quick visualization method isn’t doing the trick. Let’s stay on the track of number distribution for a few minutes and see if we can find out any more.

Our system of dots was easy, and readable, but not very useful for empirical comparisons. For the next step, let’s stick with the classics and

Build a bar graph.

Right now, we have a list of numbers. Ours range from 1-99, but let’s imagine for a second that we had a set of numbers that ranged from 0-10:

[5,8,5,2,4,1,6,3,9,0,1,3,5,7]

What we need to build a bar graph for these numbers is a list of counts – how many times each number occurs:

[1,2,1,2,1,3,1,1,1,1]

We can look at this list above, and see that there were two 1s, and three 5s.

Let’s do the same thing with our big list of numbers – we’re going to generate a list 99 numbers long that holds the counts for each of the possible numbers in our set. But, we’re going to be a bit smarter about it this time around and package our code into a function – so that we can use it again and again without having to re-write it. In this case the function will (eventually) draw a bar graph – so we’ll call it (cleverly) barGraph:

void barGraph( int[] nums ) {
  //Make a list of number counts
 int[] counts = new int[100];
 //Fill it with zeros
 for (int i = 1; i < 100; i++) {
   counts[i] = 0;
 };
 //Tally the counts
 for (int i = 0; i < nums.length; i++) {
   counts[nums[i]] ++;
 };
};

This function constructs an array of counts from whatever list of numbers we pass into it (that list is a list of integers, and we refer to it within the function as ‘nums’, a name which I made up). Now, let’s add the code to draw the graph (I’ve added another parameter to go along with the numbers – the y position of the graph):


void barGraph(int[] nums, float y) {
  //Make a list of number counts
 int[] counts = new int[100];
 //Fill it with zeros
 for (int i = 1; i < 100; i++) {
   counts[i] = 0;
 };
 //Tally the counts
 for (int i = 0; i < nums.length; i++) {
   counts[nums[i]] ++;
 };

 //Draw the bar graph
 for (int i = 0; i < counts.length; i++) {
   rect(i * 8, y, 8, -counts[i] * 10);
 };
};

We’ve added a function – a set of instructions – to our file, which we can use to draw a bar graph from a set of numbers. To actually draw the graph, we need to call the function, which we can do in the setup enclosure. Here’s the code, all together:


/*

 #myrandomnumber Tutorial
 blprnt@blprnt.com
 April, 2010

 */

//This is the Google spreadsheet manager and the id of the spreadsheet that we want to populate, along with our Google username & password
SimpleSpreadsheetManager sm;
String sUrl = "t6mq_WLV5c5uj6mUNSryBIA";
String googleUser = "YOUR USERNAME";
String googlePass = "YOUR PASSWORD";

void setup() {
  //This code happens once, right when our sketch is launched
 size(800,800);
 background(0);
 smooth();

 //Ask for the list of numbers
 int[] numbers = getNumbers();
 //Draw the graph
 barGraph(numbers, 400);
};

void barGraph(int[] nums, float y) {
  //Make a list of number counts
 int[] counts = new int[100];
 //Fill it with zeros
 for (int i = 1; i < 100; i++) {
   counts[i] = 0;
 };
 //Tally the counts
 for (int i = 0; i < nums.length; i++) {
   counts[nums[i]] ++;
 };

 //Draw the bar graph
 for (int i = 0; i < counts.length; i++) {
   rect(i * 8, y, 8, -counts[i] * 10);
 };
};

void draw() {
  //This code happens once every frame.
};

If you run your code, you should get a nice minimal bar graph which looks like this:

We can help distinguish the very high values (and the very low ones) by adding some color to the graph. In Processing’s standard RGB color mode, we can change one of our color channels (in this case, green) with our count values to give the bars some differentiation:


 //Draw the bar graph
 for (int i = 0; i < counts.length; i++) {
   fill(255, counts[i] * 30, 0);
   rect(i * 8, y, 8, -counts[i] * 10);
 };

Which gives us this:

Or, we could switch to Hue/Saturation/Brightness mode, and use our count values to cycle through the available hues:

//Draw the bar graph
 for (int i = 0; i < counts.length; i++) {
   colorMode(HSB);
   fill(counts[i] * 30, 255, 255);
   rect(i * 8, y, 8, -counts[i] * 10);
 };

Which gives us this graph:

Now would be a good time to do some comparisons to a real random sample again, to see if the new coloring makes a difference. Because we defined our bar graph instructions as a function, we can do this fairly easily (I built in an easy function to generate a random list of integers called getRandomNumbers – you can see the code on the ‘GoogleCode’ tab):

void setup() {
  //This code happens once, right when our sketch is launched
 size(800,800);
 background(0);
 smooth();

 //Ask for the list of numbers
 int[] numbers = getNumbers();
 //Draw the graph
 barGraph(numbers, 100);

 for (int i = 1; i < 7; i++) {
 int[] randoms = getRandomNumbers(225);
 barGraph(randoms, 100 + (i * 130));
 };
};

I know, I know. Bar graphs. Yay. Looking at the graphic above, though, we can see more clearly that our humanoid number set is unlike the machine-generated sets. However, I actually think that the color is more valuable than the dimensions of the bars. Since we’re dealing with 99 numbers, maybe we can display these colours in a grid and see if any patterns emerge? A really important thing to be able to do with data visualization is to

Look at datasets from multiple angles.

Let’s see if the grid gets us anywhere. Luckily, a function to make a grid is pretty much the same as the one to make a graph (I’m adding two more parameters – an x position for the grid, and a size for the individual blocks):

void colorGrid(int[] nums, float x, float y, float s) {
 //Make a list of number counts
 int[] counts = new int[100];
 //Fill it with zeros
 for (int i = 0; i < 100; i++) {
   counts[i] = 0;
 };
 //Tally the counts
 for (int i = 0; i < nums.length; i++) {
   counts[nums[i]] ++;
 };

//Move the drawing coordinates to the x,y position specified in the parameters
 pushMatrix();
 translate(x,y);
 //Draw the grid
 for (int i = 0; i < counts.length; i++) {
   colorMode(HSB);
   fill(counts[i] * 30, 255, 255, counts[i] * 30);
   rect((i % 10) * s, floor(i/10) * s, s, s);

 };
 popMatrix();
};

We can now do this to draw a nice big grid:

 //Ask for the list of numbers
 int[] numbers = getNumbers();
 //Draw the graph
 colorGrid(numbers, 50, 50, 70);

I can see some definite patterns in this grid – so let’s bring the actual numbers back into play so that we can talk about what seems to be going on. Here’s the full code, one last time:


/*

 #myrandomnumber Tutorial
 blprnt@blprnt.com
 April, 2010

 */

//This is the Google spreadsheet manager and the id of the spreadsheet that we want to populate, along with our Google username & password
SimpleSpreadsheetManager sm;
String sUrl = "t6mq_WLV5c5uj6mUNSryBIA";
String googleUser = "YOUR USERNAME";
String googlePass = "YOUR PASSWORD";

//This is the font object
PFont label;

void setup() {
  //This code happens once, right when our sketch is launched
 size(800,800);
 background(0);
 smooth();

 //Create the font object to make text with
 label = createFont("Helvetica", 24);

 //Ask for the list of numbers
 int[] numbers = getNumbers();
 //Draw the graph
 colorGrid(numbers, 50, 50, 70);
};

void barGraph(int[] nums, float y) {
  //Make a list of number counts
 int[] counts = new int[100];
 //Fill it with zeros
 for (int i = 1; i < 100; i++) {
   counts[i] = 0;
 };
 //Tally the counts
 for (int i = 0; i < nums.length; i++) {
   counts[nums[i]] ++;
 };

 //Draw the bar graph
 for (int i = 0; i < counts.length; i++) {
   colorMode(HSB);
   fill(counts[i] * 30, 255, 255);
   rect(i * 8, y, 8, -counts[i] * 10);
 };
};

void colorGrid(int[] nums, float x, float y, float s) {
 //Make a list of number counts
 int[] counts = new int[100];
 //Fill it with zeros
 for (int i = 0; i < 100; i++) {
   counts[i] = 0;
 };
 //Tally the counts
 for (int i = 0; i < nums.length; i++) {
   counts[nums[i]] ++;
 };

 pushMatrix();
 translate(x,y);
 //Draw the grid
 for (int i = 0; i < counts.length; i++) {
   colorMode(HSB);
   fill(counts[i] * 30, 255, 255, counts[i] * 30);
   textAlign(CENTER);
   textFont(label);
   textSize(s/2);
   text(i, (i % 10) * s, floor(i/10) * s);
 };
 popMatrix();
};

void draw() {
  //This code happens once every frame.

};

And, our nice looking number grid:

BINGO!

No, really. If this was a bingo card, and I was a 70-year old, I’d be rich. Look at that nice line going down the X7 column – 17, 27, 37, 47, 57, 67, 77, 87, and 97 are all appearing with good frequency. If we rule out the Douglas Adams effect on 42, it is likely that most of the top 10 most-frequently occurring numbers would have a 7 on the end. Do numbers ending with 7s ‘feel’ more random to us? Or is there something about the number 7 that we just plain like?

Contrasting to that, if I had played the x0 row, I’d be out of luck. It seems that numbers ending with a zero don’t feel very random to us at all. This could also explain the black hole around the number 50 – which, in a range from 0-100, appears to be the ‘least random’ of all.

Well, there we have it. A start-to finish example of how we can use Processing to visualize simple data, with a goal to expose underlying patterns and anomalies. The techniques that we used in this project were fairly simple – but they are useful tools that can be used in a huge variety of data situations (I use them myself, all the time).

Hopefully this tutorial is (was?) useful for some of you. And, if there are any teachers out there who would like to try this out with their classrooms, I’d love to hear how it goes.

86 thoughts on “Your Random Numbers – Getting Started with Processing and Data Visualization”

  1. thanks for this,
    i'm trying to create the getRandomNumbers function.
    theres a link missing to the google code archive, mine's broken

    int[] getRandomNumbers(int sizeOFme){
    int[] rndArry=new int [sizeOFme];
    for(int i=0;i<sizeOFme;i++){
    rndArry[i]=ceil(random(0,99));
    }
    return rndArry;
    }

    when i call this using
    int[] randoms = getRandomNumbers();
    i get "The function getRandomNumbers() does not exist."

    1. Hi,

      Here is the original getRandomNumbers function (you can see this in the .ZIP file linked at the beginning of the post:

      //Function to generate a random list of integers
      int[] getRandomNumbers(int c) {

      int[] returnArray = new int;
      for (int i = 0; i < c; i++) {
      returnArray[i] = ceil(random(0,99));
      };
      return(returnArray);
      };

  2. It looks like all the tweet data was derived from people who tweeted the hash tag after the number. I was unconventional and posted hash tag before the number and didn't make it into the dataset.
    Regardless, the result of this experiment is really cool. If you never want someone to pick your random number, pick a 0!

  3. You can get to a lot of this in Aqumin's AlphaVision as well! http://www.aqumin.com

    I created an excel file with the data and created a key column of Number+ID and did a few calculations to count the numbers, deciles, and second digit occurrence. Then I imported the number into AV and grouped by the second digit count, ordered the groups, changed Height to the actual number, color to the Decile count and sort to the number count. This popped out:
    http://twitpic.com/1fbslh

    What is also interesting are the unpopular numbers:
    http://twitpic.com/1fbsx4 Looks like the 0s are really unpopular.

    Finally I resorted by the decile and we can see that people really like low numbers:
    http://twitpic.com/1fbt8f

    1. Awesome – thanks, @afat.

      Obviously there are a lot of directions to go to take this analysis further; I wanted to end the tutorial where it ends in order not to make it too long. I may do a follow up if I can find the time.

    1. Chris –

      Yes, Benford's law is a useful tool. I didn't want to get too complicated in this tutorial, but it probably would have been a cool thing to mention. Next time!

  4. Putting aside 42, the next two popular numbers were 17 and 37, both easy-to-remember primes. A lot of the numbers ending in 3 are also prime. Considering the people most likely to respond to your tweet were geeks, they might be biased toward primes. Or, primes naturally seem more 'random'.

    1. Jared – I thought the same thing when I saw the popular numbers. It's interesting to think that our brains might recognize primes as being 'more random' because our brain can't divide them. Would be interesting to ask people to pick a random number in a high range (say between 13,000 and 14,000) and see if primes show up.

  5. Thank you very much for this very good introduction!
    I actually am a teacher, and will definitly plan sessions with your tutorial after having looked into it myself! I was craving to exeriment with data visualization and you give me a perfect lift to the first step of the ladder that up to now kind of scared me enough to postpone the first try, have no excuse now :-)! THANK YOU!

  6. VVery good tut… especially "Look at datasets from multiple angles." Thank you.

    Question: the void barGraph() method seems to have no function/bearing on the results of MyRandomNumbersFinished.pde. Why is it in there? What am I missing?

  7. Great article – thanks

    Thank you in particular for demonstrating your method for counting – that has REALLY helped me

  8. I must be missing something. Trying to run this produces an error that the package "com.google" does not exist. Where are the libraries supposed to live?

      1. Got it! For some reason winzip was destroying that folder structure when I unzipped this manually… Thanks for the walkthrough!

    1. Might not apply to Mal but for those using Processing 0195, remove the import statements for the google stuff. Check Issue 568 on the Processing Google Code site

      1. Hi. I HOPE you can help me with this. I am getting error "IndexoutOfbounds: Index :0 Size :0" runtime error. Please tell me what you do?

  9. I don't have a google account. If I want to copy the dataset provided in the example and put it on disk (for example, by importing the google dataset into Excel then saving it), to be able to use it would I save the result to a file "data.xls" in a sketch subfolder titled "data", or is some other method necessary.

    1. Hi,

      A big point of this tutorial was to connect to the Google spreadsheet. If you wanted to get it in another way, you'd need to do some parsing.

      To make your life easier, just paste this into your sketch:

      int[] numbers=19,69,43,15,23,89,19,54,69,4,13,37,66,8,78,67,32,76,13,87,42,23,32,88,21,4,2,61,99,43,59,13,42,18,60,19,81,17,36,94,42,67,18,42,9,4,72,43,64,97,32,7,14,78,21,19,72,69,2,16,87,67,42,55,7,26,81,19,88,67,78,26,33,12,39,88,72,83,37,28,81,57,77,77,23,6,37,57,67,42,40,57,17,95,28,96,73,67,52,20,99,71,37,42,17,39,47,17,1,37,15,25,97,37,17,69,39,64,47,79,33,5,37,93,14,97,66,77,36,27,64,12,25,84,83,29,52,25,43,23,98,79,6,3,42,72,17,47,2,1,77,69,57,86,69,74,97,35,25,21,61,57,93,17,45,35,12,26,60,75,11,8,1,41,12,53,77,42,66,55,47,46,55,26,27,6,52,72,27,15,1,84,81,56,74,33,77,4,7,66,24,93,55,64,97,66,74,64,73,17,17,23,97,73,37,72,41,76,6,87,66,54,77,65,83

  10. What a great approach to teaching! Thanks for doing it.

    I think the code just before your first visualization contains an extra right curly and semicolon in line 9 (sequence shown below) which produces an error for me. Deleting that right curly and semicolon cures the error

    7 //Ask for the list of numbers
    8 int[] numbers = getNumbers();
    9};

  11. Thanks for the tutorial which i have passed on to a bunch of digital media students here in Newcastle-upon-Tyne, UK. I was involved in a project in Media-lab Prado in Madrid visualising patterns in apparently random number sets. If you are interested in this, google Benford's law. It states basically that in large sets of numbers you get a disproportionate quantity of numbers starting with figure 1 (about 30%) and then fewer and fewer as you approach 9. weird huh? you can use it in court in some countries to prove stats have been falsified.
    anyway cheers again for this helpful and informative post.

  12. I will definitely be using this in my programming-teaching escapades.
    It's a really nice intro that actually does something!
    And it's in processing. which just makes it awesome :)

  13. Hey Jer. Your tutorial here inspired me to check out a new "perspective," as you emphasize. I considered the bar graphs with the color gradients, and sort the bars by their height. The seeming difference between the human- and machine-generated data appears a bit clearer.

    I have an example of what I'm talking about posted on my blog…http://www.CalculatingWords.blogspot.com

    Thank you for this. I've been wanting to get my hands on Processing since I learned of it's existance. Thank you.

    1. i too experienced this error message at first. the solution is to log in to a google account with user name and pass word, and everything works fine.

  14. Hi Jer, saw your talk at Mediamatic last week and just checking out your website. Cool stuff!
    I'm trying to run the script but I get the error The public type MG8R7Y must be defined in its own file. Processing then jumps to the top of the GoogleCode tab. Nothing runs.

    Hope you know what this means? TIA for your help, danielle.

    1. Hi Danielle,

      Sounds like a problem with an unmatched quotation mark to me…

      If you can't get it to work, send me your sketch and I'll have a quick look.

      Cheers,

      -Jer

  15. Thanks for putting together a great tutorial. Processing is a great entry into both data visualization and creative coding.

  16. Hi, thanks for the great example. but I have some errors. I used the same dataset as in the example. I changed user name and password to mine, and I got this error shown in the output as in the bottom:

    Do I have to copy the .jar files under some folder of Processing? Or is there anything that I have to do beforehand to follow the codes here?
    I'll appreciate your answer.

    =============
    asking Google for numbers…
    ERROR IN AUTHENTICATION
    ERROR RETRIEVING WORKSHEET FEED
    processing.app.debug.RunnerException: IndexOutOfBoundsException: Index: 0, Size: 0
    at processing.app.Sketch.placeException(Sketch.java:1543)
    at processing.app.debug.Runner.findException(Runner.java:582)
    at processing.app.debug.Runner.reportException(Runner.java:558)
    at processing.app.debug.Runner.exception(Runner.java:498)
    at processing.app.debug.EventThread.exceptionEvent(EventThread.java:367)
    at processing.app.debug.EventThread.handleEvent(EventThread.java:255)
    at processing.app.debug.EventThread.run(EventThread.java:89)
    Exception in thread "Animation Thread" java.lang.IndexOutOfBoundsException: Index: 0, Size: 0
    at java.util.LinkedList.entry(LinkedList.java:365)
    at java.util.LinkedList.get(LinkedList.java:315)
    at MyRandomNumbers$SimpleSpreadsheetManager.fetchSheetByKey(MyRandomNumbers.java:238)
    at MyRandomNumbers.getNumbers(MyRandomNumbers.java:117)
    at MyRandomNumbers.setup(MyRandomNumbers.java:94)
    at processing.core.PApplet.handleDraw(Unknown Source)
    at processing.core.PApplet.run(Unknown Source)
    at java.lang.Thread.run(Thread.java:619)

  17. erm, I just can't get my head around the code where we build the bar graph and generate a list of counts for our numbers. So, we create an array of 100 integers called 'counts':

    int[] counts = new int[100];

    Put a value of zero for each item in the array so we can increment up from 0:

    for(int i = 1; i<100; i++){
    counts[i] = 0;
    }

    and tally the counts – the part I really really don't get:

    for(int i=0; i < nums.length; i++){
    counts[nums[i]] ++;
    };

    Could somebody give us a hand and just re-explain. Sorry, n00b question I know, but I just don't get how the counting is working.

    thanks

    Bzz

    1. I didn't get it at first either. I hope I don't confuse you more.

      nums is the array of data passed into the function. In this case there are 225 numbers in the array. If you look at the spreadsheet, it looks like [19, 69, 43, 15, ..., 83]. Therefore, nums[0] = 19, nums[1] = 69, nums[2] = 43, … nums[224] = 83.

      counts is a 100 number array. The index will correspond to the numbers in the dataset: 0-99.

      The for loop will populate the counts array with the number of occurrences of each number in the nums dataset.

      i=0: nums[0] = 19; therefore counts[nums[0]] = counts[19]
      i=1: nums[1] = 69; therefore counts[nums[1]] = counts[69]
      i=2: nums[2] = 43; therefore counts[nums[2]] = counts[43]

      i=224: nums[224] = 83; therefore counts[nums[224]] = counts[83]

      Each time counts[nums[i]] gets run, it will increment itself by 1. (N.B. x++ is equivilent to x = x + 1.)

      After the loop, the value in counts[0] will be the number of 0s in the dataset. The value in counts[1] will be the number of 1s in the dataset.

      i=0: counts[nums[0]] = counts[19] = 5 number 19s in the dataset
      i=1: counts[nums[1]] = counts[69] = 6 number 69s in the dataset
      i=2: counts[nums[2]] = counts[43] = 4 number 43s in the dataset

      i=224: counts[nums[224]] = counts[83] = 3 number 83s in the dataset

      Rick

  18. Inspired by the number grid, I went off and made a random number mapping tool. Not to explore the notion that random numbers aren't actually random, but just to see what could happen.

    So I made an array of point locations, then used a single random variable, generated 1000 times to draw lines to each point, specified by the random locations.

    I think the result is quite pleasing. Thank you for the inspiration.
    http://blog.catfoodcamp.com.au/admin/dear-process

  19. getting error for RETRIEVING WORKSHEET FEED when entering my own g.spredsheet key. I've tried using a private s/sht and then a publishes/public one to no avail. I've read through some of the Google Spreadsheet API info also not finding a solution. sorry for the newbie question, but love this idea and very much want you be able to access live data in g.spreadsheets for further projects.

  20. Hey there and thanks for writing this up. I've been using Processing for a while but not for data – which is of interest to me now. I'm having trouble with the first example though. I'm either getting the "unexpected token: void" error at the "void setup()" or an "IndexOutOfBoundsException" at the WorksheetEntry line. Where does the fill, noStroke, and for loop go? That might be what's tripping me up.

    Tks,
    Jeff

  21. Really excited about this, but having trouble connecting to the Google spreadsheet. Can anyone help?

    The problem seems to be in the SimpleSpreadsheetManager file, line 30, SpreadsheetEntry.class has an invalid format (bad string annotation constant).

    /var/folders/2o/2oKMiv5eGve5eGN7Ee9BT++++TI/-Tmp-/build6733414395257540200.tmp/Temporary_168_2206.java:248:7:248:15: Semantic Error: Type "ListEntry" was not found.

    thanks in advance for any help,
    Carissa

  22. Very cool, thanks!

    What I learned from typing in this tutorial is that Processing has inexcusably lame error reporting for syntax errors. I left out a comma between arguments in a function call somewhere in the guts of ColorGrid. Processing flagged this as "unexpected token: void" and highlighted the function definition line of an entirely different function!

    This is really unfortunate for a language aimed at beginners and non-programmers.

    1. Paul,

      That issue is being addressed. It a new problem that has arisen since the migration to Java 5. I suspect it will be fixed very quickly.

      In the meantime, if you omit the 'public' modifier in front of class declarations, it should find your errors correctly.

  23. wow, excellent idea!

    but, I wonder how did you populate your spreadsheet? did you do it manually? or is there any script that can automatically populate your spreadsheet from twitter feeds?

    1. My way of doing this, I create a script in Processing which imports the rss feed from the twitter target, then take the node I want and clean that node off.

  24. I, too, get an "IndexOutofBoundsException" error at 'Worksheet Entry' line when running the sketch MyRandomNumbersFinished.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>