Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.