slider freezing

edited March 2017 in Questions about Code

``I should work from rgb to hsb , but for some reason the sliders are freezing I got the color right at least ( more ore less ) Slider RSlider ; Slider GSlider ; Slider BSlider ; Slider HSlider ; Slider SSlider ; Slider VSlider ; float rs = 0, gs=0, bs=0, hs=0, ss=0, vs=0; color filler = color(rs, gs, bs); color filler2= color (hs, ss, vs);

void setup()
{  
  size(1200, 500);
  RSlider = new Slider (150, 350, "R");
  GSlider = new Slider (150, 400, "G");
  BSlider = new Slider (150, 450, "B");
  HSlider = new Slider (450, 350, "H");
  SSlider = new Slider (450, 400, "S");
  VSlider = new Slider (450, 450, "V");

  RSlider.lock();
  GSlider.lock();
  BSlider.lock();
  HSlider.lock();
  SSlider.lock();
  VSlider.lock();
}

void draw()
{ 
  background (255);
  colorMode(RGB, 255);
  fill(0, 0, 0);
  rect(0, 300, width, height-300);
  RSlider.display();
  GSlider.display();
  BSlider.display();
  HSlider.display();
  SSlider.display();
  VSlider.display();
  if (mouseX>0&&mouseX<=150+180) {
    float rs = map(RSlider.x, RSlider.rctx, 180, 0, 255);  
    float bs = map(BSlider.x, BSlider.rctx, 180, 0, 255); 
    float gs = map(GSlider.x, GSlider.rctx, 180, 0, 255);
    fill(rs, gs, bs);
    rect(0, 0, width, height-200);
  }
  if (mouseX>330&&mouseX<width) {
    colorMode(HSB, 255);
    HSlider.x=(int)hue(filler);
    SSlider.x=(int)saturation(filler);
    VSlider.x=(int)brightness(filler);
    float hs = map(HSlider.x, HSlider.rctx, 180, 0, 255);  
    float ss = map(SSlider.x, SSlider.rctx, 180, 0, 255); 
    float vs = map(VSlider.x, VSlider.rctx, 180, 0, 255); 
    fill(hs, ss, vs);
    rect(0, 0, width, height-200);
  }
}

void mousePressed()
{
  RSlider.unlock();
  GSlider.unlock();
  BSlider.unlock();
  HSlider.unlock();
  SSlider.unlock();
  VSlider.unlock();
}
void mouseDragged()
{
  RSlider.drag();
  GSlider.drag();
  BSlider.drag();
  HSlider.drag();
  SSlider.drag();
  VSlider.drag();
}
void mouseReleased()
{
  RSlider.lock();
  GSlider.lock();
  BSlider.lock();
  HSlider.lock();
  SSlider.lock();
  VSlider.lock();
}
class Slider 
{ 
  //  Slider mySlider ; // ?????????????????????????????????????
  PFont f;
  float x, y, 
  w=180, h = 10, 
  rctx;
  String text;
  boolean locked ;

  Slider (int x, int y, String text  ) {
    rctx=x;
    this.x = x ;
    this.y = y ;
    locked = true ;
    this.text=text;
    f = createFont(text, 20, true);
    textFont(f);
  }

  void lock () 
  {
    locked = true ;
  }

  void unlock ()
  {
    if (mouseX>=x-(w/2) && 
      mouseX<= x+(w/2) &&
      mouseY>= (y)-(h/2) &&
      mouseY<= (y)+(h/2))
      locked = false;
  }

  void drag() 
  {
    if (!locked)
    {
      x=mouseX;
    }
  }

  void display()
  { 
    x=constrain (x, rctx, rctx+w);
    fill(200, 200, 200);
    rect(rctx, y, 180, 10);
    ellipse(x, y+5, 20, 20);
    text(text, rctx-40, y+12 );
  }//method
  //
}// class

