#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# How to control the progress bar of the ring?

edited March 2018

Hello Processing Community, I have created a sketch , but how to present and use the keyboard to click control? and how to create this type of progressbar？

waiting for your suggestions and trying my best for this...

regards ...

Tagged:

• edited March 2018

Look at `arc` please

It’s a command in the reference

Make a full arc (with less opacity) and your progress bar with full opacity - see command `fill()`

Now make several arcs all with the same center but different radius

For each arc you need a progress variable (the stop angle) how far the arc is painted

With `keyPressed` and `key=='+'` you can change this variable (`stopProgressVar1++;`)

Use radians() or map() to convert this value for the arc() command

Chrisir

• Hi Chrisir, thank you for your precious reply...,but(Use radians() or map() to convert this value for the arc() command)I am not quite sure and how to command this variable?

• Let's see your current code. Be sure to format it properly. It doesn't have to be for a circular progress bar - maybe even just a regular one.

• To your question: let’s say your progress runs from 0 to 1000 then you can say

progressToDisplay=map(progress, 0, 1000, 0, TWO_PI);

and use this for arc(.....

• The arc reference:

And some previous forum sketches that use arc:

• edited March 2018

Hi

• Hi!

How is it going?

• edited April 2018

Hi,thank you for your precious reply...,This is my arc effect progress bar code ,Next, how can I change it by clicking on the keyboard? waiting for your suggestions and trying my best for this...

regards ...>

```void setup(){ size(300,300); smooth(); background(14,18,30); } void draw(){ float x = width/2; float y = height/2; float d = width * 0.8; ellipseMode(CENTER); fill(#26221A); ellipse(x,y,d, d);//yellow1 fill(#1C2420); ellipse(x,y,d-30, d-30);//green1 fill(#101E24); ellipse(x,y,d-60, d-60);//blue1 fill(#B77C08); arc(x,y,d, d,PI+HALF_PI, PI+HALF_PI+QUARTER_PI);//yellow fill(#657D31); //noStroke(); arc(x, y, d-30, d-30, PI+HALF_PI,TWO_PI);//green fill(#1E624C); arc(x, y, d-60, d-60, PI+HALF_PI,TWO_PI+QUARTER_PI);//blue fill(14,18,30); arc(x, y, d-90, d-90, 0,TWO_PI);//center }```

• edited March 2018

You need now an arc where you show the progress as the angle

Or do you have that already?

Make `progress` a variable.

use the `map()` command with it as shown above

Now to change progress

``````if(keyPressed&&key=='+')

progress ++;
``````

float progressToDisplay=map(progress, 0, 1000, 0, TWO_PI);

• Thank you very much for your reply and are trying hard to try this, haha, thanks again. .

I know it’s hard

Try it

``````float x;
float y;
float d;

float progress=9;

void setup() {
size(300, 300);

x = width/2;
y = height/2;
d = width * 0.8;

smooth();
background(14, 18, 30);
}
void draw() {
background(14, 18, 30);

// show full circles
ellipseMode(CENTER);
fill(#26221A);
ellipse(x, y, d, d);//yellow1
fill(#1C2420);
ellipse(x, y, d-30, d-30);//green1
fill(#101E24);
ellipse(x, y, d-60, d-60);//blue1

showArcs();

// -----------------
if (keyPressed&&key=='+')
progress++;

if (keyPressed&&key=='-')
progress--;

fill(255); // white
text(progress
+", use + and - ", 18, 18);
}

//---------------------------------------------------------------

void showArcs() {

fill(#B77C08);   // !!!!!!!!!!!!!!!!!!!!!!!!!
arc(x, y, d, d, PI+HALF_PI, map(progress, 0, 100, PI+HALF_PI, PI+HALF_PI+PI+HALF_PI));//yellow  !!!!!!!!!!!!!!!

fill(#657D31);
arc(x, y, d-30, d-30, PI+HALF_PI, TWO_PI);//green

fill(#1E624C);
arc(x, y, d-60, d-60, PI+HALF_PI, TWO_PI+QUARTER_PI);//blue

fill(14, 18, 30);
arc(x, y, d-90, d-90, 0, TWO_PI);//center
}
//
``````
• Thanks Chrisir, this is exactly what I want, sorry for replying you so long, thanks again..