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

Processing Coding Questions
1

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;
}
}

2 
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;
  }
}
3

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

4

Sure

Core idea was

float energyCount = 0;

I increment energyCount slowly until it reaches energy

when displaying the bar, I use energyCount

  float energyWidth = (energyCount / MAX_ENERGY) * barWidth;

Chrisir

1 Like