Added manual test for movedX/Y and requestPointerLock

ksen0 · ksen0 · commit 36668ba7158a · 2025-08-21T17:59:13.000+02:00
diff --git a/src/events/mouse.js b/src/events/mouse.js
@@ -21,9 +21,9 @@ import * as constants from '../core/constants';
  * <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
  * But keep in mind that during an active pointer lock, mouseX and pmouseX
  * are not locked, so `movedX` is based on
- * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX">the MouseEvent's movementX</a>
- * value. This value may behave different in different browsers when the user
- * is zoomed in or out.
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX">the MouseEvent's movementX value</a>
+ * (which may behave differently in different browsers when the user
+ * is zoomed in or out).
  *
  * @property {Number} movedX
  * @readOnly
@@ -835,7 +835,7 @@ p5.prototype._updateNextMouseCoords = function(e) {
     }
     else {
       // Because mouseX/Y and pmouseX/Y are locked, the elements movementX/Y
-      // is used for movedX/Y - this maz behave differently on different
+      // 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);
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
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+  <script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
+  </head>
+
+  <body>
+    <h1>Manual test for movedX/Y with/without zoom and with/without pointer lock</h1>
+    <ul>
+      <li>If you move the mouse around, you should see 1 moving circle and 1 still. While <strong>dragging mouse</strong>, they should move at the same rate.</li>
+      <li>After zooming in/out, on all browsers, the circles should still move visually a constant distance relative to each other.</li>
+      <li>Press any key to request pointer lock. Background will be pink if and only if pointer is locked. Now, if you <strong>drag the mouse</strong>, the small circle should be static (because mouseX/Y are locked) and the big circle should move unsurprisingly.</li>
+    </ul>
+      <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  </body>
+</html>
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
@@ -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();
+}
