Hi
I am trying to use Control P5 with a simple exampel I found at openprocessing. However I am not able to draw lines anymore if I choose to initiate ControlP5. If I comment out the ControlP5 everything works.

My guess is that controlP5 overdraws the canvas but I can't figure out how to synch them right.

main program - here controlSetup() is commented out and it is possible to draw on canvas. Try to commenting it in and the canvas becomes undrawable.

1. import controlP5.*;
   
   // Globals
   ControlP5 controlP5;
   ProceduralScribbler ps;
   public float rseed = 0.4; // seed value
   public float brushdist = 40.0; // brush distance sensitivity
   
   // Canvas
   int backgroundColor = 255;
   int strokeColor = 50;
   
   void setup(){
     size(900,600);
     background(backgroundColor);
     stroke(0, strokeColor);
     smooth();
     //controlSetup();
     ps = new ProceduralScribbler(0);
   }
   
   void draw(){
   
   }
   
   void mouseDragged(){
    
     ps.update(mouseX,mouseY);
   
   }
    
   void keyPressed(){
     if (key == ' ') {
       ps.reset();
     }
     if (key == 'm') {
       //controlP5.draw();
     } 
   }
   

scribble class

1. class ProceduralScribbler
   {
     ArrayList history = new ArrayList();
   
     int activeScribble = 0;
     public ProceduralScribbler(){}
    
     public ProceduralScribbler(int activeScribble)
     {
       activeScribble = activeScribble;
     }
   
     public void update(int mouse_x, int mouse_y)
     {
       switch(activeScribble)
       {
         case 0: // Sketchy
         {
           PVector d = new PVector(mouse_x,mouse_y,0);
           history.add(0,d);
           
           for (int p=0; p<history.size(); p++){
             PVector v = (PVector) history.get(p);
             float joinchance = p/history.size() + d.dist(v)/brushdist;
             if (joinchance < random(rseed)) 
             {
               line(d.x,d.y,v.x,v.y);
             }
           }
         }
         break;
         default: break;
       }
     }
    
     public void reset()
     {
       background(255);
       history.clear();
     }
   }
   

control code

1. // UI Group Position offsets
   public int groupxoffset = 0;
   public int groupyoffset = 10;
   public int groupwidth = 200;
   public int groupheigth = 80;
   
   // Menu element offsets
   public int worldoffset = 10;
   public int xoffset = 10;
   public int yoffset = 15;
   
   void controlSetup() {
   
     controlP5 = new ControlP5(this);
     //controlP5.setAutoDraw(false);
     //controlP5.setMoveable(false);
    
     // Group menu items
     ControlGroup ui = controlP5.addGroup("Settings", groupxoffset, groupyoffset, groupwidth);
     ui.setBackgroundColor(color(0, 200));
     ui.setBackgroundHeight(groupheigth);
     ui.mousePressed(); // Menu is hidden by default
    
     // Increment/decrement stuff in the world
     Textlabel textWorld = controlP5.addTextlabel("World", "World", xoffset, worldoffset);
     textWorld.setColorValue(color(200));
     Slider sliderRandom = controlP5.addSlider("Random", 0, 1, rseed, xoffset, worldoffset + yoffset*1, 100, 10);
     Slider sliderBrushDistance = controlP5.addSlider("Brush Dist", 0, 100, brushdist, xoffset, worldoffset + yoffset*2, 100, 10);
    
     // Assign ID to all menu items
     sliderRandom.setId(1);
     sliderBrushDistance.setId(2);
   
     // Add all menu items to the UI group
     textWorld.setGroup(ui);
     sliderRandom.setGroup(ui);
     sliderBrushDistance.setGroup(ui);
    
     // Reset values
     restoreDefault();
   }
    
   // Restore all variables to their default values
   void restoreDefault() {
   
     controlP5.controller("Random").setValue(rseed);
     controlP5.controller("Brush Dist").setValue(brushdist);
   }
    
   // Event handler
   void controlEvent(ControlEvent event) {
     switch(event.controller().id()) {
       case 1: { rseed = (int)event.controller().value(); break; }
       case 2: { brushdist = (int)event.controller().value(); break; }
     }
   }