Question

I want to implement on my project this sketch about dragging a box.

Instead of one box, I have several circles each drawn with different coordinates in the form

  ellipse(lemma23.x, lemma23.y, diameterLemma23, diameterLemma23);

  ellipse(law3.x, law3.y, diameterLaw3, diameterLaw3);

  ellipse(law2.x, law2.y, diameterLaw2, diameterLaw2);

How do I test if the cursor is on one of the circles?

Here’s a screen shot of my project:

I want to test when cursor is on (or near) a circle so that I can change its position by dragging.

The entire sketch is in pastebin.

Answer 1

I started with the example in your question. There are a few main differences for drawing multiple shapes:

1. You have to check whether the cursor is within each shape.
2. You have to draw each shape.
3. You may want to worry about overlapping, but I did not.

---

In the following code, I build upon the example directly although I removed the few lines which change the color of the box when clicked and I reorganized the code into the MovingEllipse class so that multiple ellipses can be drawn easily. (This code draws two ellipses.)

Note that the code in draw() checks the position of the mouse for each ellipse, however, I suppose this could be improved upon (i.e. perhaps by creating an array of ellipse positions and looping over the array). Also, for this code to work properly, mousePressed and mouseReleased methods need to be copied like the mouseDragged method. (I was trying to make my example brief.)

Anyway, this is one way to draw multiple ellipses and detect which one should be moved. Hope it helps!

int esize = 75;

MovingEllipse e1 = new MovingEllipse(0.0, 0.0, esize, 0.0, 0.0);
MovingEllipse e2 = new MovingEllipse(0.0, 0.0, esize, 0.0, 0.0);

void setup() 
{
  size(640, 360);
  e1.eX = width/2.0;    // Center of ellipse 1.
  e1.eY = height/2.0;

  e2.eX = width/4.0;    // Center of ellipse 2.
  e2.eY = height/4.0;
}

void draw() 
{ 
  background(0);

  // Test if the cursor is over the ellipse. 
  if (mouseX > e1.eX-esize && mouseX < e1.eX+esize && 
      mouseY > e1.eY-esize && mouseY < e1.eY+esize) {
    e1.overBox = true;  
    e2.overBox = false;
  } else if (mouseX > e2.eX-esize && mouseX < e2.eX+esize && 
      mouseY > e2.eY-esize && mouseY < e2.eY+esize) {
    e2.overBox = true;
    e1.overBox = false;
  } else {
    e1.overBox = false;
    e2.overBox = false;
  }

  // Draw the ellipse(s).
  e1.update(e1.eX, e1.eY, e1.overBox);
  e2.update(e2.eX, e2.eY, e2.overBox);
}

void mouseDragged() {
  e1.mouseDragged();
  e2.mouseDragged();
}
// Don't forget to repeat this for mousePressed and mouseReleased!
// ...

class MovingEllipse {
  float eX, eY;             // Position of ellipse.
  int eSize;                // Radius. For a circle use eSize for both x and y radii.
  float xOffset, yOffset;   // Where user clicked minus center of ellipse. 
  boolean locked, overBox;  // Flags used for determining if the ellipse should move.

  MovingEllipse (float ex, float ey, int esize, float xoff, float yoff) {
    eX = ex;
    eY = ey;
    eSize = esize;
    xOffset = xoff;
    yOffset = yoff;
  }

  void update(float ex, float ey, boolean over) {
    eX = ex;
    eY = ey;
    overBox = over;
    // Draw the ellipse. By default, (eX, eY) represents the center of the ellipse.
    ellipse(eX, eY, eSize, eSize);
  }

  void mousePressed() {
    if(overBox) { 
      locked = true; 
    } else {
      locked = false;
    }
    xOffset = mouseX-eX; 
    yOffset = mouseY-eY; 
  } 
  void mouseDragged() {
    if(locked) {
      eX = mouseX-xOffset; 
      eY = mouseY-yOffset; 
    } 
  }
  void mouseReleased(){
    locked = false;
  }
}