OpenProcessing website.

You can create an account on this website to test your skills with processing programming language.
About OpenProcessing then this programming language uses some awesome Licensed and Open Source components.
You can see my working sketches here.

Using p5.js to create a progressbar .

This is an old tutorial about how to create a progressbar with processing.
To convert to p5.js you need to change the processing source code to javascript.
You can read about this conversion here.
In my example I change all variable types to var and I remove the frame.setTitle.
If you using the processing I.D.E. then you need to change from the right area from java to p5.js.
This will make a index.html file ( don't change this file).
This is the source code for p5.js and is working well:

// example progressbar 
// default variables for progressbar
// start the time for progressbar
var startTime; 
// counter progressbar 
var counter;
// maximum time progressbar
var maxTime; 
// boolean for the end progressbar 
var done; 
// settings for this example
function setup() { 
// set title of window
//frame.setTitle("Example progressbar | free-tutorials.org");
// window size and background color
// p5.js
createCanvas(640,130);
 
//size(640,130);
background(25); 
// set variables of progressbar
counter = 0; 
startTime= millis(); 
maxTime=int(random(1000,1976)); 
done=false; 
//end settings
} 
// draw all text and progressbar
function 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 
function mousePressed () { 
  if (done) { counter = 0; startTime= millis();
  maxTime=int(random(1000,1976)); 
  done=false;
  }
}

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; }
}

Using processing.js to test ControlP5 .

The ControlP5 is a gui library written by Andreas Schlegel for the programming environment processing.
You can add this library open the processing IDE and under menu select Tools -> Add Tool ... . Use editbox to search the library named ControlP5 .
You can find many examples on official website.
Let's see how is look the Textarea GUI using processing IDE - official website example:

Using processing.js to make a rotating ball effect .

This tutorial show us how to make a rotating ball effect. You can see the background is not black and the reason is the background is set just into setup function. Another part of this effect is the rect function from draw. This rect will clean the ball. The ball is a ecllipse function with a size a 10. The pushMatrix function pushes the current transformation matrix onto the matrix stack.

float angle;
int dist_ball = 100;

void setup() {
  size(800, 600);
  background(0);
}

void draw() {
  fill(20,20);

  noStroke();
  rect(0,0,width, height);
  fill(255);

  translate(width/2, height/2);

  rotate(angle);

  pushMatrix();
   rotate(angle);
   translate(dist_ball,0);
   ellipse(0, 0, 10, 10);
  popMatrix();
 
  angle += 0.1;
}

The result is this effect:

Using processing.js to make a clock.

Is a simple way to make and test processing.js online by using this online tool.
First you need to sign in into your account and use button : Create a Sketches .
This will open your open the editor. Now you need to add this source code:

void setup() {
  size(200, 200);
  stroke(10);
  smooth();
}
void draw() {
  background(255);
  fill(0);
  noStroke();
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  ellipse(100, 100, 160, 160);
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
  float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
  stroke(255);
  strokeWeight(1);
  line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
  strokeWeight(2);
  line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
  strokeWeight(4);
  line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);
}

The source code is simple:

• one first function setup will set size area and some line settings; 
• the draw function loops continuously to draw your work. 

Into the draw function I create a clock design and the movement is follow by time.
Because this is analog clock , I used sin functions to move the line to show the analog clock hands for time.
Take a look into the right area and will see three vertical dots.
Use mouse and a side panel will show you. In this panel you can set Settings and upload Files.
The Settings will come with the Mode to set the javascript - P5js/Processingjs and Tabs to show/hide your work.
Let's see how is working:

Try processing js on Android OS.

If you like to code in processing.js, then this application will fulfill your wish on your phone or tablet with android operating system.
The APDE - Android Processing IDE requires the following permissions:

• modify and delete the contents of your USB storage - required to save sketches to the external storage 
• control vibration - required to provide haptic feedback, which can be turned off in Settings 

This includes a quick-run JavaScript - Sandbox and a tutorials that are explained in more details.
The development team from CalsignLabs has just one person.
This tell us about this alpha released application:

APDE (Android Processing Development Environment) is an integrated development environment for creating Processing sketches on your phone/tablet. APDE supports the full edit, compile, and run cycle. You don't need a computer or an SDK to start coding on the go.

The application can be found on google play here.