# How do I make a bar that shows the progress of a cooldown?

**URL:** <https://discourse.processing.org/t/how-do-i-make-a-bar-that-shows-the-progress-of-a-cooldown/39315>\
**Category:** Coding Questions\
**Created:** [October 17, 2022, 11:03am UTC](https://discourse.processing.org/t/how-do-i-make-a-bar-that-shows-the-progress-of-a-cooldown/39315 "2022-10-17T11:03:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Marfmamow](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@Marfmamow](https://discourse.processing.org/u/Marfmamow)\
**Post date:** [October 17, 2022, 11:03am UTC](https://discourse.processing.org/t/how-do-i-make-a-bar-that-shows-the-progress-of-a-cooldown/39315/1 "2022-10-17T11:03:46Z")

</div>

In my game, I currently have 2 weapons. One with a cooldown of 2 seconds, and the other with a cooldown of 4.33 seconds

To make the cooldown, I’m doing:

```auto
int time = millis();
boolean fired = false;

if (millis() - time > weaponCooldown * 1000){
    shoot();
    this.fired() = true;
}

```

The cooldown works really well, but I’m struggling to make a bar that shows the cooldown progress  
I’ve managed to make a rectangle that shows up for the cooldown period by doing this:

```auto
if (fired() == true){
    fill(255, 255, 255);
    rect(20,20, 100, 10);
}

```

This is a white bar with a black border, and its the empty bar. I’m trying to make a new black rectangle that will increase in width while the weapon is in cooldown.  
How can I do this?

I know I’ll need to do some calculations using the cooldown and bar width (100 pixels), but I just can’t seem to figure out how to do this

I tried using a loop, but since this is in the draw() method, it just gets stuck in the loop

Edit: I want the progress bar to increase from left to right, like a progress bar filling

---

<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:** [October 17, 2022, 12:06pm UTC](https://discourse.processing.org/t/how-do-i-make-a-bar-that-shows-the-progress-of-a-cooldown/39315/2 "2022-10-17T12:06:23Z")

</div>

> [@Marfmamow](#):
>
> `millis() - time`

You have to work with this

Use map () function to go from here to pixels

See reference

progressBarWidth=map( millis() - time,  
0, 2000,  
0,100);

---

<div class="post-metadata">

**Author:** ![Pieter](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Pieter](https://discourse.processing.org/u/Pieter)\
**Post date:** [October 17, 2022, 2:02pm UTC](https://discourse.processing.org/t/how-do-i-make-a-bar-that-shows-the-progress-of-a-cooldown/39315/3 "2022-10-17T14:02:33Z")

</div>

Use linear interpolation

First take your elapsed time and divide it by the duration of the cooldown. This will give you a value between 0 and 1, you then multiply the full length of the bar with this number to get the length of the progress bar.

Linear interpolation exists in two forms, the “t” or time value represents at which intermediate point in the range you are.

`result = (1 - t) * startvalue + t * stopvalue`

`result = startvalue + (stopvalue - startvalue) * t`

If you ponder the formulas for a minute you’ll see it’s quite self-explanatory`

Here’s a useful video:

[![](https://img.youtube.com/vi/mAi2-LTC2CA/maxresdefault.jpg "Coding Math Mini #2: Linear Interpolation") ](https://www.youtube.com/watch?v=mAi2-LTC2CA)

---

<div class="post-metadata">

**Author:** ![Marfmamow](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@Marfmamow](https://discourse.processing.org/u/Marfmamow)\
**Post date:** [October 17, 2022, 3:12pm UTC](https://discourse.processing.org/t/how-do-i-make-a-bar-that-shows-the-progress-of-a-cooldown/39315/4 "2022-10-17T15:12:25Z")

</div>

Does this work if I want the progress bar to always be 100 pixels wide? So if the cooldown is shorter it’ll just take less time to fill up

---

<div class="post-metadata">

**Author:** ![Pieter](https://avatars.discourse-cdn.com/v4/letter/p/82dd89/32.png) [@Pieter](https://discourse.processing.org/u/Pieter)\
**Post date:** [October 17, 2022, 3:46pm UTC](https://discourse.processing.org/t/how-do-i-make-a-bar-that-shows-the-progress-of-a-cooldown/39315/5 "2022-10-17T15:46:39Z")

</div>

This should work in that case:

```auto
function progressBarWidth(startTime, cooldownDuration, progressBarFullWidth) {
  let currentTime = millis();
  let timeElapsed = currentTime - startTime;
  return map(timeElapsed, 0, cooldownDuration, 0, progressBarFullWidth);
}

```