End and Begin a New Shape Based off of Data Value

Processing Coding Questions
1

Hello,
I would like to endShape and begin a new one based off a numeric value from a data set. I would like each separate shape to also have a different rotation value based off of the same numeric value. My current code draws it as one shape instead of multiple separate ones. Thinking something like an if statement outside of beginShape();? Later, the data table will be more complex but wanting to begin with simplified values. Thanks in advance!

Here is my current code:

import peasy.*;
Table myTable;
int numEntries;
float x;
float y;
float z;
PeasyCam cam;

void setup(){
  size(600, 600,P3D);
  point(width/2,height/2);
  cam = new PeasyCam(this,1000);
  myTable = loadTable("data-test.csv", "header");
  numEntries = myTable.getRowCount();
}

void draw(){
 background(225);
 beginShape();
  for (int i = 0; i < numEntries; i++) {
    x = myTable.getRow(i).getFloat("Hour");
    println("#:", x);

    y = myTable.getRow(i).getFloat("Rating Level");
    println("rating height", y);

//would like to use "Day" value to tell to end and begin a new shape. 
//For example, when Day = 1 I want to begin a shape. 
//When Day = 2, I want to end the previous shape and begin a new one.
//Each one of these shapes will have a different rotation value (zrot variable below)
    z = myTable.getRow(i).getFloat("Day");
    println("day", z);
    println("_");
    float zrot = map(z, 0, 5, 0, TWO_PI);

    //angle plays in with x/y coord below
    float angle = map(x, 1, 12, 0, PI);
    float xCenter = width/2; 
    float yCenter = height/2;

    float xCoord = xCenter + cos(angle-(PI)) * (y);
    float yCoord = yCenter + sin(angle-(PI)) * (y);

    vertex(xCoord, yCoord);
    //rotates around z axis based on day #
    rotateZ(zrot*10);
  }
  endShape();
}

Here is my data information in csv formatting.

Day,Hour,Rating Level
1,1,50
1,2,100
1,3,50
1,4,100
1,5,50
1,6,100
1,7,50
1,8,100
1,9,50
1,10,100
1,11,50
1,12,100
2,1,30
2,2,90
2,3,30
2,4,90
2,5,30
2,6,90
2,7,30
2,8,90
2,9,30
2,10,90
2,11,30
2,12,90
3,1,50
3,2,100
3,3,50
3,4,100
3,5,50
3,6,100
3,7,50
3,8,100
3,9,50
3,10,100
3,11,50
3,12,100
4,1,30
4,2,90
4,3,30
4,4,90
4,5,30
4,6,90
4,7,30
4,8,90
4,9,30
4,10,90
4,11,30
4,12,90
1 Like
2

hi, yes, you should first check on what and how many days are in your data file
and you can create separate shapes ( to a array of shapes )
( each for one day )
just a dirty start to give the idea:

import peasy.*;
PeasyCam cam;

Table myTable;
String table_fn="data/data-test.csv";
int numEntries;
float x, y, z;
boolean diagp = true;
PShape[] myShapes;

void setup() {
  size(600, 600, P3D);
  point(width/2, height/2);
  cam = new PeasyCam(this, 1000);
  myTable = loadTable(table_fn, "header");
  if (diagp) println("load file: "+table_fn);
  numEntries = myTable.getRowCount();
  make_shapes();
  noLoop();
  
}

void make_shapes() {
  // find a start day:
  int startday = myTable.getRow(0).getInt("Day");
  int endday   = myTable.getRow(numEntries-1).getInt("Day");
  int days = endday - startday+1;
  if (diagp) println("start day "+startday+" endday "+endday+" days "+days);
  myShapes = new PShape[days];
  int k = 0;
  for ( int goday = startday; goday <= endday; goday++ ) {  // group shapes per day
    myShapes[k] = createShape();
    println("make shape "+k);
    myShapes[k].beginShape();
    for (int i = 0; i < numEntries; i++) {
      x = myTable.getRow(i).getFloat("Hour");
      y = myTable.getRow(i).getFloat("Rating Level");
      z = myTable.getRow(i).getFloat("Day");
      //if (diagp) print("#:i "+i+" x", x+" rating height ", y+" day ", z+"_");
      if ( z == goday ) {
      if (diagp) println("#:i "+i+" x", x+" rating height ", y+" day ", z+"_");
      //float zrot = map(z, 0, 5, 0, TWO_PI);

      //angle plays in with x/y coord below
      float angle = map(x, 1, 12, 0, PI);
      float xCenter = width/2; 
      float yCenter = height/2;

      float xCoord = xCenter + cos(angle-(PI)) * (y);
      float yCoord = yCenter + sin(angle-(PI)) * (y);

      myShapes[k].vertex(xCoord, yCoord);
      //rotates around z axis based on day #
      // myShapes[k].rotateZ(zrot*10);
      }
    }
    myShapes[k].endShape(CLOSE);
    k++;  
  }
}

void draw() {
  background(225);
  for ( int k = 0 ; k < myShapes.length; k++ ) {
    rotateZ(k*TWO_PI/myShapes.length);
    myShapes[k].setFill(color(random(127,255),random(127,255),random(127,255)));
    shape(myShapes[k]);
  }
}
1 Like
3

Just to be sure I understand your goal: do you want to display all the shapes at once, next to each other? Display each shape over time, one after another?

Will these values in the final project be static, or dynamically loaded, or is more data updating in realtime?

4

I’d like to display all shapes at once. Values will be dynamically loaded – meaning this isn’t the final data set, but the variables (day, hour, rating level) of the data will remain.

5

Does the provided solution work for you?

Otherwise work with my old version and inside your for loop: if your data condition is met, start a new shape by saying endShape then beginShape and so on

Chrisir

6

The provided solution will work – thanks! :slight_smile:

1 Like