The tilt() method of p5.Camera in p5.js is used to rotate the view, that is pan, of the camera according to the given amount of rotation. The camera can be panned both up or down by rotating the camera using a positive and negative rotation value.
Syntax:
tilt( angle )
Parameters: This method accepts a single parameter as mentioned above and described below:
- angle: It is a number that denotes the amount that the camera has to rotate. The units of rotation to be used can be specified using the angleMode() method. A value of less than 0 would pan the camera up. Similarly, a value greater than 0 would pan the camera down.
The example below illustrates the tilt() method in p5.js:
Example:
Javascript
let currCamera;
function setup() {
createCanvas(500, 400, WEBGL);
helpText = createP(
"Click the buttons to tilt " +
"the camera to up or down" );
helpText.position(80, 0);
currCamera = createCamera();
angleMode(DEGREES);
newCameraBtn = createButton( "Tilt Up" );
newCameraBtn.position(60, 40);
newCameraBtn.mouseClicked(tiltCameraUp);
newCameraBtn = createButton( "Tilt Down" );
newCameraBtn.position(360, 40);
newCameraBtn.mouseClicked(tiltCameraDown);
}
function tiltCameraUp() {
currCamera.tilt(-10);
}
function tiltCameraDown() {
currCamera.tilt(10);
}
function draw() {
clear();
lights();
specularMaterial( 'blue' );
translate(-150, 0);
box(65);
translate(150, 0);
box(65);
translate(150, 0);
box(65);
translate(-150, 0);
translate(0, 300, 0);
sphere(50);
translate(0, -600, 0);
sphere(50);
}
|
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Camera/tilt
Last Updated :
28 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...