Open In App

p5.js frustum() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 04 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads