drag and drop is not working properly processing.js

Question

What I am trying to do is to make the white square to move around the canvas when the mouse is pressed with the mouse locations but it is not working. I know that I am missing something and ask you to help me. Here is my code:

Object o;

int[][] back =new int[3][3];
int pad = 10, bs=100;            //len=pad*(back.length+1)+bs*back.length; za dinamichno resaizvane na ekrana
boolean drag = false;


void setup() {
  size(400, 400);
  noStroke();
  o = new Object();
}

void draw() {

  rectt(0, 0, width, height, color(100));

  for (int row=0; row<back.length; row++)
    for (int coll=0; coll<back[row].length; coll++) {
      float x = pad+(pad+bs)*coll;
      float y = pad+(pad+bs)*row;

      rectt(x, y, bs, bs, color(150));
      if (mouseX >=x && mouseX<=x+width/x*coll+bs
        && mouseY>=y && mouseY<=y+height/y*row+bs) {
        rectt(x, y, bs, bs, color(255, 0, 0));
      }
    }
   o.show();
   //o.over();
}



void rectt(float x, float y, float w, float h, color c) {
  fill(c);
  rect(x, y, w, h);
}


void mousePressed() {
  o.drag();

}

and the class is here:

class Object {
  float size = 50;
  float x;
  float y;
  //  boolean d = false;
  Object() {
    x = width -60;
    y = height -60;
  }

  void show() {
    fill(255);
    rect(x, y, size, size);
  }


  void drag() {
    if ( mouseX >= x && mouseX <= x+size && mouseY <= y+size && mouseY >= y && mousePressed ) {
      x = mouseX;
      y = mouseY;
    }
  }
}

Answer 1

In the future, please tell us exactly what your code does, and exactly what you mean when you say it isn't working.

But let's run through your code and figure out what's going on.

First off, it's a pretty bad idea to name your class Object . It probably won't actually hurt anything, especially using Processing.js, but better safe than sorry. So I'm going to rename it to Rectangle .

After that, your main problem comes from the fact that you have two sets of x and y coordinates. The first come from your loop:

float x = pad+(pad+bs)*coll;
float y = pad+(pad+bs)*row;

You use this first set of coordinates to draw your rectangles. But then you have a second set of coordinates inside your Rectangle class:

x = width -60;
y = height -60;

You use this second set in your dragging logic, but then you never use them for drawing your rectangles. More generally, you never seem to use the show() function at all. Where do you expect that rectangle to show up?

Also, you only ever instantiate one Rectangle instance. The rectangles you're drawing in the for loop don't have anything to do with the Rectangle that you've created.

So to fix your problems, you need to do a few things.

Step 1: Create one instance of Rectangle for each rectangle you want to draw to the screen. In other words, you need to create an ArrayList that holds 9 Rectangle instances, not one.

Put this at the top of your sketch:

ArrayList<Rectangle> rectangles = new ArrayList<Rectangle>();

You never use your back variable, so you can get rid of it.

Put this inside your setup() function:

  for (int row=0; row<back.length; row++) {
    for (int coll=0; coll<back[row].length; coll++) {
      float x = pad+(pad+bs)*coll;
      float y = pad+(pad+bs)*row;

      Rectangle rectangle = new Rectangle(x, y);
      rectangles.add(rectangle);
    }
  }

This code loops through the coordinates and creates an instance of Rectangle at that position, and then adds it to the ArrayList . You'll also have to add the parameters to the Rectangle constructor.

Step 2: You can then shorten your draw() function to simply loop over the Rectangle instances in the ArrayList and draw them:

void draw() {

  background(100);

  for (Rectangle r : rectangles) {
    r.show();
  }
}

Step 3: Modify your show() function to include your logic for coloring the Rectangle based on the mouse position:

  void show() {
    if (mouseX >=x && mouseX<=x+size && mouseY>=y && mouseY<=y+size) {
      //mouse is inside this Rectangle
      rectt(x, y, size, size, color(255, 0, 0));
    } else {
      rectt(x, y, size, size, color(150));
    }
  }

See how each Rectangle knows how to draw itself based on its position and whether the mouse is inside it. All of our logic is inside this class instead of being split into two places.

Step 4: You can then add the dragging logic inside that if statement. If the cursor is inside the Rectangle and the mouse is being pressed, then you know the user is dragging that Rectangle :

//mouse is inside this Rectangle
if (mousePressed) {
    x = mouseX - size/2;
    y = mouseY - size/2;
}

Please note that I did this in regular Processing, not Processing.js, so you might have to make a few small adjustments like using mouseIsPressed instead of mousePressed . But the basic steps are the same: you need to move your logic inside your Rectangle class, and then you need to use the variables inside that class to draw each rectangle.

If you get stuck on a specific step then please post another question with your updated code and a description of exactly what you expect your code to do, what it does instead, and how those two things are different. Good luck.

Answer 2

You can find the answered in here: https://processing.org/examples/mousefunctions.html

But I will remember you that you can't use mouse event in the Object. mouse-click-on-object