elapsed=millis(); 

      (this last one is called in mouseClicked)

1. 9*height/20

1.   if (started==true) {

1.   if (started) {

1.   else {
2.     started=false;

1.   else {
2.     // do nothing

in small chunks, rather than smoothly.

1.   if (key != 'r' && key !='p') {
2.     mouseClicked();
3.   }

1. float maxTime;
2. boolean started = false;
3. int progress;
4. float percent;
5. float mapperc;
6. float startTime;
7. float numerator;
8. float paused;
9. String welcome = "For the sake of this assignment, this is a blank screen. \n"
10. + "Click to restart; p to pause; r to resume.";
11. void setup () {
12.   size(500, 300);
13.   background(255);
14.   textSize(15);
15.   fill(0);
16.   text(welcome, width/2-200, height/2-50);
17.   textSize(24);
18. }
19. void draw () {
20.   if (started) {
21.     // clear screen
22.     background(255);
23.     // calculate percent
24.     calculatePercent();
25.     //drawing of the rect around the progress bar
26.     drawTheRectAroundTheProgressBar();
27.     //drawing of the actual progress bar
28.     drawTheProgressBar();
29.     //text for percentage in increments of five
30.     drawTheText();
31.   }
32. }
33. // the Inputs --------------------------------------------------
34. void mouseClicked () {
35.   percent=0;
36.   maxTime = random(2000, 8000);
37.   startTime=millis();
38.   started = true;
39. }
40. void keyReleased () {
41.   if (key == 'p') {
42.     // pause
43.     started = false;
44.     paused  = millis() - startTime;
45.   }
46.   else if (key == 'r') {
47.     // restart
48.     started   = true;
49.     startTime = millis() - paused;
50.   }
51. } // func
52. // the minor functions ----------------------------------------------
53. void calculatePercent() {
54.   // calculate percent
55.   numerator = millis() - startTime;
56.   if (int(percent)<=100) {
57.     percent = (100*(numerator)/maxTime);
58.   }
59.   if (percent>100) {
60.     percent=100;
61.   }
62. }
63. void drawTheRectAroundTheProgressBar() {
64.   //drawing of the rect around the progress bar 
65.   noFill();
66.   stroke(0);
67.   rectMode(CENTER);
68.   rect(width/2, height/2, width/2+10, height/10+10);
69.   fill(0);
70.   textAlign(CENTER);
71.   text ("The progress bar for approx. "
72.     + round(maxTime/1000)
73.     + " seconds. ",
74.   width/2, 100 );
75.   textAlign(LEFT);
76. }
77. void drawTheProgressBar() {
78.   //drawing of the progress bar
79.   mapperc = map(percent, 0, 100, 0, 250);
80.   for (progress=0;progress<mapperc;progress++) {
81.     stroke(255-progress);
82.     line(width/4+progress, 9*height/20, width/4+progress, 11*height/20);
83.   }
84. }
85. void  drawTheText() {
86.   //text for percentage in increments of five
87.   fill(0);
88.   if (int(percent)<100) {
89.     int percentForText = round(percent/5)*5;
90.     text(percentForText + "%", width/2-10, height/2+10);
91.   }
92.   else {
93.     text("100% Done!", width/2-60, height/2 + 10);
94.   }
95. }

ball to fill up

1.       maxTime = 3000; // Integer.parseInt(input);

1.       maxTime = float(input);

(the 100% => 100% done problem)

1.   if (int(percent)<100) {
2.     int percentForText = round(percent/5)*5;
3.     text(percentForText + "%", width/2-10, height/2+10);
4.   }
5.   else {
6.     text("100% Done!", width/2-60, height/2 + 10);
7.   }

1.   //text for percentage in increments of five
2.   fill(0);
3.   int percentForText = round(percent/5)*5;
4.   if (percentForText<99) {
5.     text(percentForText + "%", width/2-10, height/2+10);
6.   }
7.   else {
8.     text("100% Done!", width/2-60, height/2 + 10);
9.   }