P5.js: mouseIsClicked condition.

[RoseCrime]

Nature of issue?

• [ ] Found a bug
• [ ] Existing feature enhancement
• [x] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core
• [ ] Data
• [x] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [ ] Others (specify if possible)

New feature details:

mouseIsClicked condition.

We have mouseIsPressed condition already and mouseClicked function,yep.
But the point is - I want to trigger click function on my canvas "button" only once - so mouseIsPressed will not help me - it will trigger button every frame mouse is pressed until releasing.
It's not the way I want it to work.

MouseClicked() function - I already using it,but here's the BUT too.
I want to keep things associated with function exactly inside this function.
So as simple example:

If I have huge code and function

function makeChoise() {
//some things associated with this function,maybe even drawing buttons.
    if(mouseIsClicked){
        if(PositionsForButton1){
            //actions for button1}
        }
        else if(PositionsForButton2){
            //actions for button2}
        }
        else if(PositionsForButton3){
            //actions for button3}
        }
    }
}

For sure I want to hold things which will check if I clicked mouse on some button exactly inside this function , not somewhere outside (not inside mouseClicked function,it mess things up a bit,if I have many buttons of different "game" stages with different buttons).

Hope it wasn't too selfishly :D
I believe this thing can make our code look better.

[meiamsome]

So the issue with this is that a click is an instantaneous event whereas your code is ran over time.

Imagine the following code:

function draw() {
  if(mouseIsClicked) {
   // runs
  }
  // other stuff
  if(mouseIsClicked) {
   // maybe runs?
  }
}

If clicked before the draw loop, you'd probably think both of these make sense to be truthy, and I'd agree - but what about code not running in the draw loop? When does the clicked state change? If it's only for one draw loop then code in other events could easily execute multiple times between draw loops. Having variables like this for instantaneous events is impractical for those reasons, which is why there is only mouseIsPressed - because that's a long-term state.

There's usually a good way to solve this depending upon your needs. Things like having good OOP where you have a list of buttons makes it simple to dispatch the event to them:

var buttons = [];

// Somewhere current buttons are added to the buttons array

function mouseClicked() {
  buttons.forEach(function(button) {
    button.mouseClicked();
  });
}

Hopefully that helps!

[lmccart]

thanks @meiamsome! yes the mouseClicked function should do exactly what you're describing. you can setup a listener for any global click, or for a specific element(s). for further help with this, check out the forum
https://p5js.org/reference/#/p5/mouseClicked
https://p5js.org/reference/#/p5.Element/mouseClicked

[RoseCrime]

You're right ,it may cause problems with wrong usage,but as what I meant and where I see it useful:

Function draw() {
    Stage1();
    Stage2();
    Stage3();
}


function stage1() {
    if (condition) {
        //This stage only runs with condition and have it's own mouseIsClicked conditions too.
        //So at this point 
        //it has it 's own buttons exactly in this function.
        //SomeCode associated for this stage.
        if (mouseIsClicked) {
            if (PositionsForButton1) {
                //actions for button1}
            } else if (PositionsForButton2) {
                //actions for button2}
            } else if (PositionsForButton3) {
                //actions for button3}
            }
        }

    }
}


function stage2() {
    if (condition) {
        //same thing.No conflicts.They're totally separate.
        //Code associated with this stage.
        if (mouseIsClicked) {
            if (PositionsForButton1) {
                //actions for button1}
            } else if (PositionsForButton2) {
                //actions for button2}
            } else if (PositionsForButton3) {
                //actions for button3}
            }
        }
    }
}


function stage3() {
    if (condition) {
        //Code associated with this stage.
        if (mouseIsClicked) {
            if (PositionsForButton1) {
                //actions for button1}
            } else if (PositionsForButton2) {
                //actions for button2}
            } else if (PositionsForButton3) {
                //actions for button3}
            }
        }

    }
}

As for me it's perfect,since everything on it's own places and every button inside it's own function.

With only mouseClicked function we'll need to check same conditions for mouseClicked function(once again) and move every button click to it.Not that much problem,but a bit messy.

Guess you misunderstood me, cause I didn't showed more details , when I should.Hope you'll at least read this comment at last.

[meiamsome]

@RoseCrime I can see why you might want this, but it is a bad programmatic design practice due to the reasons above. You can emulate this behaviour with:

var mouseIsClicked = false;

function draw() {
  // Your draw code here
  mouseIsClicked = false;
}

function mouseClicked() {
  mouseIsClicked = true;
}

[RoseCrime]

@meiamsome
Alright,guess you just suggested best solution in my case.
Now you convinced me :)
Thank you for your attention.

[Abdur-rahmaanJ]

why does p5js just not follow the processing API?