# How to make a simple bar?

**URL:** <https://discourse.processing.org/t/how-to-make-a-simple-bar/27500>\
**Category:** Coding Questions\
**Created:** [January 31, 2021, 1:07pm UTC](https://discourse.processing.org/t/how-to-make-a-simple-bar/27500 "2021-01-31T13:07:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SNICKRS](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@SNICKRS](https://discourse.processing.org/u/SNICKRS)\
**Post date:** [January 31, 2021, 1:07pm UTC](https://discourse.processing.org/t/how-to-make-a-simple-bar/27500/1 "2021-01-31T13:07:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [January 31, 2021, 1:17pm UTC](https://discourse.processing.org/t/how-to-make-a-simple-bar/27500/2 "2021-01-31T13:17:39Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![SNICKRS](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@SNICKRS](https://discourse.processing.org/u/SNICKRS)\
**Post date:** [January 31, 2021, 1:53pm UTC](https://discourse.processing.org/t/how-to-make-a-simple-bar/27500/3 "2021-01-31T13:53:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [January 31, 2021, 8:14pm UTC](https://discourse.processing.org/t/how-to-make-a-simple-bar/27500/4 "2021-01-31T20:14:51Z")

</div>

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

> **Code**
>
> ```auto
> 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));
> }
> 
> ```