Open In App

p5.js setCamera() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The setCamera() function in p5.js is used to set the renderer’s current camera to the given p5.Camera object. This can be used to switch to multiple cameras.

Syntax:

setCamera( cam )

Parameters: This function accept a single parameter as mentioned above and described below: 

  • cam: It is a p5.Camera object that the function will change the camera to.

The example below illustrates the setCamera() function in p5.js:
Example:

javascript




let cameras = [];
let currCameraIndex = 0;
  
function setup() {
  createCanvas(600, 400, WEBGL);
  helpText = createP(
    "Click on the buttons to switch to the"+
    " next camera of the sketch"
  );
  helpText.position(20, 0);
  
  // Button to switch to the next camera
  // in the scene
  newCameraBtn = createButton("Switch to Next Camera");
  newCameraBtn.position(20, 40);
  newCameraBtn.mouseClicked(switchActiveCamera);
  
  // Create 5 cameras and store into array
  for (let i = 0; i < 5; i++) {
    cameras[i] = createCamera();
  
    // Randomly set the position the camera
    // is looking at using setPosition()
    randomX = floor(random(-100, 100));
    randomY = floor(random(-100, 100));
  
    cameras[i].setPosition(randomX, randomY, 350);
  }
}
  
function switchActiveCamera() {
  // Increment the camera index
  if (currCameraIndex < 4) currCameraIndex += 1;
  else currCameraIndex = 0;
  
  // Set the camera from the camera array
  // to that index
  setCamera(cameras[currCameraIndex]);
}
  
function draw() {
  clear();
  orbitControl();
  normalMaterial();
  
  // Create three boxes at three positions
  translate(-150, 0);
  box(65);
  translate(150, 0);
  box(65);
  translate(150, 0);
  box(65);
}


Output:
 

setCamera-switch

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/setCamera
 



Last Updated : 24 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads