Drag shape with mouse / Pre-last thread in this week

Processing Coding Questions
1
  1. Hello! I just want to ask, how can I make that if I drag ANY of the geometric shapes will be where my mouse, and when I release my mouse, it will stay in the place where I dragged it to? Thank you!

Also, when I will get answer to 1. , I want to ask how to do that all of the shapes will fall when I click for example ‘g’.

CODE FOR BOTH QUESTIONS >

import javafx.scene.effect.Bloom;

int playerX = 400;
int playerY = 300;
color col = 0;
color col2 = 0;
color col3 = 0;
color col4 = 0;
color col5 = 0;
color col6 = 0;
int index;
int len;
int randomIndex;
int l = width / 4 ;
int m = height / 2;
int u = width / 6;
int f = height / 6;
color cComp;
String colText = "BLUE > ";
float rx, ry;
int collisionX = 266;
int collisionY = 200;
String randomFun[] = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
String randomInt[] = {"0", "1", "2", "3", "4" , "5", "6", "7", "8", "9"};

  void setup() {
    
    surface.setTitle("The Playground!");
    
  index = int(random(randomFun.length));
  randomIndex = int(random(randomInt.length));
  size(800, 600);
  frameRate(320);
  col = color (0, 0, 255);
  col2 = color(0);
  col3 = color(255);
  col4 = color(255, 0, 0);
  col5 = color(0, 255, 0);
  col6 = color(255, 112, 245);
  rx = random(800);
  ry = random(600);
}

void draw() {
  background(255);
  strokeWeight(2.877);
  keyPressed();
  fill(0, 0, 255);
  rect(collisionX, collisionY, 100, 100);
  fill(col2);
  rect(l, m, 20, 20);
  fill(col4);
  ellipse(u, f, 12, 12);
  fill(col5);
  ellipse(rx, ry, 70, 70);
  noFill();
  stroke(0);
  fill(255);
  ellipse(playerX, playerY, 20, 20);
  noFill();
  
  if(playerX > width - 20) {
    playerX = width - 20;
  }
  
  if(playerX < 10) {
    playerX = 10;
  }
  
  if(playerY > height - 20) {
    playerY = height - 20;
  }
  
  if(playerY < 10) {
    playerY = 10;
  }
  
  // START(())
  
      fill(255, 112, 245);
  text("FPS > " + frameRate, CENTER, CENTER + 15);
  text("KEY > " + key, CENTER, CENTER + 30);
  text("KEY-PRESSED > " + keyPressed, CENTER, CENTER + 45);
  text("MOUSE-POSITION-X > " + mouseX, CENTER, CENTER + 60);
  text("MOUSE-POSITION-Y > " + mouseY, CENTER, CENTER + 75);
  text("MOUSE-CLICKED > " + mousePressed, CENTER, CENTER + 90);
  text("KEY-CODE > " + keyCode, CENTER, CENTER + 105);
  text("DATE > " + second() + " - " + minute()+ " - " + hour() + " - " +  day() + " - " +  month() + " - " + year(), CENTER, CENTER + 120);
  text("RANDOM-CHARACTER > " + randomFun[index], CENTER, CENTER + 150);
  text("RANDOM-INTEGER > " + randomInt[randomIndex], CENTER, CENTER + 165);
  
      if(col == cComp) {
      ;
    fill(0, 0, 255);
    text("COL > BLUE       ", CENTER, CENTER + 135);
  }
    if(col2 == cComp) {
        ;
    fill(0);
    text("COL > BLACK       ", CENTER, CENTER + 135);
  }
    if(col3 == cComp) {
        ;
    text("COL > WHITE       ", CENTER, CENTER + 135);
  }
    if(col4 == cComp) {
        ;
    fill(255, 0, 0);
    text("COL > RED       ", CENTER, CENTER + 135);
  }
    if(col5 == cComp) {
        ;
    fill(0, 255, 0);
    text("COL > GREEN       ", CENTER, CENTER + 135);
  }
      if(col6 == cComp) {
          ;
    fill(255, 112, 245);
    text("COL > PINK       ", CENTER, CENTER + 135);
  
      }
  
  // END(())
}

void keyPressed() {
if(keyPressed == true && key == 'd' || key == 'D') {
  playerX = playerX + 1;
  }
  if(keyPressed == true && key == 'a' || key == 'A') {
  playerX = playerX - 1;
  }
  if(keyPressed == true && key == 's' || key == 'S') {
  playerY = playerY + 1;
  }
  if(keyPressed == true && key == 'w' || key == 'W') {
  playerY = playerY - 1;
  }
}

void mousePressed() {
  cComp = get(pmouseX, pmouseY);
}
2

