p5.js createCamera() Function

Last Updated : 24 Aug, 2023

The createCamera() function in p5.js is used to create a p5.Camera object and tell the renderer to use it as the current camera. It returns the camera object it newly created.

Syntax:

createCamera()

Parameters: This function accepts no parameters.
Return Value: It returns a p5.Camera object that denotes the newly created camera.

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

javascript

let currCamera;

function setup() {
  createCanvas(500, 300, WEBGL);
  helpText = createP("Click on the buttons to create"+
                     "a camera and position it");
  helpText.position(20, 0);

  // Create three buttons for setting
  // a new camera for three directions
  newCameraBtn = createButton("Left Camera");
  newCameraBtn.position(20, 40);
  newCameraBtn.mouseClicked(createLeftCamera);

  newCameraBtn = createButton("Middle Camera");
  newCameraBtn.position(170, 40);
  newCameraBtn.mouseClicked(createMiddleCamera);

  newCameraBtn = createButton("Right Camera");
  newCameraBtn.position(320, 40);
  newCameraBtn.mouseClicked(createRightCamera);
}

function createLeftCamera() {
  // Create a new camera using createCamera()
  // and set its position
  currCamera = createCamera();
  currCamera.setPosition(-75, 0, 250);
}

function createMiddleCamera() {
  // Create a new camera using createCamera()
  // and set its position
  currCamera = createCamera();
  currCamera.setPosition(0, 0, 250);
}

function createRightCamera() {
  // Create a new camera using createCamera()
  // and set its position
  currCamera = createCamera();
  currCamera.setPosition(75, 0, 250);
}

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