How to control the progress bar of the ring?

edited March 2018 in How To...

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




  • 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

    Show your entire code then


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

  • edited March 2018


  • 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

         progress ++;
  • Answer ✓

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

  • Answer ✓

    I know it’s hard

    Try it

    Post your entire code

  • Answer ✓
    float x;
    float y;
    float d; 
    float progress=9;
    void setup() {
      size(300, 300);
      x = width/2;
      y = height/2;
      d = width * 0.8;
      background(14, 18, 30);
    void draw() {
      background(14, 18, 30);
      // show full circles
      ellipse(x, y, d, d);//yellow1
      ellipse(x, y, d-30, d-30);//green1
      ellipse(x, y, d-60, d-60);//blue1 
      // -----------------
      if (keyPressed&&key=='+') 
      if (keyPressed&&key=='-') 
      fill(255); // white
        +", 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  !!!!!!!!!!!!!!!   
      arc(x, y, d-30, d-30, PI+HALF_PI, TWO_PI);//green
      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..

  • Answer ✓


Sign In or Register to comment.