Code

void setup (){
 size (300,300);
 background(0);
 noStroke();
 
}
// Global Variables

int frameNum = 0;
float framePercent = 0;
int completionTime = 120;
boolean Back = false;
boolean switched = false;


void draw(){
    framePercent = (((float)frameCount- (float)frameNum)/completionTime);
    fill(255);
    rect (50,100,200,50); 
    if(framePercent<1.0 && switched == true){
      fill (245,10,200);
      rect (50,100,framePercent*200,50);
    }
    if (frameCount == frameNum+completionTime && switched == true){
      switched();  
   }
}

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

void switched(){
  Back =!Back;
 if ((Back)){
    background (255);
    
  } else{
    if (!Back){
       background (0);

  } 
  }
  }

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