# Creating a Gauge Bar with percentage

**URL:** <https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [March 30, 2022, 3:48pm UTC](https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032 "2022-03-30T15:48:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![KingKvn](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@KingKvn](https://discourse.processing.org/u/KingKvn)\
**Post date:** [March 30, 2022, 3:48pm UTC](https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032/1 "2022-03-30T15:48:47Z")

</div>

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 🙏

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2022, 4:09pm UTC](https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032/2 "2022-03-30T16:09:10Z")

</div>

Hey and welcome to the forum!

Okay, first you want a frame for the bar.

say something like

```auto
noFill();
rect(x,y, 400, 30);

```

then something like

```auto
fill(255,0,0);
rect(x+3, y+3,
      210, 30-6);

```

Boom!

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 30, 2022, 4:32pm UTC](https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032/3 "2022-03-30T16:32:05Z")

</div>

> [@KingKvn](#):
>
> code a program that requires me to create 4 Leds

Hello,

LEDs?  
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

`:)`

---

<div class="post-metadata">

**Author:** ![KingKvn](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@KingKvn](https://discourse.processing.org/u/KingKvn)\
**Post date:** [March 30, 2022, 7:59pm UTC](https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032/4 "2022-03-30T19:59:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 31, 2022, 1:06am UTC](https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032/5 "2022-03-31T01:06:41Z")

</div>

Hello @KingKvn ,

There are lots of resources here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts…

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

- println()
- map()
- mouseX
- mouseY

Example:

```auto
void setup() 
  {
  size(200, 200);
  noFill();
  }

void draw() 
  {
  background(255);
  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:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts…

Another helpful resource:

> **[Processing Tutorials](https://happycoding.io/tutorials/processing/)**
>
> Learn how to program in Processing!

`:)`

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [March 31, 2022, 3:04pm UTC](https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032/6 "2022-03-31T15:04:11Z")

</div>

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();`

```auto
int value, increment;

...

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 2, 2022, 9:59am UTC](https://discourse.processing.org/t/creating-a-gauge-bar-with-percentage/36032/7 "2022-04-02T09:59:04Z")

</div>

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