processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.4k stars 3.28k forks source link

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

Closed SableRaf closed 2 months ago

SableRaf commented 7 months ago

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?

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 commented 7 months ago

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 commented 6 months ago

Hey @davepagurek , Can I work on this?

davepagurek commented 6 months ago

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

SableRaf commented 3 months ago

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.