diff --git a/src/accessibility/outputs.js b/src/accessibility/outputs.js
index d712c008bc..bf203ddfd9 100644
--- a/src/accessibility/outputs.js
+++ b/src/accessibility/outputs.js
@@ -579,19 +579,17 @@ p5.prototype._getPos = function (x, y) {
function _canvasLocator(args, canvasWidth, canvasHeight) {
const noRows = 10;
const noCols = 10;
+
let x = args[0];
let y = args[1];
- if (x < 0 || x >= canvasWidth || y < 0 || y >= canvasHeight) {
- return null;
- }
+
let locX = Math.floor(x / canvasWidth * noRows);
let locY = Math.floor(y / canvasHeight * noCols);
- if (locX === noRows) {
- locX = locX - 1;
- }
- if (locY === noCols) {
- locY = locY - 1;
- }
+
+ // clamp out of bounds values
+ locX = Math.min(Math.max(locX, 0), noRows - 1);
+ locY = Math.min(Math.max(locY, 0), noCols - 1);
+
return {
locX,
locY
diff --git a/src/events/mouse.js b/src/events/mouse.js
index c9a53cbe96..7d83626962 100644
--- a/src/events/mouse.js
+++ b/src/events/mouse.js
@@ -19,6 +19,11 @@ import * as constants from '../core/constants';
*
* Note: `movedX` continues updating even when
* requestPointerLock() is active.
+ * But keep in mind that during an active pointer lock, mouseX and pmouseX
+ * are locked, so `movedX` is based on
+ * the MouseEvent's movementX value
+ * (which may behave differently in different browsers when the user
+ * is zoomed in or out).
*
* @property {Number} movedX
* @readOnly
@@ -64,6 +69,11 @@ p5.prototype.movedX = 0;
*
* Note: `movedY` continues updating even when
* requestPointerLock() is active.
+ * But keep in mind that during an active pointer lock, mouseX and pmouseX
+ * are locked, so `movedX` is based on
+ * the MouseEvent's movementX value
+ * (which may behave differently in different browsers when the user
+ * is zoomed in or out).
*
* @property {Number} movedY
* @readOnly
@@ -810,15 +820,31 @@ p5.prototype._updateNextMouseCoords = function(e) {
e
);
+
this._setProperty('mouseX', mousePos.x);
this._setProperty('mouseY', mousePos.y);
this._setProperty('winMouseX', mousePos.winX);
this._setProperty('winMouseY', mousePos.winY);
- const deltaX = this.mouseX - this.pmouseX;
- const deltaY = this.mouseY - this.pmouseY;
- this._setProperty('movedX', deltaX);
- this._setProperty('movedY', deltaY);
+ if (document.pointerLockElement === null) {
+ // https://developer.mozilla.org/en-US/docs/Web/API/Document/pointerLockElement
+ // "The pointerLockElement ... is null if lock is pending, pointer is unlocked,
+ // or the target is in another document."
+ // In this case, we use mouseX/Y and pmouseX/Y to calculate the distance,
+ // which allows movedX/Y to look consistent at different zoom levels across
+ // browsers.
+ const deltaX = this.mouseX - this.pmouseX;
+ const deltaY = this.mouseY - this.pmouseY;
+ this._setProperty('movedX', deltaX);
+ this._setProperty('movedY', deltaY);
+ }
+ else {
+ // Because mouseX/Y and pmouseX/Y are locked, the elements movementX/Y
+ // is used for movedX/Y - this may behave differently on different
+ // browsers at different zoom levels.
+ this._setProperty('movedX', e.movementX);
+ this._setProperty('movedY', e.movementY);
+ }
}
if (!this._hasMouseInteracted) {
diff --git a/test/manual-test-examples/mouse-events/pointer-lock-movedx/index.html b/test/manual-test-examples/mouse-events/pointer-lock-movedx/index.html
new file mode 100644
index 0000000000..202329a285
--- /dev/null
+++ b/test/manual-test-examples/mouse-events/pointer-lock-movedx/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+ Manual test for movedX/Y with/without zoom and with/without pointer lock
+
+ - If you move the mouse around, you should see 1 moving circle and 1 still. While dragging mouse, they should move at the same rate.
+ - After zooming in/out, on all browsers, the circles should still move visually a constant distance relative to each other.
+ - Press any key to request pointer lock. Background will be pink if and only if pointer is locked. Now, if you drag the mouse, the small circle should be static (because mouseX/Y are locked) and the big circle should move unsurprisingly.
+
+
+
+
diff --git a/test/manual-test-examples/mouse-events/pointer-lock-movedx/sketch.js b/test/manual-test-examples/mouse-events/pointer-lock-movedx/sketch.js
new file mode 100644
index 0000000000..05a02a1b00
--- /dev/null
+++ b/test/manual-test-examples/mouse-events/pointer-lock-movedx/sketch.js
@@ -0,0 +1,31 @@
+function setup() {
+ createCanvas(400, 400);
+}
+
+let x = 200;
+let y = 200;
+function draw() {
+ if (document.pointerLockElement === null){
+ background(220);
+ } else{
+ background(200,0,200);
+ }
+
+ text(movedX, 20, 20);
+ text(movedY, 20, 40);
+ text(mouseX, 50, 20);
+ text(mouseY, 50, 40);
+ circle(mouseX, mouseY, 30);
+
+ //https://editor.p5js.org/SableRaf/sketches/zAXl3tNm5
+ if(mouseIsPressed){
+ x += movedX;
+ y += movedY;
+ }
+
+ circle(x, y, 50);
+
+}
+function keyPressed() {
+ requestPointerLock();
+}
\ No newline at end of file