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.w3wiki.net/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5.Camera/lookAt