Skip to content

Implemented roll function #6819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Implemented roll function #6819

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b528225
implemented roll function
haroon10725 Feb 18, 2024
a557f60
Update sketch.js
haroon10725 Feb 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/webgl/p5.Camera.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1058,6 +1058,64 @@ p5.Camera = class Camera {
);
}

/**
* Rolling rotates the camera view in forward direction.
* @method roll
* @param {Number} angle amount to rotate camera in current
* <a href="#/p5/angleMode">angleMode</a> units.
* Greater than 0 values rotate counterclockwise (to the left).
* @example
* <div>
* <code>
* let cam;
* let delta = 0.01;
*
* function setup() {
* createCanvas(100, 100, WEBGL);
* normalMaterial();
* cam = createCamera();
* // set initial pan angle
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are a few uses of pan in comments, should these be roll?

* cam.roll(-0.8);
* }
*
* function draw() {
* background(200);
*
* // pan camera according to angle 'delta'
* cam.roll(delta);
*
* // every 160 frames, switch direction
* if (frameCount % 160 === 0) {
* delta *= -1;
* }
*
* rotateX(frameCount * 0.01);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we're going to be doing something akin to a rotateZ by applying the roll(), I think it'll probably look clearer visually if we keep a vertical stack of cubes that are rotating about the vertical axis since the whole stack will be spinning clockwise/counterclockwise from the roll. That'd be the same as the cubes in the tilt example:

  rotateY(frameCount * 0.01);
  translate(0, -100, 0);
  box(20);
  translate(0, 35, 0);
  box(20);
  translate(0, 35, 0);
  box(20);
  translate(0, 35, 0);
  box(20);
  translate(0, 35, 0);
  box(20);
  translate(0, 35, 0);
  box(20);
  translate(0, 35, 0);
  box(20);

* translate(0, 0, -100);
* box(20);
* translate(0, 0, 35);
* box(20);
* translate(0, 0, 35);
* box(20);
* translate(0, 0, 35);
* box(20);
* translate(0, 0, 35);
* box(20);
* translate(0, 0, 35);
* box(20);
* translate(0, 0, 35);
* box(20);
* }
* </code>
* </div>
*
* @alt
* camera view pans in forward direction across a series boxes.
*/
roll(amount) {
const local = this._getLocalAxes();
this._rotateView(amount, local.z[0], local.z[1], local.z[2]);
}

/**
* Panning rotates the camera view to the left and right.
* @method pan
Expand Down