Closed
Description
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);
}