[p5.js 2.0 Bug Report]: Unnatural behavior when executing orbitControl() on Android phones

[inaridarkfox4231]

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

2.0.0

Web browser and version

Chrome

Operating system

Android

Steps to reproduce this

Steps:

1. Perform swipe rotation with orbitControl() on an Android smartphone.
2. Then, perform a swipe outside the canvas element.
3. If I swipe over the canvas element again, orbitControl() doesn't get executed.

Snippet:

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

function draw() {
  background(220);
  orbitControl();
  box(100);
}

[inaridarkfox4231]

This may be difficult to understand, so I've attached a video.

az_recorder_20250825_185712.mp4

In this video, we first rotate a cube using orbitControl() in 1.11.10, then swipe the black part at the bottom of the screen, and then rotate the cube again.

In the second half, I changed the version of p5.js to 2.0.0 and performed the same operation. However, after swiping the black part, I was unable to rotate the cube.

[inaridarkfox4231]

To investigate this situation, I modified the raw p5.js 2.0.0 code as follows:

before:

  if (pointersInCanvas){
    this._renderer.executeRotateAndMove = true;
  }

after:

  if (pointersInCanvas){
    console.log('pointersInCanvas'); // insert
    this._renderer.executeRotateAndMove = true;
  }

before:

  if ((deltaTheta !== 0 || deltaPhi !== 0) &&
  this._renderer.executeRotateAndMove) {
    // accelerate rotate velocity
    this._renderer.rotateVelocity.add(
      deltaTheta * rotateAccelerationFactor,
      deltaPhi * rotateAccelerationFactor
    );
  }

after:

  if ((deltaTheta !== 0 || deltaPhi !== 0) &&
  this._renderer.executeRotateAndMove) {
    // accelerate rotate velocity
    console.log('accelerate rotate velocity'); // insert
    this._renderer.rotateVelocity.add(
      deltaTheta * rotateAccelerationFactor,
      deltaPhi * rotateAccelerationFactor
    );
  }

Log the amount of rotation.

      if (this._renderer.rotateVelocity.magSq() > 0.000001) {
        // if freeRotation is true, the camera always rotates freely in the direction the pointer moves
        if (freeRotation) {
          cam._orbitFree(
            -this._renderer.rotateVelocity.x,
            this._renderer.rotateVelocity.y,
            0
          );
        } else {
          console.log(`rotation:${this._renderer.rotateVelocity.x},${this._renderer.rotateVelocity.y}`); // insert
          cam._orbit(
            this._renderer.rotateVelocity.x,
            this._renderer.rotateVelocity.y,
            0
          );
        }
        // damping
        this._renderer.rotateVelocity.mult(damping);
      } else {
        this._renderer.rotateVelocity.set(0, 0);
      }

I then checked the behavior with a stylus and found that it was working properly.

2025-08-25.20-21-03.mp4

[inaridarkfox4231]

see below.

orbitControlBUG

az_recorder_20250825_202425.mp4

In this video, I run the sketch using modified p5.js 2.0.0 on an Android phone. I first rotate the cube, then swipe on the black area, and finally rotate the cube again. Of course, it fails.

Looking at the logs, the rotation is not being executed. Strangely,

console.log('pointersInCanvas');

does not seem to be executed. For some reason, only

console.log('accelerate rotate velocity');

is executed.

Is this an Android phone issue? Does this issue not occur with an iPhone? I don't know.

It works without any issues if 1.11.10.
For 2.0.0 or later, It works without any issues if we use mouse or stylus, but do not work if touch.

That's it. I'm not interested in implementing 2.0.0 so I can't pursue this issue any further.

[ksen0]

Thank you for the detailed report @inaridarkfox4231 !

I will investigate the behavior on iOS with 2.0.0 and with 2.0.4 (or latest), using the steps above. (Interested contributors are welcome to investigate also and post their findings, or propose solutions.)

[inaridarkfox4231]

I've done some more research since then, so I'll add more here.
I made some slight changes to the patch used to investigate the behavior, to make the touch behavior easier to understand.

version is p5.js 2.0.0.

for touches...

