Strange right click behavior

swirly

Found a strange right click behavior with google chrome.

Just used the code below

function draw() { if (mouseIsPressed) { if (mouseButton == LEFT ) { ellipse(mouseX,mouseY,80,80); } if (mouseButton == RIGHT ) { background(random(180,255),random(180,255),random(180,255)); } } }

with firefox, left click draw an ellipse. right click redraw the background.

with chrome, left click draw an ellipse, but right click make background blink until you click again in the windows. As if the right button was stuck. The mouseIsPressed seems to be persistant in chrome.

Any idea on the way to solve this problem ? How should I file a bug ?

swirly

One more thing.

If I randomize the ellipse size, the left button behave the same way for a few moments.

But if I use the

function mousePressed() { }

It's okay on chrome also

It is as if the MouseIsPressed indicator was sluggishly removed on chrome ...

strange ?

GoToLoop

Either way, mousePressed() + mouseReleased() give us more control:
http://p5js.org/reference/#/p5/mousePressed
http://p5js.org/reference/#/p5/mouseReleased

swirly

I agree it gives you more control. But for the beginnning pupils, it's more complicated to understand. Anyway, MouseIsPressed should work as expected and not stay on true even long after the button is released with right click. I've filed a bug in github finally. I've found a workaround for the rightclick behavior in chrome by adding a

oncontextmenu=" event.preventDefault();"

there is a real problem then.

Chrisir

did you try to use the function mousePressed

instead the var ?

it seems to be more stable

swirly

I effectively try to use the function wich seems to be more reliable. The mousePressed function would have been taught later in the cursus IMHO for my pupils. Testing a variable is simpler than having to explain about events.

Anyway, having something unstable should be considered as a bug. Isn't it ?

blindfish

@swirly: Interestingly the p5js source has the following comment:

Warning: different browsers may track mouseButton differently.

Unlike Processing, p5js has to operate in the context of a browser where you run into inconsitencies in different interpretations of the JavaScript standards. It looks like this may be the result of one such inconsistency. It's definitely worth reporting as a bug so someone can check the implementation.

I'd be cautious about relying on adding event.preventDefault to get around it (how do you explain that to beginners!?). Instead why not provide a sketch template that includes the mousePressed/Released methods built-in and that set an appropriate variable in the sketch context? They're separate from the functions where you'll want your students to add code; so students won't need to know anything more than that the functions set the value of the variable. You can later go back and use them to introduce the concept of event handling etc.

swirly

It's not totally equivalent to use the Pressed/Released, beacause you have to deal with drag. So you must have a flag mode, (pressed raise the flag -> draw, released pull the flag, don't draw anymore). More complicated, but can be done.

By the way, I've tried Processing P5JS on android with chrome and firefox mobile... almost all sketches of the gallery at least don't work or ... simply crash the browser !

swirly

By the way, thank you very very much everybody for you kind answers and your helpfull comments !

GoToLoop

All Processing variants got mouseMoved() & mousePressed() too:

1. http://p5js.org/reference/#/p5/mouseMoved
2. http://p5js.org/reference/#/p5/mouseDragged

blindfish

My previous message was a theoretical answer. Now that I'm at my PC and I can properly test this I can give a more practical answer: this really does look like a browser implementation issue. The following code - using mousePressed/Released exhibits the same unfortunate behaviour in Chrome:

// uncomment to 'solve' the problem
//window.addEventListener("contextmenu", function(e) { e.preventDefault(); })

var mDown = false;

function setup() {

}

function draw() {
    var fill = '#f90';
    if(mDown) {
        fill = '#9f0'
    }
    background(fill);
}

function mousePressed() {
    mDown = true;
}

function mouseReleased() {
    mDown = false;
}

There seem to be a lot of posts complaining of inconsistent handling of right-click events in browsers; so I doubt we'll have a solution in p5js. In practice if you're relying on right-button events in your sketch you should disable the context menu anyway - see commented out line above - though disabling built-in browser features is evil >:)

Also if you're eventually targeting mobile browsers you shouldn't be relying on right-click at all ;)

swirly

Thank you very much blindfish for taking the time to test this. Ah .... browserS...