# End and Begin a New Shape Based off of Data Value

**URL:** <https://discourse.processing.org/t/end-and-begin-a-new-shape-based-off-of-data-value/9975>\
**Category:** Coding Questions\
**Created:** [April 4, 2019, 8:29pm UTC](https://discourse.processing.org/t/end-and-begin-a-new-shape-based-off-of-data-value/9975 "2019-04-04T20:29:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirstee\_baxt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirstee_baxt/32/4377_2.png) [@kirstee\_baxt](https://discourse.processing.org/u/kirstee_baxt)\
**Post date:** [April 4, 2019, 8:29pm UTC](https://discourse.processing.org/t/end-and-begin-a-new-shape-based-off-of-data-value/9975/1 "2019-04-04T20:29:23Z")

</div>

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:

```auto
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.

```auto
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

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 5, 2019, 4:19am UTC](https://discourse.processing.org/t/end-and-begin-a-new-shape-based-off-of-data-value/9975/2 "2019-04-05T04:19:11Z")

</div>

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:

```auto
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]);
  }
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 6, 2019, 10:45pm UTC](https://discourse.processing.org/t/end-and-begin-a-new-shape-based-off-of-data-value/9975/3 "2019-04-06T22:45:26Z")

</div>

> [@kirstee\_baxt](#):
>
> I would like to endShape and begin a new one based off a numeric value from a data set

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?

---

<div class="post-metadata">

**Author:** ![kirstee\_baxt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirstee_baxt/32/4377_2.png) [@kirstee\_baxt](https://discourse.processing.org/u/kirstee_baxt)\
**Post date:** [April 9, 2019, 2:32am UTC](https://discourse.processing.org/t/end-and-begin-a-new-shape-based-off-of-data-value/9975/4 "2019-04-09T02:32:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 9, 2019, 10:14am UTC](https://discourse.processing.org/t/end-and-begin-a-new-shape-based-off-of-data-value/9975/5 "2019-04-09T10:14:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirstee\_baxt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirstee_baxt/32/4377_2.png) [@kirstee\_baxt](https://discourse.processing.org/u/kirstee_baxt)\
**Post date:** [April 9, 2019, 5:58pm UTC](https://discourse.processing.org/t/end-and-begin-a-new-shape-based-off-of-data-value/9975/6 "2019-04-09T17:58:06Z")

</div>

The provided solution will work – thanks! 🙂