Implementing a `roll()` function in p5.Camera

[SableRaf]

trafficstars

Increasing access

Introducing a roll() method for the p5.js camera would enhance the intuitiveness and consistency of 3D navigation in p5.js, aligning with standard practices in 3D graphics environments.

Most appropriate sub-area of p5.js?

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

Feature enhancement details

The current p5.js camera functionality includes pan() and tilt() methods, which allow horizontal and vertical rotation of the camera view respectively. However, it is missing the ability to roll the camera around its forward axis. This is a standard feature in many 3D graphics environments and is essential for a complete 3D navigation system, ensuring ease of use and consistency.

Behavior

Similar to pan() and tilt(), the roll() method would rotate the camera view, but instead of using the x or y-axis, it would use the z-axis (forward direction of the camera).

Naive implementation

roll(amount) {
  const local = this._getLocalAxes();
  this._rotateView(amount, local.z[0], local.z[1], local.z[2]);
};

Your feedback and suggestions on this feature are welcome.

[AviGawande]

hello @SableRaf i searched alot for setting up the p5.js project on my windows machine but can't start the server locally.could you please help me how to setup p5.js project locally and start working on it.

[haroon10725]

Hey @davepagurek , Can I work on this?

[davepagurek]

Hi @haroon10725, sure thing, I'll assign it to you! Maybe talk to @SableRaf about his experiments so far?

[SableRaf]

I removed assignees and added the Help Wanted label.

As @davepagurek said:

If anyone else is interested in taking this up, feel free to branch off this PR (https://github.com/processing/p5.js/pull/6819) so that the work @haroon10725 has put in also gets included! A next step could be to try out the suggestion in https://github.com/processing/p5.js/pull/6819#issuecomment-1960584109.