p5.Camera.tilt() does not update the up vector leading to rapid orientation flipping

Most appropriate sub-area of p5.js?

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

p5.js version

1.11.1 and earlier recent versions

Web browser and version

Firefox 132.0.2 / Edge 130.0.2849.80

Operating system

Windows 11 Home / Pro

Steps to reproduce this

Steps:

1.Running the code below, continue moving the mouse up or down until the orientation starts rapidly flipping (seen when the line attached to a cube flips). 2.View the browser/p5 editor log to see that the camera's up vector has not been changed by tilt(). 3.Hold down the control key while moving the mouse to apply a workaround that updates the up vector and prevents orientation flipping.

Snippet:


let cam;

function setup() {
  angleMode(DEGREES);
  createCanvas(400, 400, WEBGL);
  cam = createCamera();
  cam.setPosition(0,0,0);
}

function draw() {
  background(220);
  let d = 800;
  drawBox(0, 0, -d);
  drawBox(0, -d, -d);
  drawBox(0, -d, 0);
  drawBox(0, -d, d);
  drawBox(0, 0, d);
  drawBox(0, d, d);
  drawBox(0, d, 0);
  drawBox(0, d, -d);
}

function drawBox(x, y, z) {
  push();
  stroke("red");
  strokeWeight(10);
  translate(x, y, z);
  line(0, 0, 0, 0, 0, 200);
  stroke("black");
  strokeWeight(1); 
  rotateY(45);
  box(100);
  pop();
}

function mouseMoved(event) {  
  cam.tilt((mouseY-pmouseY)/2);

  // Hold down control key to set cam.up correctly:
  if (event.ctrlKey) {
    let forward = createVector(
      cam.centerX - cam.eyeX,
      cam.centerY - cam.eyeY,
      cam.centerZ - cam.eyeZ
    );
    let up = createVector(cam.upX, cam.upY, cam.upZ);
    let right = p5.Vector.cross(forward, up);
    up = p5.Vector.cross(right, forward).normalize();
    cam.camera(
      cam.eyeX, cam.eyeY, cam.eyeZ,
      cam.centerX, cam.centerY, cam.centerZ,
      up.x, up.y, up.z
    );
  }

  console.log(cam.upX, cam.upY, cam.upZ);
}

processing / p5.js

p5.Camera.tilt() does not update the up vector leading to rapid orientation flipping #7377