Método p5.js camera()

La función camera() en p5.js se usa para establecer la posición de la cámara virtual en un boceto 3D. Esto se puede utilizar para simular la posición de la cámara mientras se mueve por la escena, lo que permite ver los objetos desde varios ángulos.

Los parámetros de esta función incluyen establecer la posición de la cámara, el centro de la cámara y el vector que apunta hacia arriba. 

Sintaxis:

camera([x], [y], [z], [centerX], [centerY], [centerZ],
            [upX], [upY], [upZ])

Parámetros: Esta función acepta nueve parámetros como se mencionó anteriormente y se describe a continuación:

• x: este es un número que indica la posición de la cámara en el eje x.
• y: este es un número que indica la posición de la cámara en el eje y.
• z: este es un número que indica la posición de la cámara en el eje z.
• centerX: este es un número que denota la coordenada x del centro del croquis. 
• centerY: este es un número que denota la coordenada y del centro del croquis.
• centerZ: este es un número que denota la coordenada z del centro del boceto.
• upX: este es un número que denota el componente x de la dirección ‘hacia arriba’ desde la cámara. 
• upY: este es un número que denota el componente y de la dirección ‘hacia arriba’ desde la cámara.
• upZ: este es un número que denota el componente z de la dirección ‘hacia arriba’ desde la cámara.

Los siguientes ejemplos ilustran la función camera() en p5.js:

Ejemplo 1: Establecer la vista de la cámara en el eje x.

function setup() {
    
  createCanvas(600, 400, WEBGL);
}
  
function draw() {
    
  background(175);
    
  // Map the coordinates of the mouse
  // to the variable
  let cX = map(mouseX, 0,
               width, -200, 200);
    
  // Set the camera to the given coordinates
  camera(cX, 0, (height/2) / tan(PI/6),
         cX, 0, 0, 0, 1, 0);
    
  ambientLight(255);
    
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.03);
  rotateY(frameCount * 0.06);
  noStroke();
  normalMaterial();
    
  box(100, 100, 100);
}

Producción:

Ejemplo 2: Configure la vista de la cámara en una dirección aleatoria en cada cuadro.

function setup() {
    
  frameRate(5);
  createCanvas(600, 400, WEBGL);
}
  
function draw() {
    
  background(175);
    
  let cX = random(-10,10);
  let cY = random(-10,10);
  let cZ = random(-10,10);
    
  camera(cX, cY,
         cZ+(height/2) / tan(PI/6),
         cX, 0, 0, 0, 1, 0);
    
  ambientLight(255);
    
  rotateX(frameCount * 0.1);
  rotateY(frameCount * 0.1);
    
  noStroke();
  normalMaterial();
    
  box(100, 100, 100);
}

Producción:

Reference:https://p5js.org/reference/#/p5.Camera