// Initialize the loading bar with intensities
int[] loadingBar = {0,0,0,0,0,0,50,100,150,200,250,200,150,100,50};
int boxWidth;
// Save the number of boxes by getting the length of the array
int numBoxes = loadingBar.length;

void setup() {
  size(650, 75);
  // move the bar slowly so you can see it move
  frameRate(5);
  // a box is as wide as the screen divided by the number of boxes
  boxWidth = width/numBoxes;
}

// draw the loading bar
void drawBar() {
  // cycle over each element of the array
  for (int i = 0; i < numBoxes; i += 1) {
    // set the stroke and fill to the intensity of the array value
    fill(loadingBar[i]);
    stroke(loadingBar[i]);
    // draw each box, starting at the top left corner
    rect(boxWidth * i, 0, boxWidth, height);
  }
}

// change the intensity of each array value
void changeState() {

  // FIXME -- this should go right to left, and wrap around
  for (int i = 0; i < numBoxes - 1; i++) {
    // put the intensity of the box to the right into the current box
    loadingBar[i] = loadingBar[i+1];
  }

}

void draw() {
  drawBar();
  changeState();
}