Hi,

I'm fairly new to Processing and have been playing around with ControlP5 to work on some UI for changing settings. I put some sliders in a Control P5 Group so that I could invoke them, change my settings and then go back to working on the canvas again. However, I discovered that after i invoke the sliders and then try to close the group to go back to the canvas, the sliders draw over the area of the canvas they occupied. I hope the following image helps highlight this issue.



Here is the test code I have been playing with:

1. import controlP5.*;
   
   ControlP5 cp5;
   int Opacity = 150;
   int Hue = 150;
   int Size = 5;
   
   void setup()
   {
     size(400, 400);
     smooth();
    
     cp5 = new ControlP5(this);
    
     Group g1 = cp5.addGroup("Properties")
                   .setPosition(0, height/15)
                   .setBarHeight(height/20)
                   .setWidth(width)
                   .setBackgroundHeight(74)
                   .setBackgroundColor(color(0, 50))
                   .setOpen(false)
                   ;
   
     cp5.addSlider("Hue")
        .setRange(0, 255)
        .setPosition(2, 5)
        .setSize(width/2 + width/4, 20)
        .setGroup(g1)
        ;
       
     cp5.addSlider("Opacity")
        .setRange(0, 255)
        .setPosition(2, 27)
        .setSize(width/2 + width/4, 20)
        .setGroup(g1)
        ;
       
     cp5.addSlider("Size")
        .setRange(1, 20)
        .setPosition(2, 49)
        .setSize(width/2 + width/4, 20)
        .setGroup(g1)
        ;  
   }
   
   void draw()
   {
   
   }
   
   void mouseDragged()
   {
     stroke(Hue, Opacity);
     strokeWeight(Size);
     line(mouseX, mouseY, pmouseX, pmouseY);
   }

Can anyone please help me with this and point out what noob mistake I'm making with this. Thank you.