mousePressed() with several objects

p5.js Coding Questions
1

Hi,

The code below shows how to used mousePressed() with a form, but I have no idea how to use it with several forms.
I am building an Org Chart with hundreds of nodes and I would like to use mousePressed() to collapse and expand some nodes.
I learned that mousePressed() cannot be used inside draw function, so I don’t know from where to start.

Thanks in advance,

let value = 0;
function draw() {
  fill(value);
  rect(25, 25, 50, 50);
}
function mousePressed() {
  if (value === 0) {
    value = 255;
  } else {
    value = 0;
  }
}
1 Like
2

these

should be a ARRAY of objects
can use a CLASS to make them smart
and use a detection of MOUSE OVER and MOUSEISPRESSED
to select the objects ( and remember it ).

add can use a global OPTIONSELECT
if you want only one ( the last selected ) be active.

depending if the object is selected you can show different info.

a basic version could be a grid of SMART rectangles
( they remember their position, color, id, text info AND if selected )
but it is also possible already at MOUSEOVER show different info like:

  • default TITLE
  • mouse over add SUMMERY
  • clicked ( selected ) add INFO
3 Likes
3

Thank you so much for you answer. It help me a lot.
However, in my first try using your suggestion the click on the mouse must be very quick on the contrary the form will blink (P.S.: I am not selecting a rectangle, but making it disappear if the parent not is switched to collapse==true).
I work more on it and I will post a feedback here later on.