For this you‘ll have to do these things :
• Get the Position of the Object
• Get the position of your mouse
• Compare those, to see if they are close enough to say that the mouse is over the shape
• Preferably activate the Drag&Drop when the mouse is held
• Get the Position of the mouse at the target Location (or get it always to have a literal Drag&Drop and not just Click&Place)
• Set the Position of the Object to the position of the mouse (preferably minus the offset from the actual (0,0) of the shape from the position the mouse is clicked

3

I know how to do it, but when I click anywhere it will drag it.

I used

if(mouseX > collisionX) {
collisionX = mouseX;
}

if(mouseX < collisionX) {
collisionX = mouseX;
}

and same with mouseY and collisionY

4

Uhm that‘s not Drag&Drop…
It should look something like this :

PVector boxPos = new PVector(10,10);
PVector boxSize = new PVector(10,10);

void setup() {

}

void draw() {
   if (mousePressed) {
      if (mouseX > boxPos.x && mouseX < boxPos.x + boxSize.x && mouseY > boxPos.y && mouseY < boxPos.y + boxSize.y) {
         boxPos.set(mouseX, mouseY); //you can also subtract the Offset from the origin (boxPos) to your mouse when you First click, if you want
      }
   }
}

In your case boxPos would be the 2 collisionX/Y variables. And boxSize would be 100/100.

5

I don’t understand. .

6

If it‘s about the PVector, that is just a Class that has 3 variables in it (x, y and z). It‘s mainly used to store 2+D coordinates.
Basically boxPos.x = collissionX and boxPos.y = collissionY

7

I’m completely new and I don’t understand .x and .y and boxPos and PVector.

8

The PVector Class looks internally similar to this :

class PVector {
   float x;
   float y;

   PVector (float xtemp, float ytemp) {
      x = xtemp;
      y = ytemp;
   }

   void set(float xtemp, float ytemp) {
      x = xtemp;
      y = ytemp;
   }
}

If you have a PVector like :

PVector a = new PVector(10,5);

then you can do :

float collissionX = a.x; //10
float collissionY = a.y; //5

And with

a.set(collissionX-1, collissionY+1); //a.x = 9, a.y = 6

you can set the PVectors‘ internal variables x and y to (in this case) collissionX and collissionY.

Knowing how to use PVectors is an essential part if you use coordinates (x,y) often. And you do use them pretty much always.

There is much more to do with PVectors, but these are the basics you should really learn about as soon as possible, since they are very easy to remember and will make your Code a lot easier to handle (not needing separate floats for x and y).

9

I don’t understand, like how should I make a rectangle that I can drag anywhere? like I don’t understand anything you posted.

How should I learn PVectors?

10 
PVector boxPos = new PVector(10,10); //is equal to collissionX and collssionY
PVector boxSize = new PVector(10,10); // is the size of the rectangle (in your Code you set it to 100 and 100

void setup() {
   size(500,800);
}

void draw() {
   if (mousePressed) {
      if (mouseX > boxPos.x && mouseX < boxPos.x + boxSize.x && mouseY > boxPos.y && mouseY < boxPos.y + boxSize.y) {
         boxPos.set(mouseX, mouseY); //you can also subtract the Offset from the origin (boxPos) to your mouse when you First click, if you want
      }
   }
}

This is literally the Code to move a Box with Drag&Drop anywhere.

boxPos.x is collissionX and boxPos.y is equal to collissionY.
boxSize.x is 100 and boxSize.y is 100 too in your Code.

As for learning PVectors, just Look at the post i Sent that describes the way it works. It‘s literally 2 simple things to remember.

•PVector can contain 2-3 floats that can be accessed by .x, .y and .z
•PVectors can be set with new PVector(10,10); or .set(10,10)

11

So I need to make a rect(boxPos.x, boxPos.y, boxSize.x, boxSize.y); ?

12

Yes and no. You should change your Code, switching the float collisionX and the float collissionY to a PVector collision, but let‘s refrain from that for now.

So for now just use this Code as a reference, but learn PVectors later on :

float collissionsX = 10;
float collissionsY = 10;

// you set the width and height in your Code as 100 and 100, so i wont define them as a variable

void setup() {

}

void draw() {
   if (mousePressed) {
      if (mouseX > collissionX && mouseX < collissionX + 100 && mouseY > collissionY && mouseY < collissionY + 100) {
         collissionX = mouseX;
         collissionY = mouseY;
      }
   }
}
13

I can’t drag it to left and up

14

As you are completely new to coding I thoroughly recommend you take a look at the programming section on khan academy which will teach you everything you need to know about objects and PVectors.

15

Yeah, that is because the origin is moved to mouse Position… you can simply fix this by setting the origin as -50. or in other words :

collissionX = mouseX - 50;
collissionY = mouseY - 50;
16

based on your initial code here you find a version
where you can drag only the blue rectangle.

You can easily add other items.

I tried to change as little as possible.

In my example I marked the relevant parts with // !!!!!!!!!!!!!!!!!!!!!!!!!.

Remark

As has been said, you should learn to use PVector and classes / objects.

Read the first textual tutorials and the tutorial “objects”.

You should also store the items as objects in an array. Or use arrays. See tutorial array.

Please try the examples there. Then you have better ways to program (a broader set of tools and techniques to code something).

Chrisir



import javafx.scene.effect.Bloom;

int playerX = 400;
int playerY = 300;

color col = 0;
color col2 = 0;
color col3 = 0;
color col4 = 0;
color col5 = 0;
color col6 = 0;

int index;
int len;
int randomIndex;
int l = width / 4 ;
int m = height / 2;

int u = width / 6;
int f = height / 6;

color cComp;
String colText = "BLUE > ";
float rx, ry;
int collisionX = 266;
int collisionY = 200;
String randomFun[] = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};
String randomInt[] = {"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"};

