rotary-bar-chart.pde

float fillColor;

void setup() {
  size(300, 200);
  background(255, 255, 255);
  fill(0, 0, 0);
  
  // Draw one bar graph on the left, starting from the bottom and working clockwise
  //===============================================================================
  
  // Recenter drawing context in middle-left
  translate(75, 100);
  // -5 means center the 10px-wide rect at 0,0
  fillColor = 0;
  fill(fillColor, fillColor, fillColor);
  rect(-5, 0, 10, 40);
  
  // Rotate the context and draw another box
  rotate(TWO_PI / 6);
  fillColor = fillColor + (255 / 5);
  fill(fillColor, fillColor, fillColor);
  rect(-5, 0, 10, 40);
  
  // Rotate the context and draw another box
  rotate(TWO_PI / 6);
  fillColor = fillColor + (255 / 5);
  fill(fillColor, fillColor, fillColor);
  rect(-5, 0, 10, 40);
  
  // Rotate the context and draw another box
  rotate(TWO_PI / 6);
  fillColor = fillColor + (255 / 5);
  fill(fillColor, fillColor, fillColor);
  rect(-5, 0, 10, 40);
  
  // Rotate the context and draw another box
  rotate(TWO_PI / 6);
  fillColor = fillColor + (255 / 5);
  fill(fillColor, fillColor, fillColor);
  rect(-5, 0, 10, 40);
  
  // Rotate the context and draw another box
  rotate(TWO_PI / 6);
  fillColor = fillColor + (255 / 5);
  fill(fillColor, fillColor, fillColor);
  rect(-5, 0, 10, 40);
  
  // White circle in the middle
  fill(255, 255, 255);
  ellipseMode(RADIUS);
  circle(0, 0, 9);
  
  // Rotate the canvas the rest of the way back to where it began,
  // and reset the origin to the upper-left
  rotate(TWO_PI / 6);
  translate(-75, -100);

  // Use a function to abstract drawing a second chart to the right, passing it
  // an array of bar heights
  //===============================================================================
  
  // {1, 2, 3} is one way to make an array of the values 1, 2, 3
  int[] barHeights = { 50, 45, 40, 35, 30, 25 };
  drawChart(225, 100, barHeights);
}

void drawChart( int centerX, int centerY, int[] barHeights ) {
  // Start a new drawing context at centerX, centerY
  pushMatrix();
  translate(centerX, centerY);
  
  // Start pointing up, this time
  rotate(PI); // TWO_PI is a full rotation, so PI means 180 degrees
  
  // Iterate through the bars
  for (int i = 0; i < barHeights.length; i++) {
    int barHeight = barHeights[i];

    // Draw this bar
    // 10px wide, barHeight tall, leading edge centered on 0,0
    rect(-5, 0, 10, barHeight);

    // Rotate so that the next bar is in the right spot
    rotate(TWO_PI / barHeights.length);
  }
  
  // Draw a circle to cap the center
  fill(255, 255, 255);
  ellipseMode(RADIUS);
  circle(0, 0, 9);
  
  // Close new drawing context
  popMatrix();
}