How can I create a sequence of images from a table of data ?

bushy_top

Hello,

This is my very first sketch. I want to create a map using data. My data consists of x/y coordinates, and to each coordinate is associated a bubble. For now, I am able to load the data and to display it like a single image:

// The data from the Table object will fill the array of Bubble objects
Table table;
Bubble[] bubbles;

void setup() {
  size(1920, 1080);
  smooth(100);
  loadData();
}

void draw() {
  background(0);
  // Display all bubbles
  for (int i = 0; i<bubbles.length; i++) {
    bubbles[i].display();
  }
}

void loadData() {
  // "header" indicates the file has header row. The size of the array 
  // is then determined by the number of rows in the table. 
  table = loadTable("jump_jump.csv", "header");
  bubbles = new Bubble[table.getRowCount()];


  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);


    // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    // Make a Bubble object out of the data from each row.
    bubbles[i] = new Bubble(x, y, d);
  }
}



class Bubble {
  float x, y;
  float diameter;
  String name;

  boolean over = false;

  // Create the Bubble
  Bubble(float tempX, float tempY, float tempD) {
    x = tempX;
    y = tempY;
    diameter = tempD;

  }

  // Display the Bubble
  void display() {
    stroke(255);
    strokeWeight(3);
    fill(255);
    ellipse(x, y, diameter, diameter);
    }
  } 

But I'd like the bubbles to appear one after the other. I looked into the reference and found this scheme: goo.gl/8wfEak

PImage[] images = new PImage[20]; // Supposing we have 20 images
int counter; // Automatically initialized at 0
final int DISPLAY_TIME = 2000; // 2000 ms = 2 seconds
int lastTime; // When the current image was first displayed

void setup()
{
  size(500, 500);

  for (int i = 0; i < images.length; i++)
  {
    images[i] = loadImage("img" + nf(i+1, 2) + ".png"); // nf() allows to generate 01, 02, etc.
  }
  lastTime = millis();
}

void draw()
{
  background(255);
  fill(#005599);
  text(frameCount, 10, 20); // Shows the sketch isn't stopped between each image

  if (millis() - lastTime >= DISPLAY_TIME) // Time to display next image
  {
    // Increment counter, then compute its modulo, ie. reset it at zero when reaching images.length
    counter = ++counter % images.length;
    lastTime = millis();
  }
  image(images[counter], 50, 50);
}

Here is my attempt at mixing both codes:

Table table;
Bubble[] bubbles = new Bubble[200];
int counter; // Automatically initialized at 0
final int DISPLAY_TIME = 10000; // 10000 ms = 10 seconds
int lastTime; // When the current image was first displayed

void setup() {
  size(1920, 1080);
  loadData();
  // Display all bubbles
  for (int i = 0; i<bubbles.length; i++) {
    bubbles[i].display();
  }
  lastTime = millis();
}

void draw() {

{
  background(0);
  text(frameCount, 10, 20);
  if (millis() - lastTime >= DISPLAY_TIME) // Time to display next image
  {
    // Increment counter, then compute its modulo, ie. reset it at zero when reaching images.length
    counter = ++counter % bubbles.length;
    lastTime = millis();
  }
}
}
void loadData() {
  table = loadTable("jump_jump.csv", "header");
  bubbles = new Bubble[table.getRowCount()];

  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);

    // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    // Make a Bubble object out of the data from each row.
    bubbles[i] = new Bubble(x, y, d);
  }
}

class Bubble {
  float x, y;
  float diameter;
  String name;
  // Create the Bubble
  Bubble(float tempX, float tempY, float tempD) {
    x = tempX;
    y = tempY;
    diameter = tempD;
  }
  // Display the Bubble
  void display() {
    stroke(255);
    strokeWeight(3);
    fill(255);
    ellipse(x, y, diameter, diameter);
  }
}

I tried to replace Images by bubbles but I feel like I'm confusing classes and mixing steps. How should I do in order to make the bubbles appear one after the other ?

