p5.js frustum() Method

The frustum() function in p5.js is used to set the frustum of the camera, thereby changing its perspective.

A frustum is a geometric form that can be obtained by cutting the top of a pyramid. The six planes of the remaining pyramid act as the clipping planes when rendering a 3D view. Thus, anything inside the clipping planes is visible and anything outside the plane is not visible.

Syntax:

frustum([left], [right], [bottom], [top], [near], [far])

Parameters: This function accepts six parameters as mentioned above and described below:

• left: This is a number that sets the camera frustum’s left plane.
• right: This is a number that sets the camera frustum’s right plane.
• bottom: This is a number that sets the camera frustum’s bottom plane.
• top: This is a number that sets the camera frustum’s top plane.
• near: This is a number that sets the camera frustum’s near plane.
• far: This is a number that sets the camera frustum’s far plane.

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

Example:

Javascript

function setup() {

  // Create a canvas of the
  // given size in WEBGL mode
  createCanvas(
    windowWidth, windowHeight,
    WEBGL);

  // Set the frustum of the camera
  frustum(-2.5, 2.5, -0.6,
          0.6, 1.0, 2000);
}

function draw() {

  background(200);
  orbitControl();
  strokeWeight(10);
  stroke(0, 0, 255);
  noFill();

  rotateX(map(mouseY, 0, height,
              0, TWO_PI));
  rotateY(map(mouseX, 0, width,
              0, TWO_PI));

  box(300);
}

Output:

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