how to load .csv file and draw 2d shapes in processing

Mike L

I want to use loadStrings to load data into a csv file , then draw the corresponding 2D shape. Group 1 is ellipse,group 2 is triangle, group 3 is rect, group 4 is parallelogram, and group 0 is other rect. However, my code cannot display the corresponding shape.They don’t displaye any shapes, and there are no errors in my code. One more question, is there any way to display their names under each corresponding graph?

Table table;

void setup(){
  size(1000,1000);
}

void draw(){

  table = loadTable("text.csv", "header");
  for (TableRow row : table.rows()) {
    int x = row.getInt("X");
    int y = row.getInt("Y");
    int group = row.getInt("Group");
    String name= row.getString("Name");
   

  fill(#000000); 
    if("1".equals(group)){
      ellipse(x,y,80,80);
    } else if ("2".equals(group)){
      triangle(x,y,x+20,y-20,x+20,y);
    } else if ("3".equals(group)){
      rect(x,y,50,50);
    }  else if ("4".equals(group)){
      quad(x, y ,x+100, y, x+150, y+95, x+40, y+95);
    } else if ("0".equals(group)){
      rect(x,y,50,60);
    }
  }
}

this is csv file called "text.csv" and the contents are:

Name,X,Y,Group
Victor Anderson,627,705,2
Jack Scott,808,643,3
Sean Robinson,624,627,4
William Rodriguez,423,396,1
Aaron Kelly,775,181,0
George Profenza

You're so close!

Group is an int (int group = row.getInt("Group");), not a String, hence the conditions will look like:

 if(group == 1){
      ellipse(x,y,80,80);
    ...

in context:

Table table;

void setup() {
  size(1000, 1000);
}

void draw() {

  table = loadTable("text.csv", "header");
  for (TableRow row : table.rows()) {
    int x = row.getInt("X");
    int y = row.getInt("Y");
    int group = row.getInt("Group");
    String name= row.getString("Name");


    fill(#000000); 
    if (group == 1) {
      ellipse(x, y, 80, 80);
    } else if (group == 2) {
      triangle(x, y, x+20, y-20, x+20, y);
    } else if (group == 3) {
      rect(x, y, 50, 50);
    } else if (group == 4) {
      quad(x, y, x+100, y, x+150, y+95, x+40, y+95);
    } else if (group == 0) {
      rect(x, y, 50, 60);
    }
  }
}

There are a few things you could improve:

  1. format the code: it will make easier to read. It's a good habit to pickup early: as the code you'll write will get longer and longer, keeping it organised will make it much easier to read. The more complex the programs get the more time you'll spend reading/debugging code as opposed to typing instructions.
  2. load the data only once in setup(). There is no need to reload the same data multiple times per second in draw(). (Optionally clear the background if you need draw(), however in this current example everything can work in setup)
  3. Optionally, instead of if/else you could use switch, perhaps in tandem with constants for the shapes. Even though it may look like more code (than simply using the integer values), it's much easer to read (you don't need to think which number is which) and easier to update.

Here's an example using the above notes:

Table table;

final int SHAPE_OTHER_RECT    = 0;
final int SHAPE_ELLIPSE       = 1;
final int SHAPE_TRIANGLE      = 2;
final int SHAPE_RECT          = 3;
final int SHAPE_PARALLELOGRAM = 4;

void setup() {
  size(1000, 1000);
  // load the table once
  table = loadTable("text.csv", "header");
  // reset background to white
  background(255);
  
  for (TableRow row : table.rows()) {
    int x = row.getInt("X");
    int y = row.getInt("Y");
    int group = row.getInt("Group");
    String name= row.getString("Name");


    fill(#000000); 
    
    switch(group){
      case(SHAPE_OTHER_RECT):
        rect(x, y, 50, 60);
        break;
      case(SHAPE_ELLIPSE):
        ellipse(x, y, 80, 80);
        break;
      case(SHAPE_TRIANGLE):
        triangle(x, y, x+20, y-20, x+20, y);
        break;
      case(SHAPE_RECT):
        rect(x, y, 50, 50);
        break;
      case(SHAPE_PARALLELOGRAM):
        quad(x, y, x+100, y, x+150, y+95, x+40, y+95);
        break;
    }
    
    // render text
    text(name, x, y);
  }
}

Lastly, notice the usage of text(string, x, y) which makes it trivial to display the name (string) at the given location (x,y). Bare in mind y is the baseline (bottom of the text) so you may need to change x,y to position text better. Since there is no change to the data you can save CPU cycles by simply rendering once in setup() instead of re-rendering the same data continously in draw().

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related