Thursday, November 20, 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
    32405 POSTS0 COMMENTS
    Milvus
    97 POSTS0 COMMENTS
    Nango Kala
    6780 POSTS0 COMMENTS
    Nicole Veronica
    11927 POSTS0 COMMENTS
    Nokonwaba Nkukhwana
    11995 POSTS0 COMMENTS
    Shaida Kate Naidoo
    6906 POSTS0 COMMENTS
    Ted Musemwa
    7163 POSTS0 COMMENTS
    Thapelo Manthata
    6862 POSTS0 COMMENTS
    Umr Jansen
    6847 POSTS0 COMMENTS