Answers

  • this

          void drag() 
          {
            if (!locked)
            {
              x=mouseX;
            }
          }
    

    won't work.

    this:

    f = createFont(text, 20, true);
    textFont(f);
    

    why do you have a textFont H or R ??

    in 32-34 and 42 - 45 you used float so those were local vars forgetting immediately there values. But you want the vars from before setup in fact.

        Slider RSlider ; 
        Slider GSlider ; 
        Slider BSlider ; 
        Slider HSlider ; 
        Slider SSlider ; 
        Slider VSlider ; 
    
        float rs = 0, gs=0, bs=0, 
          hs=0, ss=0, vs=0; 
    
        //color filler = color(rs, gs, bs); 
        //color filler2= color (hs, ss, vs);
    
        int lastWas = 1; 
    
        void setup()
        {  
          size(1200, 500);
          RSlider = new Slider (150, 350, "R");
          GSlider = new Slider (150, 400, "G");
          BSlider = new Slider (150, 450, "B");
    
          HSlider = new Slider (450, 350, "H");
          SSlider = new Slider (450, 400, "S");
          VSlider = new Slider (450, 450, "V");
    
          RSlider.lock();
          GSlider.lock();
          BSlider.lock();
    
          HSlider.lock();
          SSlider.lock();
          VSlider.lock();
        }
    
        void draw()
        { 
          background (255);
          colorMode(RGB, 255);
    
          //fill(0, 0, 0);
          //rect(0, 300, width, height-300);
          println(lastWas);
          if (lastWas==1) {
            colorMode(RGB, 255);
            fill(rs, gs, bs);
            rect(0, 0, width, height-200);
          } else if (lastWas==2) {
            colorMode(HSB, 255);
            fill(hs, ss, vs);
            rect(0, 0, width, height-200);
            colorMode(RGB, 255);
          }
    
          RSlider.display();
          GSlider.display();
          BSlider.display();
          HSlider.display();
          SSlider.display();
          VSlider.display();
    
          if (mouseX>0&&mouseX<=420&&mousePressed) {
            rs = map(RSlider.x, RSlider.rctx, RSlider.rctx + 180, 0, 255);  
            gs = map(GSlider.x, GSlider.rctx, GSlider.rctx + 180, 0, 255);
            bs = map(BSlider.x, BSlider.rctx, BSlider.rctx + 180, 0, 255);
            lastWas = 1;
          }
          if (mouseX>420&&mouseX<width&&mousePressed) {
            //HSlider.x=(int)hue(filler);
            //SSlider.x=(int)saturation(filler);
            //VSlider.x=(int)brightness(filler);
            hs = map(HSlider.x, HSlider.rctx, HSlider.rctx+180, 0, 255);  
            ss = map(SSlider.x, SSlider.rctx, SSlider.rctx+180, 0, 255); 
            vs = map(VSlider.x, VSlider.rctx, VSlider.rctx+180, 0, 255);
            lastWas = 2;
          }
        }
    
        // -------------------------------------------------------------
    
        void mousePressed()
        {
          RSlider.unlock();
          GSlider.unlock();
          BSlider.unlock();
          HSlider.unlock();
          SSlider.unlock();
          VSlider.unlock();
        }
        void mouseDragged()
        {
          RSlider.drag();
          GSlider.drag();
          BSlider.drag();
          HSlider.drag();
          SSlider.drag();
          VSlider.drag();
        }
        void mouseReleased()
        {
          RSlider.lock();
          GSlider.lock();
          BSlider.lock();
          HSlider.lock();
          SSlider.lock();
          VSlider.lock();
        }
    
    
        // =============================================================
    
        class Slider 
        { 
          //  PFont f;
          float x, y, 
            w=180, h = 10, 
            rctx;
          String text;
          boolean locked = true ;
    
          Slider (int x, int y, 
            String text  ) {
            this.rctx=x;
            this.x = x ;
            this.y = y ;
            this.text=text;
            //f = createFont(text, 20, true);
            //textFont(f);
          }
    
          void lock () 
          {
            locked = true ;
          }
    
          void unlock ()
          {
            if (mouseX>=x-(22/2) && 
              mouseX<= x+(22/2) &&
              mouseY>= y-(h/2) &&
              mouseY<= y+6+(h/2))
              locked = false;
          }
    
          void drag() 
          {
            if (!locked)
            {
              x+=(mouseX-pmouseX);
            }
          }
    
          void display()
          { 
            colorMode(RGB, 255);
    
            x=constrain (x, rctx, rctx+w);
    
            fill(200, 200, 200);
            rect(rctx, y, 180, 10);
    
            ellipse(x, y+5, 20, 20);
            text(text, rctx-40, y+12 );
          }//method
          //
        }// class
        //
    
  • edited March 2017

    Oh yeah , forgot to mention when rgb sliders change hsb sliders should change accordingly and viceversa . This is why I initialized all those values .

  • I see a corrected a bunch of other things

    you should try this now yourself:

    when rgb sliders change hsb sliders should change accordingly and viceversa

  • edited March 2017

    in the mean time this is what I did btw . Nothing is changing though why ? Slider RSlider ; Slider GSlider ; Slider BSlider ; Slider HSlider ; Slider SSlider ; Slider VSlider ; float rs, gs, bs, hs, ss, vs; color filler = color(rs, gs, bs); color filler2= color (hs, ss, vs);

        void setup()
        {  
          size(1200, 500);
          RSlider = new Slider (150, 350, "R");
          GSlider = new Slider (150, 400, "G");
          BSlider = new Slider (150, 450, "B");
          HSlider = new Slider (450, 350, "H");
          SSlider = new Slider (450, 400, "S");
          VSlider = new Slider (450, 450, "V");
    
          RSlider.lock();
          GSlider.lock();
          BSlider.lock();
          HSlider.lock();
          SSlider.lock();
          VSlider.lock();
        }
    
        void draw()
        { 
          background (255);
          colorMode(RGB, 255);
          fill(0, 0, 0);
          rect(0, 300, width, height-300);
          RSlider.display();
          GSlider.display();
          BSlider.display();
          HSlider.display();
          SSlider.display();
          VSlider.display();
    
          //if (mouseX>0&&mouseX<=330) {
          //colorMode(RGB, 255);
          if (mouseButton==LEFT) {
            if (mouseX>=RSlider.x&&mouseX<=RSlider.x+180) {
              if (mouseY>=RSlider.x&&mouseY<=RSlider.w+10) {
                float rs = map(RSlider.x, RSlider.rctx, RSlider.rctx+180, 0, 255);
                fill(filler);
                rect(0, 300, width, height-300);
                hs=hue(filler);
                HSlider.move((int)map(hs, 0, 255, HSlider.x, HSlider.rctx+180));
                ss=saturation(filler);
                SSlider.move((int)map(ss, 0, 255, SSlider.x, SSlider.rctx+180));
                vs=brightness(filler);
                VSlider.move((int)map(vs, 0, 255, VSlider.x, VSlider.rctx+180));
              }
            }
          }
          if (mouseButton==LEFT) {
            if (mouseX>=GSlider.x&&mouseX<=GSlider.x+180) {
              if (mouseY>=GSlider.x&&mouseY<=GSlider.w+10) {
                float gs = map(GSlider.x, GSlider.rctx, GSlider.rctx+180, 0, 255);
                fill(filler);
                rect(0, 300, width, height-300);
                hs=hue(filler);
                HSlider.move((int)map(hs, 0, 255, HSlider.x, HSlider.rctx+180));
                ss=saturation(filler);
                SSlider.move((int)map(ss, 0, 255, SSlider.x, SSlider.rctx+180));
                vs=brightness(filler);
                VSlider.move((int)map(vs, 0, 255, VSlider.x, VSlider.rctx+180));
              }
            }
          }
          if (mouseButton==LEFT) {
            if (mouseX>=BSlider.x&&mouseX<=BSlider.x+180) {
              if (mouseY>=BSlider.x&&mouseY<=BSlider.w+10) {
                float bs = map(BSlider.x, BSlider.rctx, BSlider.rctx+180, 0, 255);
                fill(filler);
                rect(0, 300, width, height-300);
                hs=hue(filler);
                HSlider.move((int)map(hs, 0, 255, HSlider.x, HSlider.rctx+180));
                ss=saturation(filler);
                SSlider.move((int)map(ss, 0, 255, SSlider.x, SSlider.rctx+180));
                vs=brightness(filler);
                VSlider.move((int)map(vs, 0, 255, VSlider.x, VSlider.rctx+180));
              }
            }
          }
    
          if (mouseButton==LEFT) {
            if (mouseX>=HSlider.x&&mouseX<=HSlider.x+180) {
              if (mouseY>=HSlider.x&&mouseY<=HSlider.w+10) {
                colorMode(HSB,255);
                float hs = map(HSlider.x, HSlider.rctx, HSlider.rctx+180, 0, 255);
                fill(filler2);
                rect(0, 300, width, height-300);
                rs=red(filler2);
                RSlider.move((int)map(rs, 0, 255, RSlider.x, RSlider.rctx+180));
                gs=green(filler2);
                GSlider.move((int)map(gs, 0, 255, GSlider.x, GSlider.rctx+180));
                bs=blue(filler2);
                BSlider.move((int)map(bs, 0, 255, BSlider.x, BSlider.rctx+180));
              }
            }
          }
          if (mouseButton==LEFT) {
            if (mouseX>=SSlider.x&&mouseX<=SSlider.x+180) {
              if (mouseY>=SSlider.x&&mouseY<=SSlider.w+10) {
                colorMode(HSB,255);
                float ss = map(SSlider.x, SSlider.rctx, SSlider.rctx+180, 0, 255);
                fill(filler2);
                rect(0, 300, width, height-300);
                rs=red(filler2);
                RSlider.move((int)map(rs, 0, 255, RSlider.x, RSlider.rctx+180));
                gs=green(filler2);
                GSlider.move((int)map(gs, 0, 255, GSlider.x, GSlider.rctx+180));
                bs=blue(filler2);
                BSlider.move((int)map(bs, 0, 255, BSlider.x, BSlider.rctx+180));
              }
            }
          }
          if (mouseButton==LEFT) {
            if (mouseX>=VSlider.x&&mouseX<=VSlider.x+180) {
              if (mouseY>=VSlider.x&&mouseY<=VSlider.w+10) {
                colorMode(HSB,255);
                float vs = map(VSlider.x, VSlider.rctx, VSlider.rctx+180, 0, 255);
                fill(filler2);
                rect(0, 300, width, height-300);
                rs=red(filler2);
                RSlider.move((int)map(rs, 0, 255, RSlider.x, RSlider.rctx+180));
                gs=green(filler2);
                GSlider.move((int)map(gs, 0, 255, GSlider.x, GSlider.rctx+180));
                bs=blue(filler2);
                BSlider.move((int)map(bs, 0, 255, BSlider.x, BSlider.rctx+180));
              }
            }
          }
        }
        // float bs = map(BSlider.x, BSlider.rctx, GSlider.rctx+180, 0, 255); 
        //float gs = map(GSlider.x, GSlider.rctx, BSlider.rctx+180, 0, 255);
        //color c=color(rs, bs, gs);
    
        //}
        //if (mouseX>330&&mouseX<width) {
    
        /**  colorMode(HSB, 255);
         float hs = map(HSlider.x, HSlider.rctx, HSlider.rctx+180, 0, 255);  
         float ss = map(SSlider.x, SSlider.rctx, SSlider.rctx+180, 0, 255); 
         float vs = map(VSlider.x, VSlider.rctx, VSlider.rctx+180, 0, 255); 
         fill(hs, ss, vs);
         //}
         rect(0, 0, width, height-200);
         }
         **/
        void mousePressed()
        {
          RSlider.unlock();
          GSlider.unlock();
          BSlider.unlock();
          HSlider.unlock();
          SSlider.unlock();
          VSlider.unlock();
        }
        void mouseDragged()
        {
          RSlider.drag();
          GSlider.drag();
          BSlider.drag();
          HSlider.drag();
          SSlider.drag();
          VSlider.drag();
        }
        void mouseReleased()
        {
          RSlider.lock();
          GSlider.lock();
          BSlider.lock();
          HSlider.lock();
          SSlider.lock();
          VSlider.lock();
        }
        class Slider 
        { 
          //  Slider mySlider ; // ?????????????????????????????????????
          PFont f;
          int x, y, 
          w=180, h = 10, 
          rctx;
          String text;
          boolean locked ;
    
          Slider (int x, int y, String text  ) {
            rctx=x;
            this.x = x ;
            this.y = y ;
            locked = true ;
            this.text=text;
            f = createFont(text, 20, true);
            textFont(f);
          }
    
          void lock () 
          {
            locked = true ;
          }
    
          void unlock ()
          {
            if (mouseX>=x-(w/2) && 
              mouseX<= x+(w/2) &&
              mouseY>= (y)-(h/2) &&
              mouseY<= (y)+(h/2))
              locked = false;
          }
          void move(int x){
            x=this.x;
          }
    
          void drag() 
          {
            if (!locked)
            {
              x=mouseX;
            }
          }
    
          void display()
          { 
            x=constrain (x, rctx, rctx+w);
            fill(200, 200, 200);
            rect(rctx, y, 180, 10);
            ellipse(x, y+5, 20, 20);
            text(text, rctx-40, y+12 );
          }//method
          //
        }// class
    
  • edited March 2017

    as I said better work with my version, yours has too many errors

    a few errors I already told you and you ignored it. Bad.

    another error that is corrected only in my code (which you ignored as well):

    This

        fill(filler);
        rect(0, 300, width, height-300);
    

    is inside the ifs. That's why it doesn't have effect.

    Solution: see my code.

  • edited March 2017

    this is a mess:

      if (mouseButton==LEFT) {
        if (mouseX>=SSlider.x&&mouseX<=SSlider.x+180) {
          if (mouseY>=SSlider.x&&mouseY<=SSlider.w+10) {
    

    here some corrections:

      if (mouseButton==LEFT) {
        if (mouseX>=SSlider.x-22!!!!!!! &&mouseX<=SSlider.x+180) {
          if (mouseY>=SSlider.y!!!!!! &&mouseY<=SSlider.y!!!!!+!!!SSlider.w+10) {
    

    I rewrote pretty much all of your code now.

    What bothers me is that we still check on which slider we work from draw (see above if (mouseX>=SSlider.x-22....) and check it inside the class. It would be much better to have it only inside the class and each slider has a unique ID to give back to draw and draw decides which color to change.

    One thing

    One thing I changed throughout: your x in the class was ambiguous. I think it had sometimes an absolute value (where the ellipse is measured from the window border on the left side) and sometimes a relative value (measured from the left side of the current slider). I made it so, that always the last way is used (measured from the left side of the current slider). This means x is for every slider between 0 and w (not matter where the slider is).

    Where the slider is is stored in rctX.

    But this change (that x is only between 0 and w) brought a lot of changes throughout your code. E.g. I invented a new function in your class:

      float getXabsolute() {
        return x+rctX;
      }
    

    Also constrain is now:

        x=constrain (x, 0, w);
    

    Also in the constructor we set rctX from the parameter x but not this.x, the x in the class (since this is initially 0).

          rctX = x;
    

    we draw the ellipse on the slider as

      ellipse(rctX+x, y+5, 20, 20); // !!!!!!!!!!!!!!!! rctX+x
    

    Best, Chrisir ;-)

    Slider RSlider ; 
    Slider GSlider ; 
    Slider BSlider ;
    
    Slider HSlider ; 
    Slider SSlider ; 
    Slider VSlider ;
    
    float rs, gs, bs, hs, ss, vs;
    
    color filler = color(rs, gs, bs); 
    color filler2= color (hs, ss, vs);
    
    int lastWas=1;
    
    // --------------------------------------------------
    
    void setup()
    {  
      size(1200, 500);
    
      RSlider = new Slider (150, 350, "R");
      GSlider = new Slider (150, 400, "G");
      BSlider = new Slider (150, 450, "B");
    
      HSlider = new Slider (450, 350, "H");
      SSlider = new Slider (450, 400, "S");
      VSlider = new Slider (450, 450, "V");
    
      RSlider.lock();
      GSlider.lock();
      BSlider.lock();
      HSlider.lock();
      SSlider.lock();
      VSlider.lock();
    }
    
    void draw()
    { 
      background (255);
    
      if (lastWas==1) {
        colorMode(RGB, 255);
        fill(filler);
        rect(0, 0, width, height-300);
      } else   if (lastWas==2) {
        colorMode(HSB, 255);
        fill(filler2);
        rect(0, 0, width, height-300);
      }
    
      RSlider.display();
      GSlider.display();
      BSlider.display();
      HSlider.display();
      SSlider.display();
      VSlider.display();
    
      if (mouseButton==LEFT) {
        evalMouse();
      } // if
    }// func 
    
    // ---------------------------------------------------------
    
    void evalMouse() {  
    
      // -----------------------------------------------------------
      // RGB 
    
      if (mouseX>=RSlider.getXabsolute()-22&&mouseX<=RSlider.getXabsolute()+22 && 
        mouseY>=RSlider.y-22&&mouseY<=RSlider.y+22) {
    
        rs = map(RSlider.x, 0, RSlider.w, 0, 255);
        filler = color(rs, gs, bs); 
        setHSBfromRGB();
      }
    
      if (mouseX>=GSlider.getXabsolute()-22&&mouseX<=GSlider.getXabsolute()+22 && 
        mouseY>=GSlider.y-22&&mouseY<=GSlider.y+GSlider.w+10) {
    
        gs = map(GSlider.x, 0, GSlider.w, 0, 255);
        filler = color(rs, gs, bs);
        setHSBfromRGB();
      }
    
      if (mouseX>=BSlider.getXabsolute()-22&&mouseX<=BSlider.getXabsolute()+22 && 
        mouseY>=BSlider.y-22&&mouseY<=BSlider.y+BSlider.w+10) {
    
        bs = map(BSlider.x, 0, BSlider.w, 0, 255);
        filler = color(rs, gs, bs); 
        setHSBfromRGB();
      }
    
      // -----------------------------------------------------------
      // HSB 
    
      if (mouseX>=HSlider.getXabsolute()-22&&mouseX<=HSlider.getXabsolute()+22 && 
        mouseY>=HSlider.y-22&&mouseY<=HSlider.y+HSlider.w+10) {
    
        colorMode(HSB, 255);
        hs = map(HSlider.x, 0, HSlider.w, 0, 255);
        filler2= color (hs, ss, vs);
        setRGBfromHSB();
      }
    
      if (mouseX>=SSlider.getXabsolute()-22&&mouseX<=SSlider.getXabsolute()+22 && 
        mouseY>=SSlider.y-22&&mouseY<=SSlider.y+SSlider.w+10) {
    
        colorMode(HSB, 255);
        ss = map(SSlider.x, 0, SSlider.w, 0, 255);
        filler2= color (hs, ss, vs);
        setRGBfromHSB();
      }
    
      if (mouseX>=VSlider.getXabsolute()-22&&mouseX<=VSlider.getXabsolute()+22 && 
        mouseY>=VSlider.y-22&&mouseY<=VSlider.y+VSlider.w+10) {
    
        colorMode(HSB, 255);
        vs = map(VSlider.x, 0, VSlider.w, 0, 255);
        filler2= color (hs, ss, vs);
        setRGBfromHSB();
      }
      //
    }//func 
    
    // --------------------------------------------------------
    
    void setHSBfromRGB() {
    
      hs=hue(filler);
      HSlider.move((int)map(hs, 0, 255, 0, HSlider.w));
      ss=saturation(filler);
      SSlider.move((int)map(ss, 0, 255, 0, SSlider.w));
      vs=brightness(filler);
      VSlider.move((int)map(vs, 0, 255, 0, VSlider.w));
      lastWas=1;
    }
    
    void setRGBfromHSB() {
    
      rs=red(filler2);
      RSlider.move((int)map(rs, 0, 255, 0, RSlider.w));
      gs=green(filler2);
      GSlider.move((int)map(gs, 0, 255, 0, GSlider.w));
      bs=blue(filler2);
      BSlider.move((int)map(bs, 0, 255, 0, BSlider.w));
      lastWas=2;
    }
    
    // --------------------------------------------------
    
    void mousePressed()
    {
      RSlider.unlock();
      GSlider.unlock();
      BSlider.unlock();
      HSlider.unlock();
      SSlider.unlock();
      VSlider.unlock();
    }
    
    void mouseDragged()
    {
      RSlider.drag();
      GSlider.drag();
      BSlider.drag();
      HSlider.drag();
      SSlider.drag();
      VSlider.drag();
    }
    
    void mouseReleased()
    {
      RSlider.lock();
      GSlider.lock();
      BSlider.lock();
      HSlider.lock();
      SSlider.lock();
      VSlider.lock();
    }
    
    // ==================================================================
    
    class Slider 
    { 
      //  PFont f;
      int x, y, 
        w=180, h = 10, 
        rctX;
      String text;
      boolean  locked = true ;
    
      Slider (int x, int y, String text  ) {
        rctX=x;
        //  this.x = 0 ; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! x is 0 
        this.y = y ;
        this.text=text;
        //f = createFont(text, 20, true);
        //textFont(f);
      }
    
      void lock () 
      {
        locked = true ;
      }
    
      void unlock ()
      {
        if (mouseX>=getXabsolute()-(w/2) && 
          mouseX<= getXabsolute()+(w/2) &&
          mouseY>= y-(h/2) &&
          mouseY<= y+22+(h/2))
          locked = false;
      }
    
      void move(int xTemp) {
        //x=this.x; //////////////////you had THIS!!!!!!!!!!!other way round
        x = xTemp;
        x=constrain (x, 0, w);
      }
    
      void drag() 
      {
        if (!locked)
        {
          // x=mouseX;//////////////// YOU HAD THIS 
          x+=(mouseX-pmouseX);
          x=constrain (x, 0, w);
        }
      }
    
      float getXabsolute() {
        return x+rctX;
      }
    
      void display()
      {
        colorMode(RGB, 255);
        x=constrain (x, 0, w);
        fill(200, 200, 200);
        rect(rctX, y, 180, 10);
        ellipse(rctX+x, y+5, 20, 20); // !!!!!!!!!!!!!!!! rctX+x
        text(text, rctX-40, y+12 );
      }//method
      //
    }// class
    //
    
  • edited March 2017 Answer ✓

    I wrote:

    What bothers me is that we still check on which slider we work from draw (see above if (mouseX>=SSlider.x-22....) and check it inside the class.

    I worked on that and we only check it inside the class now.

    The new variable lastSliderName tells us which slider was moved last and whether we copy from rgb to hsb or vice versa.

    Also, we don't care anymore if slider HSlider or SSlider or VSlider was changed for the lines of type hs = map(HSlider.x, 0, HSlider.w, 0, 255);; we just always read all three sliders when lastSliderName tells us, whether rgb or hsb slider group has been changed.

    Slider RSlider ; 
    Slider GSlider ; 
    Slider BSlider ;
    
    Slider HSlider ; 
    Slider SSlider ; 
    Slider VSlider ;
    
    float rs, gs, bs, hs, ss, vs;
    
    color filler1 = color(rs, gs, bs); 
    color filler2= color (hs, ss, vs);
    
    int lastWas=1;
    
    String lastSliderName=""; 
    
    // --------------------------------------------------
    
    void setup()
    {  
      size(1200, 500);
    
      RSlider = new Slider (150, 350, "R");
      GSlider = new Slider (150, 400, "G");
      BSlider = new Slider (150, 450, "B");
    
      HSlider = new Slider (450, 350, "H");
      SSlider = new Slider (450, 400, "S");
      VSlider = new Slider (450, 450, "V");
    }
    
    void draw()
    { 
      background (255);
    
      if (lastWas==1) {
        colorMode(RGB, 255);
        fill(filler1);
        rect(0, 0, width, height-300);
      } else   if (lastWas==2) {
        colorMode(HSB, 255);
        fill(filler2);
        rect(0, 0, width, height-300);
      }
    
      RSlider.display();
      GSlider.display();
      BSlider.display();
      HSlider.display();
      SSlider.display();
      VSlider.display();
    
      if (mouseButton==LEFT) {
        evalMouse();
      } // if
    }// func 
    
    // ---------------------------------------------------------
    
    void evalMouse() {  
    
      // -----------------------------------------------------------
      // RGB 
      if ("RGB".indexOf(lastSliderName)>=0) {
        rs = map(RSlider.x, 0, RSlider.w, 0, 255);
        gs = map(GSlider.x, 0, GSlider.w, 0, 255);
        bs = map(BSlider.x, 0, BSlider.w, 0, 255);
        filler1 = color(rs, gs, bs); 
        setHSBfromRGB();
      }
      // -----------------------------------------------------------
      // HSB 
      else if ("HSV".indexOf(lastSliderName)>=0) {
        colorMode(HSB, 255);
        hs = map(HSlider.x, 0, HSlider.w, 0, 255);
        ss = map(SSlider.x, 0, SSlider.w, 0, 255);
        vs = map(VSlider.x, 0, VSlider.w, 0, 255);
        filler2= color (hs, ss, vs);
        setRGBfromHSB();
      }
      //
    }//func 
    
    // --------------------------------------------------------
    
    void setHSBfromRGB() {
    
      hs=hue(filler1);
      HSlider.move((int)map(hs, 0, 255, 0, HSlider.w));
      ss=saturation(filler1);
      SSlider.move((int)map(ss, 0, 255, 0, SSlider.w));
      vs=brightness(filler1);
      VSlider.move((int)map(vs, 0, 255, 0, VSlider.w));
      lastWas=1;
    }
    
    void setRGBfromHSB() {
    
      rs=red(filler2);
      RSlider.move((int)map(rs, 0, 255, 0, RSlider.w));
      gs=green(filler2);
      GSlider.move((int)map(gs, 0, 255, 0, GSlider.w));
      bs=blue(filler2);
      BSlider.move((int)map(bs, 0, 255, 0, BSlider.w));
      lastWas=2;
    }
    
    // --------------------------------------------------
    
    void mousePressed()
    {
      if (RSlider.unlock()) lastSliderName=RSlider.text;
      if (GSlider.unlock()) lastSliderName=GSlider.text;
      if (BSlider.unlock()) lastSliderName=BSlider.text;
    
      if (HSlider.unlock()) lastSliderName=HSlider.text;
      if (SSlider.unlock()) lastSliderName=SSlider.text;
      if (VSlider.unlock()) lastSliderName=VSlider.text;
    }
    
    void mouseDragged()
    {
      RSlider.drag();
      GSlider.drag();
      BSlider.drag();
      HSlider.drag();
      SSlider.drag();
      VSlider.drag();
    }
    
    void mouseReleased()
    {
      RSlider.lock();
      GSlider.lock();
      BSlider.lock();
      HSlider.lock();
      SSlider.lock();
      VSlider.lock();
    }
    
    // ==================================================================
    
    class Slider 
    { 
      int x, y, 
        w=180, h = 10, 
        rctX;
      String text;
      boolean  locked = true ;
    
      // constructor
      Slider (int xTemp, int yTemp, 
        String textTemp  ) {
        this.rctX = xTemp;
        this.y    = yTemp;
        this.text = textTemp;
      } // constructor
    
      void lock () 
      {
        locked = true ;
      }
    
      boolean unlock ()
      {
        // returns true when sucessfully unlocked 
        if (mouseX>=getXabsolute()-(w/2) && 
          mouseX<= getXabsolute()+(w/2) &&
          mouseY>= y-(h/2) &&
          mouseY<= y+22+(h/2)) {
          locked = false;
          return true;
        }
        return false;
      }
    
      void move(int xTemp) {
        x = xTemp;
        x=constrain (x, 0, w);
      }
    
      void drag() 
      {
        if (!locked)
        {
          x+=(mouseX-pmouseX);
          x=constrain (x, 0, w);
        }
      }
    
      float getXabsolute() {
        return x+rctX;
      }
    
      void display()
      {
        colorMode(RGB, 255);
        x=constrain (x, 0, w);
        fill(200, 200, 200);
        rect(rctX, y, 180, 10);
        ellipse(rctX+x, y+5, 20, 20);
        text(text, rctX-40, y+12 );
      }//method
      //
    }// class
    //
    
Sign In or Register to comment.