p5.Camera lookAt() Method

The lookAt() method of p5.Camera in p5.js is used to reorient the camera to look at the given position in the world space. The position of the camera does not change during the reorientation.

Syntax:

lookAt( x, y, z )

Parameters: This method accepts three parameters as mentioned above and described below:

• x: It is a number that denotes the x position of the point in world space.
• y: It is a number that denotes the y position of the point in world space.
• z: It is a number that denotes the z position of the point in world space.

The example below illustrates the lookAt() method in p5.js:

Example 1:

Javascript

let currCamera;

function setup() {
  createCanvas(500, 500, WEBGL);
  helpText = createP(
    "Move the sliders to change the " +
    "position where the camera is looking"
  );
  helpText2 = createP(
    "The sphere shows the point where " +
    "the camera is currently looking"
  );
  helpText.position(20, 0);
  helpText2.position(20, 110);

  // Create the camera
  currCamera = createCamera();

  // Create three sliders for changing the
  // direction that the camera will look at
  xPosSlider = createSlider(-360, 360, 0);
  xPosSlider.position(20, 60);

  yPosSlider = createSlider(-360, 360, 0);
  yPosSlider.position(20, 80);

  zPosSlider = createSlider(-360, 360, 100);
  zPosSlider.position(20, 100);
}

function draw() {
  clear();
  lights();
  normalMaterial();
  debugMode();

  // Get the x, y, z values from the
  // sliders
  let currX = xPosSlider.value();
  let currY = yPosSlider.value();
  let currZ = zPosSlider.value();

  // Look at the given points in
  // the world space
  currCamera.lookAt(currX, currY, currZ);

  // Show the point where the camera is
  // currently looking at (for demonstration)
  translate(currX, currY, currZ);
  sphere(5);
  translate(-currX, -currY, -currZ);

  rotateX(50);
  rotateY(50);
  box(90);
}

Output:

Example 2:

Javascript

let currCamera;
let currX = 0;
let currY = 0;
let currZ = 0;

function setup() {
  createCanvas(500, 400, WEBGL);
  helpText = createP(
    "Click the buttons to change direction " +
    "that the camera is looking at");
  helpText.position(20, 0);

  currCamera = createCamera();

  // Create three buttons for changing the
  // direction of the camera
  newCameraBtn = createButton("Look Left");
  newCameraBtn.position(20, 40);
  newCameraBtn.mouseClicked(lookLeftCamera);

  newCameraBtn = createButton("Look Up");
  newCameraBtn.position(170, 40);
  newCameraBtn.mouseClicked(lookUpCamera);

  newCameraBtn = createButton("Look Right");
  newCameraBtn.position(320, 40);
  newCameraBtn.mouseClicked(lookRightCamera);
}

function lookLeftCamera() {
  currX = currX - 25;

  // Look at the given position
  // in the world space
  currCamera.lookAt(currX, currY, currZ);
}

function lookUpCamera() {
  currY = currY - 25;

  // Look at the given position
  // in the world space
  currCamera.lookAt(currX, currY, currZ);
}

function lookRightCamera() {
  currX = currX + 25;

  // Look at the given position
  // in the world space
  currCamera.lookAt(currX, currY, currZ);
}

function draw() {
  clear();
  normalMaterial();

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

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/lookAt