before

    fn._updatePointerCoords = function (e) {
      if (this._curElement !== null) {
         const canvas = this._curElement.elt;
         const sx = canvas.scrollWidth / this.width || 1;
         const sy = canvas.scrollHeight / this.height || 1;

         if (e.pointerType == 'touch') {
            const touches = [];
            for (const touch of this._activePointers.values()) {
               touches.push(getTouchInfo(canvas, sx, sy, touch));
            }
            this.touches = touches;
         } else {

after

    fn._updatePointerCoords = function (e) {
      if (this._curElement !== null) {
         const canvas = this._curElement.elt;
         const sx = canvas.scrollWidth / this.width || 1;
         const sy = canvas.scrollHeight / this.height || 1;

         if (e.pointerType == 'touch') {
            const touches = [];
            for (const touch of this._activePointers.values()) {
               touches.push(getTouchInfo(canvas, sx, sy, touch));
            }
            this.touches = touches;
            console.log(touches.length); /* Gets the value of touches.length. */
         } else {

for orbitControl()...

before

        if (movedTouches.length === 1) {
          const t = movedTouches[0];
          deltaTheta = -sensitivityX * (t.x - t.px) / scaleFactor;
          deltaPhi = sensitivityY * (t.y - t.py) / scaleFactor;
        } else {
          const t0 = movedTouches[0];
          const t1 = movedTouches[1];
          const distWithTouches = Math.hypot(t0.x - t1.x, t0.y - t1.y);
          const prevDistWithTouches = Math.hypot(t0.px - t1.px, t0.py - t1.py);
          const changeDist = distWithTouches - prevDistWithTouches;
          // move the camera farther when the distance between the two touch points
          // decreases, move the camera closer when it increases.
          deltaRadius = -changeDist * sensitivityZ * touchZoomScaleFactor;
          // Move the center of the camera along with the movement of
          // the center of gravity of the two touch points.
          moveDeltaX = 0.5 * (t0.x + t1.x) - 0.5 * (t0.px + t1.px);
          moveDeltaY = 0.5 * (t0.y + t1.y) - 0.5 * (t0.py + t1.py);
        }
        if (this.touches.length > 0) {
          if (pointersInCanvas) {
            // Initiate an interaction if touched in the canvas
            this._renderer.executeRotateAndMove = true;
            this._renderer.executeZoom = true;
          }
        } else {

after

        if (movedTouches.length === 1) {
          console.log(`Hello, orbitControl! ${movedTouches.length}`); /* Check whether the value of movedTouches.length is 1 */
          const t = movedTouches[0];
          deltaTheta = -sensitivityX * (t.x - t.px) / scaleFactor;
          deltaPhi = sensitivityY * (t.y - t.py) / scaleFactor;
        } else {
          const t0 = movedTouches[0];
          const t1 = movedTouches[1];
          const distWithTouches = Math.hypot(t0.x - t1.x, t0.y - t1.y);
          const prevDistWithTouches = Math.hypot(t0.px - t1.px, t0.py - t1.py);
          const changeDist = distWithTouches - prevDistWithTouches;
          // move the camera farther when the distance between the two touch points
          // decreases, move the camera closer when it increases.
          deltaRadius = -changeDist * sensitivityZ * touchZoomScaleFactor;
          // Move the center of the camera along with the movement of
          // the center of gravity of the two touch points.
          moveDeltaX = 0.5 * (t0.x + t1.x) - 0.5 * (t0.px + t1.px);
          moveDeltaY = 0.5 * (t0.y + t1.y) - 0.5 * (t0.py + t1.py);
        }
        if (this.touches.length > 0) {
          if (pointersInCanvas) {
            console.log(`pointersInCanvas moved touches:${movedTouches.length}`); /* Get the value of movedTouches.length */
            // Initiate an interaction if touched in the canvas
            this._renderer.executeRotateAndMove = true;
            this._renderer.executeZoom = true;
          }
        } else {

I used this patch to run the sketch.
orbitControl BUG

As a result, it turns out that touches.length increases without bound each time you swipe outside the canvas.

In this situation, if you swipe inside the canvas, for some reason the value does not decrease, and seems to remain the same no matter how much you swipe. Therefore, it never becomes 1. According to the specifications of orbitControl(), rotation cannot be performed unless this value becomes 1, and this seems to be the cause.

I think it's normal to accidentally swipe at outside the canvas, so I think this is a bug.

I don't understand why touches.length keeps increasing without bound. I tried it and it seems that WEBGL mode isn't necessary if touch works. Even with a simple sketch like this, touches.length keeps increasing the more you swipe at outside the canvas.

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

function draw() {
  background(220);
}

However, since orbitControl() is designed so that the number of touch pointers has a significant impact on its behavior, this bug has occurred.

That's all for the additional information.

[inaridarkfox4231]

compare 1.11.10 and 2.0.0 below:

touch BUG

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

function draw() {
  background(200);

  // Draw a circle at each touch point.
  for (let touch of touches) {
    circle(touch.x, touch.y, 40);
  }
textSize(40);
  text(touches.length,50,50);
}

2025-08-31.01-23-58.mp4

[inaridarkfox4231]

I created an additional demo that shows the contents of the touch array.
version is 2.0.4.

touch BUG 2

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

function draw() {
  background(200);

  // Draw a circle at each touch point.
  for (let touch of touches) {
    circle(touch.x, touch.y, 40);
  }
  textAlign(LEFT,TOP);
  textSize(13);
  text(touches.length,5,20);

  if(touches.length>0){
    for(let h=0; h<touches.length; h++){
      text(showTouch(touches[h]),5,40+16*h);
    }
  }
}

function showTouch(t){
  return `x:${floor(t.x)}, y:${floor(t.y)}, winX:${floor(t.winX)}, winY:${floor(t.winY)}, id:${t.id}`;
}

2025-08-31.09-44-13.mp4

The ID keeps increasing without limit and never disappears. Furthermore, if you try running the program, you'll see that when you stop it and restart it, it starts from the previous ID. Is it remembered by the browser? I don't know.

[inaridarkfox4231]

Related issues: #7378