p5.js rect() Function

0 0 1 minute read

The rect() function is an inbuilt function in p5.js which is used to draw the rectangle on the screen. A rectangle contains four sides and four angles. Each angle of the rectangle is 90 degree. The length of the opposite sides of rectangles are equal.

Syntax:

rect( x, y, w, h, tl, tr, br, bl )

rect( x, y, w, h, detailX, detailY )

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

x: It is used to set the x-coordinate of rectangle.
y: It is used to set the y-coordinate of rectangle.
w: It is used to set the width of rectangle.
h: It is used to set the height of rectangle.
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.
detailX: It is used to set the number of segment in x-direction.
detailY: It is used to set the number of segment in y-direction.

Example 1:

javascript

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

Output:

Example 2:

javascript

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

Output:

Example 3:

javascript

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