p5.Camera move() Method

28 Jul, 2020
The move() method of p5.Camera in p5.js is used to move the camera along its local axes by the specified amount. It maintains the current camera orientation while moving.
Syntax:
move( x, y, z )
Parameters: This method accepts three parameters as mentioned above and described below:
x: It is a number that denotes the amount to move the camera along its left-right axis.
y: It is a number that denotes the amount to move the camera along its up-down axis.
z: It is a number that denotes the amount to move the camera along its forward-backward axis.
The example below illustrates the move() method in p5.js:
Example 1:
Javascript
let currCamera;  function setup() {  createCanvas(500, 500, WEBGL);  helpText = createP(    "Click the buttons to move the " +    "camera in that direction");  helpText.position(20, 0);    currCamera = createCamera();    // Create three buttons for moving the  // position camera  newCameraBtn = createButton("Move Left");  newCameraBtn.position(20, 40);  newCameraBtn.mouseClicked(moveCameraLeft);      newCameraBtn = createButton("Move Right");  newCameraBtn.position(120, 40);  newCameraBtn.mouseClicked(moveCameraRight);    newCameraBtn = createButton("Move Up");  newCameraBtn.position(20, 70);  newCameraBtn.mouseClicked(moveCameraUp);    newCameraBtn = createButton("Move Down");  newCameraBtn.position(120, 70);  newCameraBtn.mouseClicked(moveCameraDown);}  function moveCameraLeft() {    // Look at the given position  // in the world space  currCamera.move(-15, 0, 0);}  function moveCameraRight() {    // Look at the given position  // in the world space  currCamera.move(15, 0, 0);}  function moveCameraUp() {    // Look at the given position  // in the world space  currCamera.move(0, -15, 0);}  function moveCameraDown() {    // Look at the given position  // in the world space  currCamera.move(0, 15, 0);}  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:
Example 2:
Javascript
let currCamera;  function setup() {  createCanvas(500, 500, WEBGL);  helpText = createP(    "Move the sliders to keep moving " +    "the camera in a direction"  );  helpText.position(20, 0);    // Create the camera  currCamera = createCamera();    // Create three sliders for moving the  // position of the camera  xPosSlider = createSlider(-2, 2, 0);  xPosSlider.position(20, 40);    yPosSlider = createSlider(-2, 2, 0);  yPosSlider.position(20, 70);    zPosSlider = createSlider(-2, 2, 0);  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();    // Keep moving the camera according to  // to the given amount  currCamera.move(currX, currY, currZ);    box(90);}
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/move
JavaScript-p5.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.