p5.Camera tilt() Method

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();

  // Set the angle mode to be used
  angleMode(DEGREES);

  // Create three buttons for tilting the camera
  newCameraBtn = createButton("Tilt Up");
  newCameraBtn.position(60, 40);
  newCameraBtn.mouseClicked(tiltCameraUp);

  newCameraBtn = createButton("Tilt Down");
  newCameraBtn.position(360, 40);
  newCameraBtn.mouseClicked(tiltCameraDown);
}

function tiltCameraUp() {

  // Tilt the camera up using
  // a value less than 0
  currCamera.tilt(-10);
}

function tiltCameraDown() {

  // Tilt the camera up using
  // a value greater than 0
  currCamera.tilt(10);
}

function draw() {
  clear();
  lights();
  specularMaterial('blue');

  // Create three boxes at three positions
  translate(-150, 0);
  box(65);
  translate(150, 0);
  box(65);
  translate(150, 0);
  box(65);
  translate(-150, 0);

  // Draw 2 spheres only visible after
  // tilting up and down
  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/amp/

Reference: https://p5js.org/reference/#/p5.Camera/tilt