How to make a stamina/health/progress bar?

kevo1414

Instead of a numbers (counter) I want to make a stamina bar but don't know how. I guess I can do this with rect() but don't know how to fill rect correctly? Any comment?

float stamina = 1000;

float sprint = - (stamina / 1800); // 1 minute. 60 * frameRate
float running = - (stamina / 81000); // 45 minutes. 60 * 45 * frameRate
float walking = - (stamina / 216000); // 2h, 120 minutes. 60 * 120 * frameRate
float resting = (stamina / 216000);

String status = "Status: ";
String action;

int leftMargin = 5;


void setup() {
  size(640, 360);
  frameRate(30);
}

void draw() {
  background(0);

  if (stamina <=0) {
    stamina = 0;
    fill(255, 0, 0);
    textAlign(CENTER);
    textSize(32);
    text("Stamina: " + (int) stamina, width/2, height/2);

    fill(255, 0, 0);
    textAlign(LEFT);
    textSize(16);
    text(status + "Out of stamina", leftMarging, 16);
  } else if (stamina >= 1000) {
    stamina = 1000;
    fill(0, 255, 0);
    textAlign(CENTER);
    textSize(32);
    text("Stamina: " + (int) stamina, width/2, height/2);

    fill(0, 255, 0);
    textAlign(LEFT);
    textSize(16);
    text(status + "Full stamina", leftMargin, 16);
  } else {
    fill(255);
    textAlign(CENTER);
    textSize(32);
    text("Stamina: " + (int) stamina, width/2, height/2);

    textAlign(LEFT);
    textSize(16);
    text(status + action, leftMargin, 16);
  }

  textAlign(LEFT);
  textSize(11);
  fill(255);
  text("S = Sprinting", leftMargin, height - 90);
  text("R = Running / Jogging", leftMargin, height - 70);
  text("W = Walking", leftMargin, height - 50);
  text("ENTER = Resting", leftMargin, height - 30);
  text("SPACE = Reset", leftMargin, height - 10);

  if (keyCode == 83) {
    stamina = stamina + sprint;
    action = "Sprinting";
  } else if (keyCode == 82) {
    stamina = stamina + running;
    action = "Runnning / Jogging";
  } else if (keyCode == 87) {
    stamina = stamina + walking;
    action = "Walking";
  } else if (keyCode == 10) {
    stamina = stamina + resting;
    action = "Resting";
  } else if (keyCode == 32) {
    stamina = 1000;
  }
}

Chrisir

See openprocessing on progress bar

xxMrPHDxx

You will need two rectangle. One for the total stamina probably red in color and one for your actual stamina in green. Then draw your total stamina under your actual stamina in the same x and y position using some scale to shrink the bar down. Hope this would give you some ideas.

Lord_of_the_Galaxy

If you could get some images on the type of progress bars you want, it would help tremendously.

xxMrPHDxx

Yeah. You probably could by scaling the width of the image, right?

Lord_of_the_Galaxy

Not really.

Chrisir

Just say

lengthRect=map(health,0,100,0,200);

rect(30,30,lengthRect, 20);

noFill();

rect(29,29,201,21);