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

[franolichdesign]

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.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);
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[rishabhs-rizz]

could you assign this issue to me, i'll try to fix it too

[franolichdesign]

Hi! Thanks for taking a look at this. Unfortunately I do not have permission to assign the issue on GitHub. As a p5/GitHub noobie I'm not sure how to proceed so I'll follow your suggestions. Cheers, Fran

…

On Tue, 26 Nov 2024 at 10:42, rishabhs-rizz ***@***.***> wrote: could you assign this issue to me, i'll try to fix it too — Reply to this email directly, view it on GitHub <#7377 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR2R7HCPG4XA6WL2AJKP7B32CRGCRAVCNFSM6AAAAABR4P2RRGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMBQGI3DSMRRGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[davepagurek]

@all-contributors please add @franolichdesign for bug, code

[allcontributors]

@davepagurek

I've put up a pull request to add @franolichdesign! 🎉