# How to get instance p5 object when clicking on the div container?

**URL:** <https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831>\
**Category:** Coding Questions\
**Created:** [November 22, 2022, 8:11pm UTC](https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831 "2022-11-22T20:11:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chris](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chris/32/17315_2.png) [@Chris](https://discourse.processing.org/u/Chris)\
**Post date:** [November 22, 2022, 8:11pm UTC](https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831/1 "2022-11-22T20:11:08Z")

</div>

Hello all !  
How to get instance p5 object when clicked on the div which contain this p5 instance canvas ?  
Actually, I have an array of array {divName,p5Inst} divname + P5 object. When I clic on the div, then I can get the P5 object. but I would like to know if it’s necessary to acces to P5 instance.  
Maybe I can find it from an other way without my array of array ?.  
exemple here : [p5.js Web Editor](https://editor.p5js.org/Pio-fr/sketches/Z90MC4M33)  
Thanks for your help.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 23, 2022, 2:01pm UTC](https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831/2 "2022-11-23T14:01:28Z")

</div>

Hi @Chris,

Short answer would be no, as the p5 object in not part of the underlying div, resp. canvas.  
The p5 object only have references to the div/drawing canvas and uses it.

But you can refactor your code in that way that it is bit more OO, so the single resizable divs are represented by its own class object which has its own p5 object and div on which the operations are done.

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 23, 2022, 3:49pm UTC](https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831/3 "2022-11-23T15:49:02Z")

</div>

So you have a webpage with multiple sketches and you want to know which should process the documents mouse events.

The simplest way would be for each sketch to process the mouse events ONLY IF the mouse is over its own canvas.

The sketch below shows a one way to do it and should be extendable to suit your purpose

```auto
let mySketch = function (p) {
    mouseOverCanvas = false;
    backCol = 128;
    div_name = 'sketch'; // Make sure you have a div with this ID

    p.setup = function () {
        let p5canvas = p.createCanvas(300, 200);
        p5canvas.parent(div_name); // Add to HTML element with the given ID 
        // Add event handlers for this sketch
        p5canvas.canvas.addEventListener('mouseenter', (e) => { mouseOverCanvas = true; });
        p5canvas.canvas.addEventListener('mouseout', (e) => { mouseOverCanvas = false; });
        p.x = p.width/2;
        p.y = p.height/2;
    }

    p.draw = function () {
        p.background(backCol);
        p.fill(255,0,0);
        p.noStroke();
        p.ellipse(p.x,p.y,20,20);
    }

    p.mouseClicked = function(){
        if(mouseOverCanvas){
            p.x = p.mouseX;
            p.y = p.mouseY;
        }
    }

    p.mouseDragged = function () {
        if (mouseOverCanvas)
            backCol = p.floor(p.random(256));
    }

}

new p5(mySketch);

```

---

<div class="post-metadata">

**Author:** ![Chris](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chris/32/17315_2.png) [@Chris](https://discourse.processing.org/u/Chris)\
**Post date:** [November 23, 2022, 4:05pm UTC](https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831/5 "2022-11-23T16:05:00Z")

</div>

Thank you mnse.  
You’r right more OO is better…  
I have to optimize all. And your suggestion is intresting.  
best regards.  
Chris

---

<div class="post-metadata">

**Author:** ![Chris](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chris/32/17315_2.png) [@Chris](https://discourse.processing.org/u/Chris)\
**Post date:** [November 23, 2022, 4:08pm UTC](https://discourse.processing.org/t/how-to-get-instance-p5-object-when-clicking-on-the-div-container/39831/6 "2022-11-23T16:08:53Z")

</div>

Thank you @quark  
your solution is very good I think. to put all interactions inside the P5 object.  
Moreover, it will make the code safer.  
I will work in this way.  
Best regards.  
Chris