int[] BoxHeights; 
color[] BoxColors;
int numBoxes = 20;

void draw() {
  setup();
  Sort();
}

void setup() {
  background(0);
  frameRate(5);
  size(600, 400);
  noStroke();
  if(BoxHeights == null) {
    initHeightsAndColors();
  }
}

void initHeightsAndColors() {
  BoxHeights = new int[numBoxes];
  BoxColors = new color[numBoxes];
  for(int i = 0; i < numBoxes; i++) {
    
    // STEP 1: Vary heights
    // Setting each box's height
    BoxHeights[i] = height / 4;
    
    //STEP 2: Vary colors based on height
    // Setting each box's color
    BoxColors[i] = color(255, 0, 0); 
  }
}

void drawBoxes() {
  for(int i = 0; i < numBoxes; i++) {
    fill(BoxColors[i]);
    float centerY = height / 2;
    float xCoord = width * i / numBoxes;
    float yCoord = centerY - BoxHeights[i] / 2;
    float boxWidth = width / (numBoxes * 2);

    // What is drawn at each location    
    boolean drawRectangles = true;
    if(drawRectangles)
      rect(xCoord, yCoord, boxWidth, BoxHeights[i]);
    else {
      // Change what is drawn if drawTriangles == false
      // Depending on the BoxHeight at i, draw that many circles
      float circleRadius = boxWidth;
      for(int y = -BoxHeights[i] / 2; y <= BoxHeights[i] / 2; y += circleRadius)
        ellipse(xCoord, centerY + y, circleRadius, circleRadius); 
        
      // STEP 5: Changing from rectangles or ellipses to something more interesting
      
    }
  } 
}

void SwapBoxes(int index1, int index2) {
  // STEP 3: Swapping two values
  // Needs code to swap two boxes' heights and colors
  
}

void Sort() {
  boolean sorted = true;
  for(int i = 1; i < numBoxes; i++) {
    if(BoxHeights[i - 1] < BoxHeights[i]) {
      SwapBoxes(i, i - 1);
      sorted = false;
    }
  }
  drawBoxes();
  
  // STEP 4: reinitialize when done sorting
  if(sorted) {
    
  }
}