Changing shape size based on loaded data

Processing Coding Questions
1

I’m trying to create an image with 7 flowers - 1 for each day. Each flower has 5 petals and i would like for them to change in size based on 5 sets of data (all as a proportion) - time spent asleep, time spent doing sedentary activity, doing light activity, doing moderate activity, and doing vigorous activity.
I am a total newbie to Processing so I have a template for the flowers - I’ve imported all my data used it to create 7 flowers.
I have variables for my data but there’s only one
disanceOffset =
to change size of petals in template. And I don’t really get how to change the size of each individual petal. I don’t know how to change the template and am scared to try

Also, when I try to use myTable (which is my daily data for activity) for the petal size (which is the data I want rather than hoursData - hourly data) it gives me an error - Row 7 doesn’t exist.

My code:

size(1000, 300);


Table hoursData;
Table myTable;


hoursData = loadTable("MyDataHours.csv", "header");
myTable = loadTable("MyDataDays.csv", "header");
 
int numDays = myTable.getRowCount();
int numRows = hoursData.getRowCount();

for(int i = 0; i < numDays; i++) {
  println(i);
  float asleep = myTable.getRow(i).getFloat("Asleep (proportion)");
  println("asleep:", asleep);
}

for(int i = 0; i < numDays; i++) {
  println(i);
  float vigorous = myTable.getRow(i).getFloat("Vigorous Activity (proportion)");
  println("Vigorous Activity:", vigorous);
}

for(int i = 0; i < numDays; i++) {
  println(i);
  float moderate = myTable.getRow(i).getFloat("Moderate Activity (proportion)");
  println("Moderate Activity:", moderate);
}

for(int i = 0; i < numDays; i++) {
  println(i);
  float light = myTable.getRow(i).getFloat("Light Activity (proportion)");
  println("Light Activity:", light);
}

for(int i = 0; i < numDays; i++) {
  println(i);
  float sedentary = myTable.getRow(i).getFloat("Sedentary Activity (proportion)");
  println("Sedentary Activity:", sedentary);
}

float maxDay = 0.0;
for (int i = 0; i < numDays; i++) {
  float day = myTable.getRow(i).getFloat("Day");
  maxDay = max(day, maxDay);
}

background(0);

stroke(100);


for (int i = 0; i < numRows; i++) {
  beginShape();
  
  int dayNumber = hoursData.getRow(i).getInt("Day");
  float centerX = map(dayNumber, 0, maxDay, 60, width - 60);
  float centerY = height/2;

  float angle = map(i, 0, 5, 0, TWO_PI);
  
  float asleep = hoursData.getRow(i).getFloat("Asleep (proportion)");
  float mappedAsleep = map(asleep, 0, 1, 20, 80);
  
  float vigorous = hoursData.getRow(i).getFloat("Vigorous Activity (proportion)");
  float mappedVigorous = map(vigorous, 0, 1, 20, 80);
  
  float moderate = hoursData.getRow(i).getFloat("Moderate Activity (proportion)");
  float mappedModerate = map(moderate, 0, 1, 20, 80);
  
  float light = hoursData.getRow(i).getFloat("Light Activity (proportion)");
  float mappedLight = map(light, 0, 1, 20, 80);
  
  float sedentary = hoursData.getRow(i).getFloat("Sedentary Activity (proportion)");
  float mappedSedentary = map(light, 0, 1, 20, 80);

  float distanceOffset = 100;
  float angleOffset = 48;
  
  float redCol = 255;
  float greenCol = 203;
  float blueCol = 238;
  float opacity = 80;
  
  fill(redCol, greenCol, blueCol, opacity);
  

  vertex(centerX, centerY);
  
  float controlPointx1 = centerX + distanceOffset * sin(angle - radians(angleOffset));
  float controlPointy1 = centerY + distanceOffset * cos(angle - radians(angleOffset));

  float controlPointx2 = centerX + distanceOffset * sin(angle + radians(angleOffset));
  float controlPointy2 = centerY + distanceOffset * cos(angle + radians(angleOffset));

  bezierVertex(controlPointx1, controlPointy1, controlPointx2, controlPointy2, centerX, centerY);

  endShape();
}

flowers
flowers.PNG1011×318 23.5 KB

1 Like
2

Okay, very first thing – save a copy of your working code. Now make another copy. Good? Now edit it. Break it, break it some more, then break it differently. The only way you will learn is by not being too scared to try. Many experienced coders are constantly breaking their own code, on accident and sometimes on purpose – but it is okay, they can undo or go to a previous version if things get bad.

3

Second, your sketch takes this form (I think, based on quick inspection):

  • set screen size size
  • Import Hours and Days tables
  • loop over the Days table and print every value for
    • asleep
    • vigorous
    • moderate
    • light
    • sedentary
  • loop over the Days table and find the maximum value of “Day” out of all
  • make the screen black and the line stroke gray
  • loop over the rows of the Hours table – draw one petal for each row
    • center the x location of the drawing based on the dayNumber (which flower)
    • set the angle of drawing based on the hour row number (which petal)
    • store values for asleep, vigorous, moderate, light, sedentary on this row of hours
    • now ignore those values, and just draw a pink petal at the x location and angle using a bezierVertex curve.

If you examine this logic, can you imagine how you might begin changing it to achieve what you want?