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

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 !

Answers

  • jump_jump.csv

    file not found

  • edited January 2018

    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
    
  • edited January 2018

    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!

  • 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 !

  • edited January 2018 Answer ✓

    @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();
    }
    
  • edited January 2018

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

  • edited January 2018

    @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....

  • @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.

  • edited January 2018

    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.

Sign In or Register to comment.