p5.js | createCamera() Function
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); } |
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/createCamera
Please Login to comment...