// Do we have drag and drop at the moment running?
boolean hold = false; // !!!!!!!!!!!!!!!!!!
// which item is dragged? 
boolean collisionIsSelected=false; // !!!!!!!!!!!!!!!!!!!!!!!!!

void setup() {

  surface.setTitle("The Playground!");

  index = int(random(randomFun.length));
  randomIndex = int(random(randomInt.length));
  size(800, 600);
  frameRate(320);

  col = color (0, 0, 255);
  col2 = color(0);
  col3 = color(255);
  col4 = color(255, 0, 0);
  col5 = color(0, 255, 0);
  col6 = color(255, 112, 245);
  rx = random(800);
  ry = random(600);
}

void draw() {
  background(255);
  strokeWeight(2.877);
  keyPressed();

  fill(0, 0, 255);
  rect(collisionX, collisionY, 100, 170);

  if (hold) {  // !!!!!!!!!!!!!!!!!!!!!!!!!
    collisionX += mouseX-pmouseX; 
    collisionY += mouseY-pmouseY;
  }

  fill(col2);
  rect(l, m, 20, 20);
  fill(col4);
  ellipse(u, f, 12, 12);
  fill(col5);
  ellipse(rx, ry, 70, 70);
  noFill();
  stroke(0);
  fill(255);
  ellipse(playerX, playerY, 20, 20);
  noFill();

  if (playerX > width - 20) {
    playerX = width - 20;
  }

  if (playerX < 10) {
    playerX = 10;
  }

  if (playerY > height - 20) {
    playerY = height - 20;
  }

  if (playerY < 10) {
    playerY = 10;
  }

  // START(())

  fill(255, 112, 245);
  text("FPS > " + frameRate, CENTER, CENTER + 15);
  text("KEY > " + key, CENTER, CENTER + 30);
  text("KEY-PRESSED > " + keyPressed, CENTER, CENTER + 45);
  text("MOUSE-POSITION-X > " + mouseX, CENTER, CENTER + 60);
  text("MOUSE-POSITION-Y > " + mouseY, CENTER, CENTER + 75);
  text("MOUSE-CLICKED > " + mousePressed, CENTER, CENTER + 90);
  text("KEY-CODE > " + keyCode, CENTER, CENTER + 105);
  text("DATE > " + second() + " - " + minute()+ " - " + hour() + " - " +  day() + " - " +  month() + " - " + year(), CENTER, CENTER + 120);
  text("RANDOM-CHARACTER > " + randomFun[index], CENTER, CENTER + 150);
  text("RANDOM-INTEGER > " + randomInt[randomIndex], CENTER, CENTER + 165);

  if (col == cComp) {
    ;
    fill(0, 0, 255);
    text("COL > BLUE       ", CENTER, CENTER + 135);
  }
  if (col2 == cComp) {
    ;
    fill(0);
    text("COL > BLACK       ", CENTER, CENTER + 135);
  }
  if (col3 == cComp) {
    ;
    text("COL > WHITE       ", CENTER, CENTER + 135);
  }
  if (col4 == cComp) {
    ;
    fill(255, 0, 0);
    text("COL > RED       ", CENTER, CENTER + 135);
  }
  if (col5 == cComp) {
    ;
    fill(0, 255, 0);
    text("COL > GREEN       ", CENTER, CENTER + 135);
  }
  if (col6 == cComp) {
    ;
    fill(255, 112, 245);
    text("COL > PINK       ", CENTER, CENTER + 135);
  }

  // END(())
}

void keyPressed() {
  if (keyPressed == true && key == 'd' || key == 'D') {
    playerX = playerX + 1;
  }
  if (keyPressed == true && key == 'a' || key == 'A') {
    playerX = playerX - 1;
  }
  if (keyPressed == true && key == 's' || key == 'S') {
    playerY = playerY + 1;
  }
  if (keyPressed == true && key == 'w' || key == 'W') {
    playerY = playerY - 1;
  }
}

void mousePressed() {  // !!!!!!!!!!!!!!!!!!!!!!!!!
  cComp = get(pmouseX, pmouseY);
  if (mouseX>collisionX &&
    mouseY>collisionY && 
    mouseX<collisionX + 100 &&
    mouseY<collisionY + 170) {
    collisionIsSelected=true; 
    hold = true;
  }
}

void mouseReleased() { // !!!!!!!!!!!!!!!!!!!!!!!!!
  hold = false;
  collisionIsSelected=false;
}
//
2 Likes
17

It is not necessary to call keyPressed(); in draw().

Like setup, draw, mousePressed… it gets called automatically.

1 Like