Thanks for reading !

koogs

jump_jump.csv

file not found

bushy_top

Sorry, how can I integrate the .csv file ?

edit here's a link to the dummy data I used: https://docs.google.com/spreadsheets/d/1jzsWFYN09FIN3xOjgX-BA3R1FOKI52LNDRsPgZa05xE/edit?usp=sharing

x,y,diameter
122,223,1.88
134,256,1.23
122,158,1.98
190,158,1.98
127,155,1.98
147,157,1.98
190,190,1.98
125,134,1.98
158,113,1.98
158,158,1.98

TfGuy44

You don't need to display any bubbles in setup().

You do need to display a Bubble in draw(). The question you need to ask is: Which Bubble should be displayed? (Hint: What is counter?)

EDIT: Wow guys. This is my 3000th comment on the version two forums. Shoutouts to all the regulars! Woo! Let's go for 4000!

bushy_top

Hello,

I tried to make my code more simple. I now can display a single bubble, wich is progress, but I still can't figure out how to have them appear one after the other

// The data from the Table object will fill the array of Bubble objects
Table table;
Bubble[] bubbles = new Bubble[10000];
int counter; // Automatically initialized at 0
final int DISPLAY_TIME = 200; // 5000 ms = 5 seconds
int lastTime; // When the current image was first displayed

void setup() {
  size(1920, 1080);
  //noLoop();
  loadData();
  //lastTime = millis();
}

void draw() {
  background(0);
  // Display all bubbles


  for (int i =1; i<bubbles.length; i++) {
    bubbles[1].display();
  }
}



// if (millis() - lastTime >= DISPLAY_TIME); // Time to display next image




void loadData() {
  table = loadTable("data_good_good.csv", "header");
  bubbles = new Bubble[table.getRowCount()];

  for (int i = 0; i<table.getRowCount(); i++) {
    // Iterate over all the rows in a table.
    TableRow row = table.getRow(i);

    // Access the fields via their column name (or index).
    float x = row.getFloat("x");
    float y = row.getFloat("y");
    float d = row.getFloat("diameter");
    // Make a Bubble object out of the data from each row.
    counter = ++counter % bubbles.length;
    bubbles[i] = new Bubble(x, y, d);
    //lastTime = millis();
  }
}
class Bubble {
  float x, y;
  float diameter;
  String name;
  // Create the Bubble
  Bubble(float tempX, float tempY, float tempD) {
    x = tempX;
    y = tempY;
    diameter = tempD;
  }
  // Display the Bubble
  void display() {
    fill(255);
    tint(110, 117);
    ellipse(x, y, diameter, diameter);
  }
}

Thanks in advance for any help !

jeremydouglass

@TfGuy44 -- put up big numbers <:-P

@bushy_top --

This says "show them all"

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

It sounds like sometimes you want to draw the total bubbles list, and sometimes you want fewer bubbles. How would the code know which to do?

For example, you could start a counter variable at 1, and only draw 1 bubble. Then every x frames you could increase your counter by 1 to make a new bubble appear... 2... 3... 4... so long as doesn't get larger than bubbles.length!

if(timecondition && counter<bubbles.length){
  counter++;
}
for (int i=0; i<counter; i++) {
  bubbles[i].display();
}

koogs

That actually says 'show the second one lots of times'...

jeremydouglass

@koogs -- thanks - edited [1] --> [i]

Also, @bushy_top, FYI I copy-pasted that [1] from your line 21 without noticing it - it doesn't work there either. That's what I get for responding on mobile without testing the code first....

bushy_top

@jeremydouglass It worked ! Thanks a lot ! I still haven't exactly understood what timecondition stands for, so, until I figured it out, I replaced it by if(counter<bubbles.length) which works just fine.

jeremydouglass

An example of a time condition would be (frameCount%60==0). That will be True only at certain times: at 0, 60, 120, 180 etc frames.

So if your frameRate is 60, now your code adds a new bubble once per second.