Creating a Gauge Bar with percentage

Good day, I’ve been given an assignment to code a program that requires me to create 4 Leds that change to 2 different colors depending on which mouse button is pressed. If the right mouse button is pressed, the gauge bar is suppose to fill up per mouse press until 100%; this percentage must be shown below the gauge bar. If the left mouse button is pressed, the gauge bar is suppose to lower per mouse press until 0%.

I know im supposed to use two ‘rectangles’ with one being fractionally smaller than the other; the smaller one is meant to act as the animated “fill up” procedure but i seem to be struggling with the code for this. Please assist if possible :pray:

1 Like

Hey and welcome to the forum!

Okay, first you want a frame for the bar.

say something like

rect(x,y, 400, 30);

then something like

rect(x+3, y+3,
      210, 30-6);


Now 210 is the current value of your percentage.

It’s between 0 and 400-6

Replace it with a variable that increases until it’s 400-6



Is there a hardware element to this?

What research or progress have you made so far?
Point form in a list is is fine.
I do not need to see any code


1 Like

There’s no hardware element, yet; for the time being it’s just coding.

By LEDs, I meant ellipse’s. Thus far I’ve been able to create the 4 ellipses as well as the gauge bar(rectangle). I’m yet to code the ellipses to change color per mouse press as well as the code for the rectangle to ‘fill up/down’ after each mouse press.
I’m currently attempting to code the rectangle using @Chrisir 's advice.

1 Like

Hello @KingKvn ,

There are lots of resources here:

I have found these functions and system variables useful to visualize and develop code:

  • println()
  • map()
  • mouseX
  • mouseY


void setup() 
  size(200, 200);

void draw() 
  float x = map(mouseX, 0, width, 0, 200); 
  float y = map(mouseY, 0, width, 0, 200);  
  line(0, 0, x, y);
  line(0, 100, x, 100);
  line(100, 0, 100, y);
  rect(10, 10, x, y);
  println (mouseX, mouseY);

You should be looking at the references for each element of your code.

Take a look at the resources (tutorials, examples, references) at the Processing website:

Another helpful resource:


1 Like

Use a variable to track the value and one to adjust it (i.e. called increment).
Add increment to the value in draw();
Update the increment value in mousePressed();

int value, increment;


void mousePressed() {
  if (mouseButton == LEFT) {
    increment = 1;
  } else if (mouseButton == RIGHT) {
    increment = -1;

The percentage must stay inside range 0…100

Use map() command to map this value to
screen pixels (width of inner rectangle) which is 0…400-6