p5.js rect() Function
Last Updated :
11 Aug, 2023
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 )
or
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() {
createCanvas(400, 300);
}
function draw() {
background(220);
let c = color( 'green' );
fill(c);
rect(50, 50, 300, 200);
}
|
Output:
Example 2:
javascript
function setup() {
createCanvas(400, 300);
}
function draw() {
background(220);
let c = color( 'green' );
fill(c);
rect(50, 50, 300, 200, 30);
}
|
Output:
Example 3:
javascript
function setup() {
createCanvas(400, 300);
}
function draw() {
background(220);
let c = color( 'green' );
fill(c);
rect(50, 50, 300, 200, 10, 20, 30, 40);
}
|
Output:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/rect
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...