Creating animations from tabulated string data

Hi guys

I’m very new to processing and am creating a data visualisation from some excel spreadsheet data. The data is made up of strings (not numbers) and is pasted below.

I need to know how to write a code that says:

If the word “red” appears in column A, draw a red ellipse for every word in the columns/rows that comes after it. And then I need a line of code that changes so that when the word “orange” appears in column A, it draws orange ellipses for every word that comes after that and so on (going through all the colours in column A).

So, I think this is an “IF” function that will help me do this?

I’m hoping to end up with a series of bubbles that come up from the bottom of the screen one colour at a time as it runs through and reads all the rows in the sheet.

Here is my data so far. Any help would be very much appreciated.

//movingellipse

color[] rainbow = {#169499,#BF0C2B, #F14C13, #FFD418, #03A63C, #04117B, #400A34, #02173E, #421F02, #0B080B, #F2055C, #D9D0B1, #F8A602, #F1F0F1};
color[] palette = rainbow
String[] palette = {"Aqua","Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Indigo", "Brown", "Black", "Pink", "Grey", "White"};

int y = 299;
  
void setup () {
  size(600, 300);
  background(#169499);
  smooth();
  colorCulture = new Table("colorCultures.tsv", "header");
  rowCount = colorCultures.getRowCount();
  println("rowCount = + rowCount);
}

void draw() {
    background(#169499);
    for (int row = 0; row < rowCount: row++) {
    //String Red = colorCultures.getString (row, 0);
    //stroke (#169499);
    //ellipse (100, y, 50, 50);
    //y = y - 1;
}

1 Like

You’re trying to do everything at once and it is going to be a mess. Break your problem down into steps and do things one step at a time. Start simple! As I see it, you would do well to write two simple sketches first…


Number One: Colorful circles. Just draw some colorful circles. How many to draw should be a variable. How do you know what color a circle will be? Are they going to appear all at once? No? Okay, so how often do they appear? Can we put text on a circle? Can we write a Circle object that represents a circle? The end goal here is to have a sketch that has a dynamic ArrayList of Circle objects, so that new Circles can be created by specifying a color and some text and maybe the time at which it should appear. You’ll also want to make them move so they should have a position, a means to move, and probably a draw function.


Number Two: Table Data. You almost have this one working already. You have code that loads your table and parses it row by row. But some logic is missing. The proper process your table-parsing needs to follow is:

// For each row in the table,
  // If this row starts with a color,
    // Remember that that color is the new color to use.
  // End of finding a new color to use.
  // Then look at the rest of the data in this row.
  // For each word in the rest of the row,
    // Simply print out that word and the current color we're using.
  // End of doing things for each word in a row.
// End of doing things for each row.

This sketch would take the table of data and spit out a long list of words matched with the color of the sections they are in.


Can you see where I am going with this? The circles in sketch number one need the word on the circle and the color of that circle. Sketch number two spits out a list of words and matching colors. If you put them together…!!!

1 Like

Thanks so much tfGuy44. I’ve taken your advice and created two separate sketches.

Sketch 1 = the bubbles (which are working! Yay!).

Sketch 2 - the table data (this is where I still need help).

I’ve been referring to this tutorial (https://www.youtube.com/watch?v=woaR-CJEwqc) and adjusting to try and fit my data.

I keep getting an error message saying "expecting EOF, found ‘for’ for line 26 of my code.

My data looks like this:

My code looks like this:

//spreadsheet

color[] palette = {#169499, #BF0C2B};

int x = 50;
int y = 50;
int w = 64;
int h = 64;

void setup(){
size(600, 400);
background(palette[0]);
smooth();
Table dataSet = loadTable ("dataSet.tsv", "header");
rowCount = dataSet.getRowCount(0);
println("rowCount = " + rowCount);
}

void draw(){
  background(palette[0]);
  smooth();
  fill(palette[1]);
  noStroke();
}

for (String row = 0; row < rowCount; row++);{
  String red = dataSet.getString (row, 0);
  String american = dataSet.getString (row, 1);
  ellipse (x, y, w, h);
}

noLoop();

}

Would love your assistance again! Thanks so much

Nicole

1 Like

After formatting your code, it looks like it wouldn’t run at all without serious errors. There is a for loop just hanging out after the end of draw…

Could you provide a running version of your code? If you haven’t already solved it, could you explain what step you are stuck on?