Drag and Drop Rectangle

Processing Coding Questions
1

I am new to Processing and am trying to write a program that allows you to drag and drop a rectangle. Whenever I click on the rectangle, the mouse locations becomes the new top left corner of the rectangle. How can I make it so when I click and drag, the mouse stays in the center of the rectangle as opposed to the top left corner? I know where the error is, but I do not know how to fix it. Thank you.

int x = 50;
int y = 50;
int a = 125;
int b = 200;

void setup() {
  size(480, 360);  //size of window
  background(255);  //white background
  noStroke();   //no outline by default
}

void draw()
  {
    background(255);  //white background
    if(dist(x + (a / 2), y + (b / 2), mouseX, mouseY) < a / 2)
    {
      //inside the card
      cursor(HAND);
      if(mousePressed){
        x = mouseX;  //THIS IS WHERE MY ERROR IS COMING FROM
        y = mouseY;  //THIS IS WHERE MY ERROR IS COMING FROM
        strokeWeight(3);  //give thick outline if pressing on card
      }else{
        strokeWeight(1);  //give thin outline if not pressing on card
      }
      stroke(0);  //black outline color
    }else{
      //not inside the card
      cursor(ARROW);
      noStroke();  //no outline if mouse is off of card
    }
    
   fill(0, 255, 0);
   rect(x, y, a, b); // green card 
    
  }
1 Like
2

Hi butterycoweg,

Can you please format your code?

On your previous post, hit the pen icon on the bottom left to edit it.
Then select your code and hit </> in the text editor toolbar.
Be sure to hit ctrl+t in processing to properly indent everything

Now for your question, you can check out the MouseFunctions example provided with processing. I think it does what you want.

/**
 * Mouse Functions. 
 * 
 * Click on the box and drag it across the screen. 
 */
 
float bx;
float by;
int boxSize = 75;
boolean overBox = false;
boolean locked = false;
float xOffset = 0.0; 
float yOffset = 0.0; 

void setup() {
  size(640, 360);
  bx = width/2.0;
  by = height/2.0;
  rectMode(RADIUS);  
}

void draw() { 
  background(0);
  
  // Test if the cursor is over the box 
  if (mouseX > bx-boxSize && mouseX < bx+boxSize && 
      mouseY > by-boxSize && mouseY < by+boxSize) {
    overBox = true;  
    if(!locked) { 
      stroke(255); 
      fill(153);
    } 
  } else {
    stroke(153);
    fill(153);
    overBox = false;
  }
  
  // Draw the box
  rect(bx, by, boxSize, boxSize);
}

void mousePressed() {
  if(overBox) { 
    locked = true; 
    fill(255, 255, 255);
  } else {
    locked = false;
  }
  xOffset = mouseX-bx; 
  yOffset = mouseY-by; 

}

void mouseDragged() {
  if(locked) {
    bx = mouseX-xOffset; 
    by = mouseY-yOffset; 
  }
}

void mouseReleased() {
  locked = false;
}
1 Like
3

Thank you so much for responding. I did not know about that
< / > option so thank you for telling me about it. Yes, that example for the most part does what I want. I will try adding parts of that to my previous code. Thank you for showing that to me :slight_smile:

4

Thanks for editing your post! :slight_smile:

Just to precise a bit more the previous answer, what you need to focus on is that part:

xOffset = mouseX-bx; 
yOffset = mouseY-by;

It keeps track of the delta between the corner of the rectangle and the mouse position when you click on the rectangle so that when you move your mouse you can offset it back to that amount.