p5.Camera lookAt() Method

28 Jul, 2020
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
JavaScript-p5.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to Open URL in New Tab using JavaScript ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?