# p5.Camera lookAt() Method

• Last Updated : 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/

My Personal Notes arrow_drop_up
Related Articles