P5 slider (the graphics elements) moves to middle but the function stays in the right x, y

hive8

Strange behavior, or i did something wrong (most likely). The P5 slider graphics elements moves to the middle of the screen, but the overlay stays at the coordinates as specified. Could someone look at the code and see whats wrong with it.

       import controlP5;

        ControlP5 cp5;

        int sliderValue = 100;
        float theta = 0;

        void setup () {
          size (displayWidth, displayHeight);

          cp5 = new ControlP5(this);

          // add a horizontal sliders, the value of this slider will be linked
          // to variable 'sliderValue' 
          cp5.addSlider("sliderValue")
            .setWidth(200)
              .setPosition(20, 20)
                .setRange(0, 600)
                  .setCaptionLabel("CIRCLE DIAMETER")
                    ;


        }

        void draw () {
          background (0);
          ellipse(displayWidth/2, displayHeight/2, sliderValue, sliderValue);
          fill(234, 135, 87);


          translate(width/2, height/2);

          pushMatrix();
          rotate(theta);
          translate(100, 0);
          fill(50, 100, 100);
          ellipse(0, 0, 20, 20);
          popMatrix();

          theta += 0.05;
        }

        boolean sketchFullScreen() {
          return true;
        }

hive8

I actually figured it out :), I nested the pushMatrix wrong.

int sliderValue = 100;
float rotSpeed = 0.02;
float theta = 0;

void setup () {
  size (displayWidth, displayHeight);

  cp5 = new ControlP5(this);
  cp5.addSlider("sliderValue")
    .setSize(200, 15)
      .setPosition(20, 20)
        .setRange(0, 600)
          .setCaptionLabel("CIRCLE DIAMETER")
            ;

  cp5 = new ControlP5(this);
  cp5.addSlider("rotSpeed") 
    .setSize(200, 15)
      .setPosition(20, 45)
        .setRange(0.00, 0.50) 
          .setCaptionLabel("Rotation Speed")
            ;
}


void draw () {
  background(0);


  pushMatrix();
  translate(displayWidth/2, displayHeight/2);
  fill(255, 255, 0);
  ellipse(0, 0, sliderValue, sliderValue);


  pushMatrix();
  rotate(theta);
  translate(100, 0);
  fill(0, 100, 255);
  noStroke();
  ellipse(0, 0, 20, 20);
  popMatrix();

  theta += rotSpeed;
  popMatrix();
}

boolean sketchFullScreen() {
  return true;
}