How to control the progress bar of the ring?

Happier

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 ...

Chrisir

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

Show your entire code then

Chrisir

Happier

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?

TfGuy44

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.

Chrisir

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(.....

jeremydouglass

The arc reference:

• https://processing.org/reference/arc_.html

And some previous forum sketches that use arc:

• https://forum.processing.org/two/search?Search=arc(

Happier

Hi

Chrisir

Hi!

How is it going?

Happier

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 }

Chrisir

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

Chrisir

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

Happier

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

Chrisir

I know it’s hard

Try it

Post your entire code

Chrisir

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

Happier

Thanks Chrisir, this is exactly what I want, sorry for replying you so long, thanks again..

Chrisir

;-)