p5.Método de movimiento de cámara()

El método move() de p5.Camera en p5.js se usa para mover la cámara a lo largo de sus ejes locales en la cantidad especificada. Mantiene la orientación actual de la cámara mientras se mueve.

Sintaxis:

move( x, y, z )

Parámetros: este método acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:

x: Es un número que denota la cantidad de movimiento de la cámara a lo largo de su eje de izquierda a derecha.
y: Es un número que denota la cantidad de movimiento de la cámara a lo largo de su eje arriba-abajo.
z: es un número que denota la cantidad de movimiento de la cámara a lo largo de su eje hacia adelante y hacia atrás.

El siguiente ejemplo ilustra el método move() en p5.js:

Ejemplo 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);
}

Producción:

Ejemplo 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);
}

Producción: