p5.js. Alert is spammed

Question

I have made a program that draws a box, and when I click on it it changes color and alerts me that it has been clicked. But the alert won't stop. It just keeps alerting me even after I stopped clicking on it.

Here is the code:

function setup() {
    createCanvas(600, 800);
}


function draw() {
    background(170)
    fill(0, 0, 255)
    if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225){
        fill(0, 0, 155)
    }
    rect(200, 200, 60, 25, 10)
    if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225 && mouseIsPressed){
        alert("You have pressed a button!")
    }
}

Keep in mind that the `draw()` function is called constantly. — Rainbow, Jul 11 '18 at 15:48

score 0 · Answer 1 · answered Jul 11 '18 at 13:15

Use mouseClicked function.

Like so:

function draw() {
    background(170)
    fill(0, 0, 255)
    if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225){
        fill(0, 0, 155)
    }
    rect(200, 200, 60, 25, 10)
}

function mouseClicked() {
    if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225){
        alert("You have pressed a button!")
    }
}

Logan Bertram · Answer 2 · 2018-07-11T14:07:41.663

0

mouseIsPressed has some known issues on some browsers. For the best reliability, use mousePressed() by changing this:

if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225 && mouseIsPressed){
    alert("You have pressed a button!")
  }

to this:

function mousePressed() {
  if (mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225) {
    alert("You have pressed a button!")
    return false
  }
}

mousePressed() will fire every time the mouse is clicked.

More information is available in the API Reference.

Since another answer was posted at about the same time, here is some information on using mousePressed() vs mouseClicked().

I've personally had some of the issues they mention and can attest that mousePressed() tends to be more reliable, and would only use mouseClicked() if it is vital that you capture BOTH the press and release actions.

edited Jul 11 '18 at 14:07

answered Jul 11 '18 at 13:16

Logan Bertram

1,874
1
16
22

ok thanks, but why the " alert == 0" and "return false". And what do they do? – Sanity Jul 11 '18 at 14:06
@Sanity I'm sorry, edited answer. I was planning to add a flag to help cover all your bases if something else was wrong. It was a variable named 'alert' with value 0 for no alert showing and value 1 for alert showing. I removed it to address problems one at a time, but missed that reference. `return false` overrides browser defaults for click-related actions. It just makes your function the priority. – Logan Bertram Jul 11 '18 at 14:10

Kevin Workman · Answer 3 · 2018-07-11T23:54:06.623

The other answers have told you what to do, but they haven't told you why this is happening.

Here's my understanding:

Calling the alert() function blocks the rest of your code's execution. The code will stop executing, and any interaction will be disabled- you won't be able to click on links or buttons, for example.

In P5.js, this means that mouse events (even simple events like updating mouseX and mouseY) will also be blocked.

Here's what your code does:

Shows an alert dialog, which blocks all events.
The user moves the mouse, but at this point P5.js can't "see" that they've moved the mouse off the button, because they're doing it when the alert dialog is displayed.
Then the user clicks the OK button. This unpauses your code, which in your case just fires the draw() function again. Keep in mind that mouseX and mouseY have not been updated yet, so P5.js still thinks you're on the button so it shows the alert dialog again.

As other answers have suggested, you can use the mouseClicked() or mousePressed() functions instead of checking mouseIsPressed.

function setup() {
    createCanvas(600, 800);
}

function draw() {
    background(170)
    fill(0, 0, 255)
    if (mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225) {
        fill(0, 0, 155)
    }
    rect(200, 200, 60, 25, 10)
}

function mousePressed() {
    if (mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225) {
        alert("You have pressed a button!")
    }
}

Now when the user closes the dialog, the draw() function continues as normal and events can be processed.

When you run this code, note that the button stays "pressed" even after the user closes the dialog, until they move the mouse. This is caused by the same event cancellation mentioned above.

Also note that alert dialogs are pretty annoying (and come with annoying side effects like we're talking about here), so you might be better off using a <div> that shows your message or showing your message in the sketch itself.

p5.js. Alert is spammed

3 Answers3