How to make a simple bar?

Processing Coding Questions
1

I want to make a simple bar that fills up when the value is positive, and the bar goes down when the value is negative. The only thing is, that when the value is at 0 it should be half filled. I have tried implenting this but cannot figure out how.

2 
int value=0;
int cur=0;

void setup() {
  size(400, 400);
}

void draw() {
  background(0);
  stroke(255);
  noFill();
  rect(100, 195, 200, 10);
  fill(255);
  text(value, 10, 10);
  if ( value == 0 ) {
    cur = 0;
  }
  if ( value > 0 && cur < 100 ) {
    cur++;
  }
  if ( value < 0 && cur > -100 ) {
    cur--;
  }
  rect(100, 195, 100+cur, 10);
}

void keyPressed() {
  value++;
}

void mousePressed() {
  value--;
}
3

thanks, this works! I had to tweak it to fit the value that I was mapping, but thanks for the code!

1 Like
4

here is my take on it. I noticed that the animation is a bit buggy, so I changed it.

Code 
float min = -10, max = 10;
float v = 0, dv, maxSpeed = 0.01; //v is between 0 and 1, 0 is min, 1 is max
float x = 300, y = 300, w = 500, h = 20;
void setup() {
  size(600,600);
}
void draw() {
  background(0);
  if(mousePressed) v = constrain(map(mouseX,x-w/2,x+w/2,0,1),0,1);
  float newSpeed = maxSpeed;
  
  if(abs(v - dv) < newSpeed) {
    dv = v;
  } else {
    if(v < dv) {
      dv-=newSpeed;
    } else {
      dv+=newSpeed;
    }
  }
  
  noFill();
  stroke(255);
  rect(x-w/2,y-h/2,w,h);
  fill(255);
  rect(x-w/2,y-h/2,w*dv,h);
  line(map(v,0,1,x-w/2,x+w/2),0,map(v,0,1,x-w/2,x+w/2),height);
  fill(255,0,0);
  rect(x-w/2,y-h/8,w*v,h/4);
  println(map(v,0,1,min,max));
}
1 Like