Rectangle drags along the x-saxis instead of staying within it's confines

Noradz471

I have a rectangle that's supposed to stay between mouseX + 53 and mouseX + 73 depending on whether the mouse is pressed or released, but it drags along the x-axis whenever I move it. I've tried isolating the rectangle to find the problem but I couldn't find any solutions to it. The problem rectangle is the one dealing with the handleX variable.

boolean click;
// big blood circle
float circleW = 0;
float circleH = 0;
// blood from top of screen
float circleStart = 0;
// mouse shit
float handleX = mouseX+73;
float plungerW;
float bloodH = 0;
float bloodW = 33;
// bg shit
float bgcolor = 112;

void setup(){
 size(720,480);
 smooth();
 frameRate(30);
}

void draw(){

 background(bgcolor);

 // big blood circle
 fill(255,0,0,100);
 ellipse(pmouseX,pmouseY,circleW,circleH);

  //blood dots in background
  fill(random(255),0,0,random(255));
  ellipse(random(width),random(height),random(30),random(30));
  ellipse(random(width),random(height),random(30),random(30));
  ellipse(random(width),random(height),random(30),random(30));
  ellipse(random(width),random(height),random(30),random(30));
  ellipse(random(width),random(height),random(30),random(30));

  //drips from top of screen
  fill(170,0,0,100);
  arc(0,circleStart,20,bloodH,0,PI);
  arc(20,circleStart,20,bloodH,0,PI);
  arc(220,circleStart,20,bloodH,0,PI);
  arc(35,circleStart,20,bloodH,0,PI);
  arc(44,circleStart,20,bloodH,0,PI);
  arc(63,circleStart,20,bloodH,0,PI);
  arc(69,circleStart,20,bloodH,0,PI);
  arc(77,circleStart,20,bloodH,0,PI);
  arc(99,circleStart,20,bloodH,0,PI);
  arc(127,circleStart,20,bloodH,0,PI);
  arc(88,circleStart,20,bloodH,0,PI);
  arc(153,circleStart,20,bloodH,0,PI);
  arc(140,circleStart,20,bloodH,0,PI);
  arc(112,circleStart,20,bloodH,0,PI);
  arc(173,circleStart,20,bloodH,0,PI);
  arc(187,circleStart,20,bloodH,0,PI);
  arc(207,circleStart,20,bloodH,0,PI);
  arc(230,circleStart,20,bloodH,0,PI);
  arc(247,circleStart,20,bloodH,0,PI);
  arc(276,circleStart,20,bloodH,0,PI);
  arc(256,circleStart,20,bloodH,0,PI);
  arc(268,circleStart,20,bloodH,0,PI);
  arc(293,circleStart,20,bloodH,0,PI);
  arc(311,circleStart,20,bloodH,0,PI);
  arc(323,circleStart,20,bloodH,0,PI);
  arc(342,circleStart,20,bloodH,0,PI);
  arc(358,circleStart,20,bloodH,0,PI);
  arc(373,circleStart,20,bloodH,0,PI);
  arc(385,circleStart,20,bloodH,0,PI);
  arc(431,circleStart,20,bloodH,0,PI);
  arc(399,circleStart,20,bloodH,0,PI);
  arc(411,circleStart,20,bloodH,0,PI);
  arc(422,circleStart,20,bloodH,0,PI);
  arc(446,circleStart,20,bloodH,0,PI);
  arc(462,circleStart,20,bloodH,0,PI);
  arc(481,circleStart,20,bloodH,0,PI);
  arc(492,circleStart,20,bloodH,0,PI);
  arc(507,circleStart,20,bloodH,0,PI);
  arc(526,circleStart,20,bloodH,0,PI);
  arc(385,circleStart,20,bloodH,0,PI);
  arc(538,circleStart,20,bloodH,0,PI);
  arc(549,circleStart,20,bloodH,0,PI);
  arc(558,circleStart,20,bloodH,0,PI);
  arc(573,circleStart,20,bloodH,0,PI);
  arc(591,circleStart,20,bloodH,0,PI);
  arc(604,circleStart,20,bloodH,0,PI);
  arc(618,circleStart,20,bloodH,0,PI);
  arc(638,circleStart,20,bloodH,0,PI);
  arc(653,circleStart,20,bloodH,0,PI);
  arc(669,circleStart,20,bloodH,0,PI);
  arc(688,circleStart,20,bloodH,0,PI);
  arc(704,circleStart,20,bloodH,0,PI);
  arc(719,circleStart,20,bloodH,0,PI);
  arc(680,circleStart,20,bloodH,0,PI);
  arc(626,circleStart,20,bloodH,0,PI);
  arc(583,circleStart,20,bloodH,0,PI);
  arc(515,circleStart,20,bloodH,0,PI);
  arc(472,circleStart,20,bloodH,0,PI);
  arc(238,circleStart,20,bloodH,0,PI);
  arc(162,circleStart,20,bloodH,0,PI);
  arc(192,circleStart,20,bloodH,0,PI);
  arc(51,circleStart,20,bloodH,0,PI);
  arc(15,circleStart,20,bloodH,0,PI);
  arc(638,circleStart,20,bloodH,0,PI);


 //arrow keys
   if (keyPressed){
    if (keyCode == UP){
  save("bloody_mess.jpg");
  }else if(keyCode == DOWN){
   //make circles start at top and work down the screen
  bloodH = bloodH + 2;
  }else if(keyCode == RIGHT){
  bgcolor = bgcolor + 3;
  if (bgcolor >= 255){
    bgcolor = 255;
  }
  }else if(keyCode == LEFT){
  bgcolor = bgcolor - 3;
  if (bgcolor <= 0){
    bgcolor = 0;
  }
  }

}

  //mouse

 noCursor();
 noStroke();
 fill(0);
 rect(mouseX,mouseY-1,20,2);
 stroke(0);
 fill(200);
 rect(mouseX+20,mouseY+-8,33,16);
 fill(0);
 rect(mouseX+53,mouseY-1,plungerW,2);
 rect(handleX,mouseY-8,5,16);
 stroke(0);
 line(mouseX+28,mouseY-8,mouseX+28,mouseY-0);
 line(mouseX+36,mouseY-8,mouseX+36,mouseY-0);
 line(mouseX+44,mouseY-8,mouseX+44,mouseY-0);
 noStroke();
 fill(180,0,0,180);
 rect(mouseX+20,mouseY+-8,bloodW,16);
 if (click == true){
   circleW = circleW + 2;
   circleH = circleH + 2;
   handleX = handleX - 1;
   plungerW = plungerW - 1;
   bloodW = bloodW - 1.7;
   if (bloodW <= 0){
     bloodW = 0;
   }
   if (plungerW <= 0){
     plungerW = 0;
   }
   if (handleX <= mouseX + 53){
     handleX = mouseX + 53;
   }
   }else if (click == false){

     handleX = handleX + 2;
     if (handleX >= mouseX + 73){
       handleX = mouseX + 73;
     }
     plungerW = plungerW + 2;
     if (plungerW >= 20){
       plungerW = 20;
     }
     bloodW = bloodW + 3.4;
     if (bloodW >= 33){
       bloodW = 33;
     }
   }

} //end void draw

void mousePressed(){
 click = true; 
}

void mouseReleased(){
  click = false;
}

Here is the code containing only the problem rectangle.

boolean click;
float handleX = mouseX+73;

void setup(){
  size(720,480);
  smooth();
  frameRate(30);
}

void draw(){

  background(255);

  noStroke();
  fill(0);
  rect(handleX,mouseY-8,5,16);
  if (click == true){
    handleX = handleX - 1;
    if (handleX <= mouseX + 53){
      handleX = mouseX + 53;
    }
  }else if (click == false){
    handleX = handleX + 2;
    if (handleX >= mouseX + 73){
      handleX = mouseX + 73;
    }
  }
}

void mousePressed(){
  click = true;
}

void mouseReleased(){
  click = false;
}

jeremydouglass

Your problem with the handle not updating correctly along the x axis is here:

rect(handleX,mouseY-8,5,16);

Instead, you need to anchor your plunger handle to the mouse at all times:

rect(mouseX+handleX,mouseY-8,5,16);

Now correct the rest of your plunger code, removing references to mouseX and only calculating and storing the relative offset in in your handleX variable.