Centering loading bar

Processing Electronics (Arduino, etc.)
1

hello guys.
so I want to make a “loading bar” that shows RPM of motors in real time (for now it is just variable that is slowly growing). My bar is getting bigger but as it grows it is not centered (it grows up and down). I want it to grow just up. This is part of the code where comment says //vrijednost M1, it is also bolded.

import processing.serial.*;

Serial mySerial;

float a=0.0;
float b=0.0;

void setup() {
  //Pozadina
  size(1000, 1000);
  background(#838383);
  
}

//Model glavnog drona
void dron_main() {
  fill(#000000);
  ellipseMode(CENTER);
    ellipse(500, 400, 300, 300);

  beginShape();
    vertex(712, 682);
    vertex(217, 187);
    vertex(287, 117);
    vertex(782, 612);
  endShape(CLOSE);

  beginShape();
    vertex(217, 612);
    vertex(712, 117);
    vertex(782, 187);
    vertex(287, 682);
  endShape(CLOSE);

    ellipse(252, 152, 100, 100);
    ellipse(747, 152, 100, 100);
    ellipse(747, 647, 100, 100);
    ellipse(252, 647, 100, 100);
}
//Model animiranog drona
void dron_anim() {
  fill(#000000);
  ellipseMode(CENTER);
    ellipse(0, 0, 70, 70);

  beginShape();
    vertex(40, -55);
    vertex(-55, 40);
    vertex(-40, 55);
    vertex(55, -40);
  endShape(CLOSE);

  beginShape();
    vertex(-55, -40);
    vertex(40, 55);
    vertex(55, 40);
    vertex(-40, -55);
  endShape(CLOSE);

    ellipse(-48, 48, 20, 20);
    ellipse(48, 48, 20, 20);
    ellipse(-48, -48, 20, 20);
    ellipse(48, -48, 20, 20);
}

void motor1() {
  fill(#FF8C00);
  rectMode(CENTER);
    rect(252, 152, 75, 15);
    fill(#C0C0C0);
    rect(252, 123, 75, 45);
    fill(#FF8C00);
    rect(252, 93, 75, 15);
    fill(#C0C0C0);
    rect(252, 70, 10, 30);
    fill(#000000);
  textSize(32);
  text("M1", 230, 134);
}

void motor2() {
  fill(#FF8C00);
  rectMode(CENTER);
    rect(747, 152, 75, 15);
    fill(#C0C0C0);
    rect(747, 123, 75, 45);
    fill(#FF8C00);
    rect(747, 93, 75, 15);
    fill(#C0C0C0);
    rect(747, 70, 10, 30);
    fill(#000000);
  textSize(32);
  text("M2", 725, 134);
}

void motor3() {
  fill(#FF8C00);
  rectMode(CENTER);
    rect(252, 647, 75, 15);
    fill(#C0C0C0);
    rect(252, 618, 75, 45);
    fill(#FF8C00);
    rect(252, 589, 75, 15);
    fill(#C0C0C0);
    rect(252, 566, 10, 30);
    fill(#000000);
  textSize(32);
  text("M3", 230, 630);
}

void motor4() {
  fill(#FF8C00);
  rectMode(CENTER);
    rect(747, 647, 75, 15);
    fill(#C0C0C0);
    rect(747, 618, 75, 45);
    fill(#FF8C00);
    rect(747, 589, 75, 15);
    fill(#C0C0C0);
    rect(747, 566, 10, 30);
    fill(#000000);
  textSize(32);
  text("M4", 725, 630);
}

void draw() {
  background(#838383);

  //Pravokutnici na dnu
  rectMode(CORNERS);
    fill(#F2EF84);
    rect(0, 800, 250, 1000);
    fill(#FF7F1C);
    rect(250, 800, 500, 1000);
    fill(#6DCB4E);
    rect(500, 800, 750, 1000);
    fill(#374CCB);
    rect(750, 800, 1000, 1000);
  
  //Obrub pravokutnika     
  strokeWeight(5);
    line(250, 800, 250, 1000);
    line(500, 800, 500, 1000);
    line(750, 800, 750, 1000);
    line(999, 800, 999, 1000);
    line(0, 800, 1000, 800);
    line(0, 800, 0, 1000);
    line(0, 999, 1000, 999);
  strokeWeight(0);

  dron_main();

  motor1();
  motor2();
  motor3();
  motor4();
  
  //rotacija animiranog drona
  pushMatrix();
    translate(875, 900);
    rotate(a);
    dron_anim();
  popMatrix();
  textSize(16);
  text("Orjentacija", 830, 820);
  text("XX°", 865, 990);

  a+=.01;
  
  //rotacija y osi
  pushMatrix();
    translate(625, 900);
    rotate(a);
    strokeWeight(7);
    line(-45,0,45,0);
  popMatrix();
  textSize(16);
  text("Nagib y osi", 580, 820);
  text("XX°", 615, 990);
  
  //rotacija x osi
  pushMatrix();
    translate(375, 900);
    rotate(a);
    strokeWeight(7);
    line(-45,0,45,0);
  popMatrix();
  textSize(16);
  text("Nagib x osi", 330, 820);
  text("XX°", 360, 990);
  
  strokeWeight(0);
  
  //graficki prikaz throttle-a
  pushMatrix();
    translate(125, 900);
    rectMode(CENTER);
    rect(0, 100-a,100,b);
  popMatrix();
  textSize(16);
  text("Throttle", 92, 820);
  
  //vrijednost M1
  **textSize(16);**
**  text("XXXX RPM", 100, 180);**
**  rect(140, 160-(b/2),30,b);**
  
  //vrijednost M2
  textSize(16);
  text("XXXX RPM", 820, 180);
  rect(857, 160,30,b);
  
  //vrijednost M3
  textSize(16);
  text("XXXX RPM", 100, 180);
  rect(140, 160-a,30,b);
  
  //vrijednost M4
  textSize(16);
  text("XXXX RPM", 100, 180);
  rect(140, 160-a,30,b);
  
  
  b+=.05;
}
2 Likes
2

possibly the rectMode(CENTER)
inside draw, outside push/pop
confuses your BAR rect drawing.

test:

// rect as BAR

void setup() {
  noStroke();
  //rectMode(CENTER);
}
void draw() {
  background(200,200,0);
  fill(200,0,0);
  rect(10,height-10,10,-mouseY);
  fill(0,0,200);
  rect(25,height-10,mouseX,-10);
  fill(0);
  textSize(8);
  text("mX: "+mouseX+" mY: "+mouseY,10,height-2);
}

https://processing.org/reference/rectMode_.html

3 Likes