p5.js square() Function

0 0 1 minute read

The square() function is an inbuilt function in p5.js which is used to draw the square on the screen. A square contains four equal sides and four angles each of 90 degrees. It is the special case of a rectangle where width and height are equal.

Syntax:

square( x, y, s, tl, tr, br, bl )

Parameters: This function accept many parameters as mentioned above and described below:

x: It is used to set the x-coordinate of square.
y: It is used to set the y-coordinate of square.
s: It is used to set the size of side of square.
tl: It is optional parameter and used to set the radius of top-left corner.
tr: It is optional parameter and used to set the radius of top-right corner.
br: It is optional parameter and used to set the radius of bottom-right corner.
bl: It is optional parameter and used to set the radius of bottom-left corner.

Example 1:

function setup() {  
       
    // Create Canvas of given size  
    createCanvas(300, 300);  
   
}  
   
function draw() {  
       
    background(220); 
       
    // Use color() function 
    let c = color('green'); 
   
    // Use fill() function to fill color 
    fill(c); 
     
    // Draw a square 
    square(50, 50, 200); 
     
}  

Output:

Example 2:

function setup() {  
       
    // Create Canvas of given size  
    createCanvas(300, 300);  
   
}  
   
function draw() {  
       
    background(220); 
       
    // Use color() function 
    let c = color('green'); 
   
    // Use fill() function to fill color 
    fill(c); 
     
    // Draw a square 
    square(50, 50, 200, 20); 
     
}  

Output:

Example 3:

function setup() {  
       
    // Create Canvas of given size  
    createCanvas(300, 300);  
   
}  
   
function draw() {  
       
    background(220); 
       
    // Use color() function 
    let c = color('green'); 
   
    // Use fill() function to fill color 
    fill(c); 
     
    // Draw a square 
    square(50, 50, 200, 10, 20, 30, 40); 
     
}  

Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.zambiatek.com/p5-js-soundfile-object-installation-and-methods/

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!