How to move a figure without selecting others?

Hello, I am trying to create a game. i have a class that draw triangles and i select them through a circle that is inside. The problem is when I have several figures, the circles overlap and I cannot select them one by one.
I want to know if there is a way to pass one figure over another and not “pick it up”
this is my code

Triangle triangle1;
Triangle triangle2;
Triangle triangle3;

void setup() {
  fullScreen();
  noStroke();
  fill(0);

  triangle1 = new Triangle(color(238, 241, 42), width/4, height/4, 1);

  triangle2 = new Triangle(color(93, 241, 42), width/2, height/2, 2);

  triangle3= new Triangle(color(152, 50, 138), 100,height/2, sqrt(2));
}
void draw() {
  background(54,54,54);
  triangle1.display();
  triangle2.display();
  triangle3.display();
}

class Triangle {

  color c;
  float xpos;
  float ypos;
  float escala;
  float radius=25;
  float angulo;

  float l= 200;
  float l4=l/4;
  float l8=l/8;

  Triangle(color tempc, float tempXpos, float tempYpos, float temp_e) {
    c=tempc;
    xpos= tempXpos;
    ypos= tempYpos;
    escala = temp_e;
    radius=radius*escala;
    l4=l4*escala;
    l8=l8*escala;
  }

  void display() {

    if (overcircle(mouseX, mouseY, xpos, ypos, radius)) {
      fill(255, 150, 0);
    } else fill(c);
    dibujar();

    if (select(xpos, ypos)) {
      xpos=mouseX;
      ypos=mouseY;
    }
  }
  

  void dibujar() {
    push();
    noStroke();
    figura();
    stroke(0);
    ellipse(xpos, ypos, radius, radius);
    pop();
  }
  
 
 void figura(){
   triangle(xpos, ypos-l8, xpos+l4, ypos+l8, xpos-l4, ypos+l8);
 }
  
  
  // POINT/CIRCLE
  boolean overcircle(float px, float py, float cx, float cy, float r) {

    float distX = px - cx;
    float distY = py - cy;
    float distance = sqrt( (distX*distX) + (distY*distY) );

    if (distance <= r) {
      return true;
    }
    return false;
  }

  boolean select(float cx, float cy) {
    if (mousePressed && overcircle(mouseX, mouseY, cx, cy, radius)) return true;
    else return false;
  }
}
1 Like

Hi,

Welcome to the community! :wink:

Few points I noticed here :

  • Your function to detect if the mouse is in the circle works but you are drawing your circle with the radius for the x and y size in the ellipse() function. Those parameters are the diameter of the ellipse so use : ellipse(xpos, ypos, radius * 2, radius * 2);

  • Since boolean select() is a method of the class Triangle, you have direct access to the member variables of the class so you don’t need to pass xpos to ypos to the select and overcircle methods. Instead use directly xpos and ypos.

  • There is no point of doing this :

if (distance <= r) {
  return true;
}
return false;

Because if distance <= r is true then you return true and if it’s false, you return false. You can just return (distance <= r);.

  • You should consider using the mousePressed() or the mouseDragged() functions to check when the user is pressing the mouse because on your code, if you drag the mouse too much, it’s missing the ellipse.
2 Likes

I always do the dragging differently

In mousePressed for loop over the array

When you have a much set a global boolean to true. Store which index you have. Leave mousePressed immediately

In mousereleased set the boolean to false again

In draw() when the boolean hold is true change only the selected item position

3 Likes