Only take the Top One

p5.js Coding Questions
1

Hi there, long time no see :slight_smile:

I want to make some sort of 2d picking on a 2D sketch:

  • I made a test “isOver” on my objects, so my objects change color when mouse is over ( dist(mouseX…)
  • So in my main I get the “mouseIsOver” for every instances of my object

=> but I want to make it so that, if I click, I activate ONLY THE TOP ONE

I’m thinking of using an array and getting only the highest index of the “true” values but I sense there is a simple solution out there.
Any Idea ?

code here: https://editor.p5js.org/rich-gg/sketches/nAmKW626N

2

:thinking: Mmm, taking a fast look…

:bulb: The top or the bottom, depends on the order you draw it, by the way you are displaying the circles, the order is 1 , 2 , 3 , 4, so 4 will be always at top.

:roll_eyes: Lets suppose that you put a random number, so we can’t know which one is on the top, maybe you can put a variable counter in your class that will be increasing anytime you are creating a new object and, in that way, check which one is on the top…

:cowboy_hat_face: Or just put a variable height and draw the objects depending on that height, in a specific order.

:four_leaf_clover: There are many ways of do it I think, take the one you are more comfortable :smiley:

3

There are 2 issues :

Select the top one (1j

Select only one item (2)

2

make a boolean foundItem = false

Once you found one set it to true

Don’t allow further selected items

1

You don’t have to do the is over check in the same loop. You can do it in an separate loop (a) previous to yours (b, the one that you have now). Store the result in a and evaluate it in b.

In (a) work in the reverse order than in (b).

4

I think I got it to work

using some sort of “buffer” array, the .includes() and the .lastIndexOf() functions

  //BUFFER
  for (let i = 0; i < combien; i++) {
    buffer[i] = paquet[i].getIsOver();
  }

  // TOPONE
  if (buffer.includes(true)) {
    topOne = buffer.lastIndexOf(true);
    noFill();
    stroke(128, 0, 0);
    ellipse(50 + topOne * 100, height - 47, 50);
  } else {
    topOne = null;
  }

try it here: https://editor.p5js.org/rich-gg/sketches/JA2Qp4JFE

thank for the help guys :smiley: