incorrect `movedX` and `movedY` behavior on zoomed sketches in Chrome

[SableRaf]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.5

Web browser and version

Chrome 135.0.7049.115 (Official Build) (64-bit) (cohort: Stable)

Operating system

Windows 10

Steps to reproduce this

1. Open this sketch in Chrome: https://editor.p5js.org/SableRaf/sketches/zAXl3tNm5
2. Zoom the page in or out (e.g., Ctrl+ or Ctrl- / Cmd+ or Cmd-).
3. Click and drag the circle across the canvas.

let x = 200;
let y = 200;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // The code below causes unexpected behavior in Chrome if you zoom in/out
  
  if(mouseIsPressed){
    x += movedX;
    y += movedY; 
  }
  
  // The code below works correctly regardless of zoom level
  
  // if(mouseIsPressed){
  //   x += mouseX - pmouseX;
  //   y += mouseY - pmouseY; 
  // }
  
  circle(x,y,10);
}

Additional context

According to MDN:

Warning: Browsers use different units for movementX and screenX than what the specification defines. Depending on the browser and operating system, the movementX units may be a physical pixel, a logical pixel, or a CSS pixel. You may want to avoid the movement properties, and instead calculate the delta between the current client values (screenX, screenY) and the previous client values.

Related W3C issue: w3c/pointerlock#42

Suggestion
movedX and movedY should be updated internally to calculate based on mouseX - pmouseX and mouseY - pmouseY, rather than relying on movementX and movementY.

[IIITM-Jay]

Hi @ksen0 , @limzykenneth ,
I’ve opened PR #7795 with one possible fix, but I agree that it’s worth discussing multiple approaches before settling on a final solution. Below are 2–3 possible solutions that I thought of, but used which I felt the most suitable one.

Approach 1 Used in PR #7795 – current proposal

const deltaX = this.mouseX - this.pmouseX;
const deltaY = this.mouseY - this.pmouseY;
this._setProperty('movedX', deltaX);
this._setProperty('movedY', deltaY);

This approach leverages pmouseX, which is already set in _updateMouseCoords.

Approach 2 Manual tracking using temporary variables

Instead of relying on internal state tracking (pmouseX, mouseX), we could manually compute deltas using explicitly stored previous values as below:

const prevMouseX = this.mouseX;
const prevMouseY = this.mouseY;


const deltaX = mousePos.x - prevMouseX;
const deltaY = mousePos.y - prevMouseY;
this._setProperty('movedX', deltaX);
this._setProperty('movedY', deltaY);

Approach 3: Patch Only movedX Accessors

There is one more method that I thought to use which do not require modifying the core update functions. Instead of modifying _updateNextMouseCoords, we could override the getters for movedX and movedY to return the delta directly, but needed some suggestions on this.

Object.defineProperty(p5.prototype, 'movedX', {
  get: function() {
    return this.mouseX - this.pmouseX;
  }
});