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

FilDomInteractive · November 3, 2019, 10:11am

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);
}

Lexyth · November 3, 2019, 10:35am

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

FilDomInteractive · November 3, 2019, 10:39am

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

Lexyth · November 3, 2019, 10:48am

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.

FilDomInteractive · November 3, 2019, 10:53am

I don’t understand. .

Lexyth · November 3, 2019, 10:55am

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

FilDomInteractive · November 3, 2019, 10:57am

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

Lexyth · November 3, 2019, 11:07am

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).

FilDomInteractive · November 3, 2019, 11:08am

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?

Lexyth · November 3, 2019, 11:13am

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)

FilDomInteractive · November 3, 2019, 11:16am

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

Lexyth · November 3, 2019, 11:21am

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;
      }
   }
}

FilDomInteractive · November 3, 2019, 11:33am

I can’t drag it to left and up

paulgoux · November 3, 2019, 11:37am

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.

Lexyth · November 3, 2019, 11:38am

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;

Chrisir · November 3, 2019, 12:30pm

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;
}
//

Chrisir · November 3, 2019, 12:31pm

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

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

Topic		Replies	Views
Drag and Drop an Object Coding Questions	3	1072	January 16, 2022
Drag and Drop for android Coding Questions	2	308	July 24, 2018
Make a few rectangles fall Coding Questions	7	1182	September 10, 2018
Moving individual object rather than altogether in a for-loop (ArrayList) Coding Questions	1	349	April 22, 2020
Drag and Drop Boolean Array Coding Questions	6	650	September 13, 2020

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

Related Topics