Load different SVG files based on table data (Simple, Beginner!)

Processing Coding Questions
1

Hey community - thanks for being there.

I have looked elsewhere, but haven’t found a solution to what ought to be extremely simple - apologies if my research was insufficient.

FYI I already can: Load a table, get ints and floats from it, and use these variables to change colors and sizes of elements, for example. I can also import and display an SVG file, and manipulate its properties depending on table date.

What I can’t do: display a specific svg file depending on the contents of a table. For example, if column three contains values of either “happy” or “sad”, it should be easy to display either a happy or frowny face svg file depending on the data. Should be extremely simple, but I can’t seem to figure it out.

Here is a simplified snippet of my code. In this example my goal is to draw a different kind of line (each has its own SVG file) depending on “relationship type” in the csv data file. The question area is marked with lots of commentary so you should be able to see what I intuitively want to do.

Many thanks in advance…

PShape Enemy;
PShape Friend;
PShape Stranger;

void setup(){
    size (1000,1000);
  
  //load in all the line shapes I want here, which I'll keep to 3 for now
  Enemy= loadShape ("Enemy.svg");
  Friend= loadShape ("Friend.svg");
  Stranger= loadShape ("Stranger.svg");
}

void draw(){
   background (#ffffff); 
   translate (width/2,height/2);
   shapeMode(CENTER);

Table table =loadTable("Others.csv","header"); 
for (int i=0; i<table.getRowCount(); i++) {
TableRow row = table.getRow(i);

//Here I define some variables from my "Others" table, including the string "relationship type"
  int rot = row.getInt("Interaction");
  int imp = row.getInt("Importance");
  int emo = row.getInt("Emotions");
  String RelType = row.getString("Type");
  
 pushMatrix();
  rotate(radians(rot*22.5)); //Rotates depending on "rot" value, works fine.
  
//HERE IS WHERE MY QUESTION IS:
//THIS works fine:
  
  shape(Stranger,0,-200);
    
// But the point is that I want different lines, depending on the Relationship Type in the table
// I've made the string RelType identical to the svg filename, so what I want to do is:
  
 shape("RelType", 0, -200);

// or:

 shape(RelType, 0,-200);

// or:

 shape ([put the current value of the string "RelType" right here], 0,-200));

//or something like that, but none of these work. . 

popMatrix();
  
  }
 
}
1 Like
2

Hello, and welcome to the forum!

Nice Sketch here!

You could just

switch( RelType ) {

case  “happy”:
 shape(Friend, 0,-200);   // why minus?
 break; 

case  “sad”:
 shape(Enemy, 0,-200);
 break; 

}

You can also use if…, but remember == doesn’t work with Strings, use equals() instead

See https://www.processing.org/reference/String_equals_.html

Remarks

You can’t say shape(RelType, 0,-200); because RelType is a String and not a shape. The switch() goes from String to shape.

If you have many many adjectives and shapes, look at hashmap to make this transition.

Warmest regards, Chrisir

2 Likes
3

Thanks for getting back to me…
Not sure I quite get what is going on with the “switch” and “case” thing here? Sorry!

I’m going to go play with your suggestion, but I think it is pretty clear I just don’t get how strings function… I thought if I made my svg filenames identical with the string values it would work.

It might be that I mixed two examples, one about happy and sad faces and one about relationships, and that just confused things. To be clear, what ultimately after is this: different kinds of lines (wavy, dotted, dashed, etc., which are saved as svg files) that connect points - which line depends on the table. So here’s a table:

NAME. Age. RelType
Bill 22. Enemy
Mary. 40. Stranger
Joe. 99. Friend

Intuitively I want to get the string “RelType” and then say “put the corresponding svg file on the screen”.

Would it help if I converted (manually) my RelTypes to numbers? (i.e. “Enemy” = 3 or whatever?).
Then maybe I could do something like like “if x = 3, shape (Enemy,0,-200)”.

Thanks again for taking your time!

4

Hey again. I’ve solved my own problem. I used numbers rather than strings, and a bunch of "IF"s. If it is helpful to anybody else out there, you basically just can’t use strings like I was trying to do, unless Chris’s “Switch” operation works. Instead, use a numerical value and associate it with something using ifs. So, in my code above, replace “String RelType =…” with:

  int rel = row.getInt("Type");
  
 pushMatrix();
  rotate(radians(rot*22.5));
    if (rel ==1){
      shape(Friend,0,-200);
    }
    if (rel == 2){
    shape(Enemy,0,-200);
    }
    if (rel==3){
      shape(Romantic,0,-200);
    }
    if (rel==4){
      shape(Formal,0,-200);
    }
    if (rel == 5){
      shape(Family,0,-200);
    }
    if (rel == 6){
      shape(Stranger,0,-200);
    }
    if (rel==7){
      shape(KBU,0,-200);
    }
  fill(100,30,(50*emo));
  circle(0,-400,imp*10);
 popMatrix();

And you get the following gorgeous drawing (!) :

Screen Shot 2020-03-30 at 4.01.42 PM
Screen Shot 2020-03-30 at 4.01.42 PM997×1021 32.2 KB

3 Likes
5

Nice you got it.

When you use int as an indicator, you can make an array of PShape and use the int as an index

for switch see reference, it’s just another form of if… else if… else if…

see https://www.processing.org/reference/switch.html

1 Like
6

Thanks again. That might be really helpful down the road. I’m ultimately trying to automate what I was doing in illustrator - I’m creating a program that visualizes emotional content in dream reports… Like this:

Screen Shot 2020-03-30 at 5.10.03 PM
Screen Shot 2020-03-30 at 5.10.03 PM836×595 58.3 KB

2 Likes
7

This looks fantastic!

Great work.

1 Like