Code

void setup(){
  size(400,200);
  background(140,40,60);
  noStroke();
}

int frameNum = 0;
boolean bgBlack=false;
float framePercent=0;
boolean activate=false;
int taskCompletionTime = 120;

void draw(){
  framePercent=(((float)frameCount-(float)frameNum)/taskCompletionTime);
  fill (255);
  rect (100,75, 200,50); 
  if (framePercent<1.0 && activate==true){
    fill (120,190,250);
    rect (100,75, framePercent*200,50);
  }
  if (frameCount==frameNum+taskCompletionTime && activate==true){
    flipColor();
  }
}

void mousePressed(){
  activate=true;
  frameNum=frameCount;
}

void flipColor(){
  bgBlack=!bgBlack;
  if (bgBlack){
    background(240,190,40);
  }
  else if (!bgBlack){
    background(140,40,60);
  }
}

0304 - Maintaining state (progress bar): Timers and booleans

Statement:Give yourself ample time to create this program. The solution code is short, but you may need to think carefully.

Create a "progress bar" program in which a progress bar is set into action by the user's click, and when the timer has elapsed, the background color flips from black to white. Here are some hints:

  • Store the frameCount when the user clicks the mouse;
  • On each frame, compute how many frames have elapsed since the click;
  • Suppose that your "progress bar" takes 120 frames to complete its task (the "task completion time"). It would be nice if this were a global variable...
  • Compute a percentage which represents the fraction of the "task completion time" which has elapsed;
  • Render a progress bar which illustrates this percentage;
  • When the progress bar is complete, flip the color of the screen from white to black (or vice-versa);
  • The program should wait for user input when it launches.
Your colleague Placebo has created a solution to this problem which illustrates the correct behavior.

hide statement