Thursday, October 23, 2025
HomeLanguagesJavascriptp5.js box() Function

p5.js box() Function

The box() function in p5.js is used to draw a box with given height, width and the depth.

Syntax:

box( width, height, depth, detailX, detailY )

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

  • width: This parameter stores the width of the box.
  • height: This parameter stores the height of the box.
  • depth: This parameter stores the depth of the box.
  • detailX: This parameter stores the optional number of triangle subdivisions in x-dimension.
  • detailY: This parameter stores the optional number of triangle subdivisions in y-dimension.
  • Below programs illustrate the box() function in p5.js:

    Example 1: This example uses box() function to draw a box.




    function setup() {
          
        // Create Canvas of size 600*600
        createCanvas(600, 600, WEBGL);
    }
       
    function draw() {
          
        // Set background color
        background(200);
         
        // Set fill color of box
        fill('green');
         
        // box() function
        box(300, 400, 200);
    }

    
    

    Output:

    Example 2: This example uses box() function to draw a box.




    function setup() {
        
        // Create Canvas of size 600*600
        createCanvas(600, 600, WEBGL);
    }
       
    function draw() {
          
        // Set background color
        background(200);
         
        // Set fill color of box
        fill('yellow');
         
        // Rotate 
        rotateX(frameCount * 0.01);
        rotate(frameCount*0.03);
         
        // box() function called
        box(140, 130, 120);
    }

    
    

    Output:

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

    Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
    RELATED ARTICLES

    Most Popular

    Dominic
    32361 POSTS0 COMMENTS
    Milvus
    88 POSTS0 COMMENTS
    Nango Kala
    6728 POSTS0 COMMENTS
    Nicole Veronica
    11892 POSTS0 COMMENTS
    Nokonwaba Nkukhwana
    11954 POSTS0 COMMENTS
    Shaida Kate Naidoo
    6852 POSTS0 COMMENTS
    Ted Musemwa
    7113 POSTS0 COMMENTS
    Thapelo Manthata
    6805 POSTS0 COMMENTS
    Umr Jansen
    6801 POSTS0 COMMENTS