Skip to content
Related Articles

Related Articles

Improve Article

p5.js frustum() Method

  • Last Updated : 04 Mar, 2021

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :