# Can someone help me create an energy bar for a game that gets higher when clicked

**URL:** <https://discourse.processing.org/t/can-someone-help-me-create-an-energy-bar-for-a-game-that-gets-higher-when-clicked/24543>\
**Category:** Coding Questions\
**Created:** [October 12, 2020, 1:53pm UTC](https://discourse.processing.org/t/can-someone-help-me-create-an-energy-bar-for-a-game-that-gets-higher-when-clicked/24543 "2020-10-12T13:53:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cal\_codes](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@Cal\_codes](https://discourse.processing.org/u/Cal_codes)\
**Post date:** [October 12, 2020, 1:53pm UTC](https://discourse.processing.org/t/can-someone-help-me-create-an-energy-bar-for-a-game-that-gets-higher-when-clicked/24543/1 "2020-10-12T13:53:32Z")

</div>

> Hi guys! I’ve been trying to teach myself coding and I wanted to try to make an energy bar that goes up when its clicked instead of just immediately displaying the entire energy bar. This is the code I have so far. The clicking works but it still has a starting position where the whole bar is displayed. Can someone help me complete it?

float energy = 100;  
float MAX\_ENERGY = 100;  
float barWidth = 200;  
float barHeight = 30;  
float x, y;

void setup()  
{  
size(800, 600);  
}

void draw()  
{  
background(0);

if (energy \< 25)  
{  
fill(#FFB515);  
} else if (energy \< 50)  
{  
fill(#FFCD00);  
} else  
{  
fill(#FBFF2C);  
}

noStroke();

x = 50;  
y = height/4 \* 3;  
float energyWidth = (energy / MAX\_ENERGY) \* barWidth;  
rect(x, y, energyWidth, barHeight);

stroke(255);  
noFill();  
rect(x, y, barWidth, barHeight);  
}

void mousePressed()  
{  
if (energy \> 0 && mouseButton == RIGHT)  
{  
energy -= 10;  
}  
if (energy \< 100 && mouseButton == LEFT)  
{  
energy += 10;  
}  
}

---

<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 12, 2020, 2:21pm UTC](https://discourse.processing.org/t/can-someone-help-me-create-an-energy-bar-for-a-game-that-gets-higher-when-clicked/24543/2 "2020-10-12T14:21:33Z")

</div>

```auto
float energy = 10;
float energyCount = 0;

float MAX_ENERGY = 100;
float barWidth = 200;
float barHeight = 30;
float x, y;

void setup()
{
  size(800, 600);
}

void draw()
{
  background(0);

  if (energy < 25)
  {
    fill(#FFB515);
  } else if (energy < 50)
  {
    fill(#FFCD00);
  } else
  {
    fill(#FBFF2C);
  }

  noStroke();

  x = 50;
  y = height/4 * 3;
  float energyWidth = (energyCount / MAX_ENERGY) * barWidth;
  rect(x+1, y+1, energyWidth-1, barHeight-1);

  stroke(255);
  noFill();
  rect(x, y, barWidth, barHeight);

  energyCount+=.2;
  if (energyCount>=energy)
    energyCount=energy;
}

void mousePressed()
{
  if (energy > 0 && mouseButton == RIGHT)
  {
    energy -= 10;
  }
  if (energy < 100 && mouseButton == LEFT)
  {
    energy += 10;
    // energyCount=0;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Cal\_codes](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@Cal\_codes](https://discourse.processing.org/u/Cal_codes)\
**Post date:** [October 12, 2020, 3:37pm UTC](https://discourse.processing.org/t/can-someone-help-me-create-an-energy-bar-for-a-game-that-gets-higher-when-clicked/24543/3 "2020-10-12T15:37:25Z")

</div>

thanks! Do you think you can explain a little of what you’re doing? I wanna learn from my mistakes and struggles.

---

<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 12, 2020, 4:07pm UTC](https://discourse.processing.org/t/can-someone-help-me-create-an-energy-bar-for-a-game-that-gets-higher-when-clicked/24543/4 "2020-10-12T16:07:10Z")

</div>

Sure

Core idea was

```auto
float energyCount = 0;

```

I increment energyCount slowly until it reaches energy

when displaying the bar, I use energyCount

```auto
  float energyWidth = (energyCount / MAX_ENERGY) * barWidth;

```

Chrisir