# mousePressed() with several objects

**URL:** <https://discourse.processing.org/t/mousepressed-with-several-objects/14157>\
**Category:** Coding Questions\
**Created:** [September 24, 2019, 1:44am UTC](https://discourse.processing.org/t/mousepressed-with-several-objects/14157 "2019-09-24T01:44:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paulo](https://avatars.discourse-cdn.com/v4/letter/p/bbce88/32.png) [@Paulo](https://discourse.processing.org/u/Paulo)\
**Post date:** [September 24, 2019, 1:44am UTC](https://discourse.processing.org/t/mousepressed-with-several-objects/14157/1 "2019-09-24T01:44:38Z")

</div>

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,

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

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 24, 2019, 4:31am UTC](https://discourse.processing.org/t/mousepressed-with-several-objects/14157/2 "2019-09-24T04:31:15Z")

</div>

these

> [@Paulo](#):
>
> hundreds of nodes

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

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/nIgaLm90P)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![Paulo](https://avatars.discourse-cdn.com/v4/letter/p/bbce88/32.png) [@Paulo](https://discourse.processing.org/u/Paulo)\
**Post date:** [September 25, 2019, 1:24pm UTC](https://discourse.processing.org/t/mousepressed-with-several-objects/14157/3 "2019-09-25T13:24:38Z")

</div>

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.