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.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Reference: https://p5js.org/reference/#/p5/square