Hey guys, I need your help please :( Color Slider

AlexaMona

I am very new to coding and am trying to write a code to create three sliders that will change the color of a rectangle. I do not know how to get the slider to go back in x value (left). I'm don't know what went wrong. Thank you :)

class Slider{
  float x;
  float y;
  boolean isPressed;
void drawObject(){
    stroke(0);
    strokeWeight(2);
    fill(255);
    rect(x,y,25,50);
 }

void updateObject(boolean changeSlider){
    if(x > 305){
    x = 305;
 }
    if(x < 50){
    x = 50;
}
}

boolean hitTest(float xClicked, float yClicked){
    if(xClicked > x && xClicked < x+25 && yClicked > y && yClicked < y+50){
        x=mouseX;
        return true;
}
        return false;
}
}

Slider S1;
Slider S2;
Slider S3;

void setup(){
  size(500,500);
  S1 = new Slider();
  S2 = new Slider();
  S3 = new Slider();
  S1.x = 50;
  S1.y = 100;
  S2.x = 50;
  S2.y = 200;
  S3.x = 50;
  S3.y = 300;
  S1.updateObject(true);
  S2.updateObject(true);
  S3.updateObject(true);
}

void draw(){
  background(120);
  S1.updateObject(false);
  S2.updateObject(false);
  S3.updateObject(false);
  S1.drawObject();
  S2.drawObject();
  S3.drawObject();
  fill(S1.x,S2.x,S3.x);
  rect(400,100,100,300);
}

void mouseDragged(){
  if(S1.hitTest(mouseX,mouseY)){
      S1.isPressed = !S1.isPressed;
      if(!S1.isPressed){
           S1.updateObject(true);
}
}

  if(S2.hitTest(mouseX,mouseY)){
      S2.isPressed = !S2.isPressed;
      if(!S2.isPressed){
         S2.updateObject(true);
}
}

  if(S3.hitTest(mouseX,mouseY)){
      S3.isPressed = !S3.isPressed;
      if(!S3.isPressed){
            S3.updateObject(true);

}
}
}

AlexaMona

Hopefully this is easy to understand.

benja

To move your sliders to the left, you would have to decrease 'x'. So the mouseX would have to be lower than x. In this case your hitTest() would fail. So it will never happen. Open option would be to use pmouseX and the following line to set the new x-value:

x += mouseX-pmouseX;

This still won't work when you move your mouse too fast, so a better solution would be something like this (simplified version with only one slider):

class Slider {
  float x;
  float y;
  boolean isPressed;
  void drawObject() {
    stroke(0);
    strokeWeight(2);
    fill(255);
    rect(x, y, 25, 50);
  }

  void updateObject(boolean changeSlider) {
    x += mouseX-pmouseX;

    if (x > 305) {
      x = 305;
    }
    if (x < 50) {
      x = 50;
    }
  }

  boolean hitTest(float xClicked, float yClicked) {
    if (xClicked > x && xClicked < x+25 && yClicked > y && yClicked < y+50) {
      return true;
    }
    return false;
  }
}

Slider S1;

void setup() {
  size(500, 500);
  S1 = new Slider();
  S1.x = 50;
  S1.y = 100;
  S1.updateObject(true);
}

void draw() {
  background(120); 
  S1.drawObject();
  fill(S1.x, 200, 200);
  rect(400, 100, 100, 300);
}

void mousePressed() {
  if (S1.hitTest(mouseX, mouseY))
    S1.isPressed = true;
}

void mouseReleased() {
  S1.isPressed = false;
}

void mouseDragged() {
  if (S1.isPressed) {
    S1.updateObject(true);
  }
}

AlexaMona

Thank You so much!!! <3