Using processing.js to create a progressbar .

Today I tested the processing version 3.3.7 .
The example I make is a progressbar with a blue color and some text to show info.
The source code is very simple and result is this:

This is the source code:

// example progressbar 
// default variables for progressbar
// start the time for progressbar
int startTime; 
// counter progressbar 
int counter;
// maximum time progressbar
int maxTime; 
// boolean for the end progressbar 
boolean done; 
// settings for this example
void setup() { 
// set title of window
frame.setTitle("Example progressbar | free-tutorials.org");
// window size and background color
size(640,130);
background(255); 
// set variables of progressbar
counter = 0; 
startTime= millis(); 
maxTime=int(random(1000,1976)); 
done=false; 
//end settings
} 
// draw all text and progressbar
void draw() { 
  // set same background color
  background(255); 
  // check end of progressbar fill
  if (counter-startTime < maxTime) {
  counter=millis();
  }  else { done=true;  }
  // create the color for fill progressbar
  fill(110,110,255);
  // no stroke for draw
  noStroke();
  // show all text variables and progressbar
  text("Progress bar blue - size 620", 230, 20); 
  rect(10,30,map(counter-startTime,0,maxTime,0,620), 30 );
  text("counter- startTime "+int(counter- startTime)+" ",10,80);
  text("maxTime "+ int(maxTime) +  " ", 10,100);
  text("map converted counter-startTime"+ int ( map(counter-startTime,0,maxTime,0,200)), 10,120);
  noFill();
  }
// reload the draw of progress bar 
void mousePressed () { if (done) { counter = 0; startTime= millis();
  maxTime=int(random(1000,1976)); done=false; }
}