P5.square(...params)
TIP
Source · This is a genji example to write API reference for web-based library. his version is adapted from the official documentation, now enhanced with Genji's reactivity features. For reference, you can check out the original documentation.
Description
Draws a square.
A square is a four-sided shape defined by the x, y, and s parameters. x and y set the location of its top-left corner. s sets its width and height. Every angle in the square measures 90˚ and all its sides are the same length. See rectMode() for other ways to define squares.
The version of square() with four parameters creates a rounded square. The fourth parameter sets the radius for all four corners.
The version of square() with seven parameters also creates a rounded square. Each of the last four parameters set the radius of a corner. The radii start with the top-left corner and move clockwise around the square. If any of these parameters are omitted, they are set to the value of the last radius that was set.
p5 = d3.require("p5");
Examples
A white square with a black outline in on a gray canvas.
function setup() {
createCanvas(100, 100);
background(200);
square(30, 20, 55);
}
A white square with a black outline and round edges on a gray canvas.
r = Inputs.range([10, 30], { label: "r", value: 15, step: 1 });
function setup() {
createCanvas(100, 100);
background(200);
// Give all corners a radius of the same value.
square(30, 20, 55, r);
}
A white square with a black outline and round edges of different radii.
r1 = Inputs.range([5, 30], { label: "r1", value: 20, step: 1 });
r2 = Inputs.range([5, 30], { label: "r2", value: 15, step: 1 });
r3 = Inputs.range([5, 30], { label: "r3", value: 10, step: 1 });
r4 = Inputs.range([5, 30], { label: "r4", value: 5, step: 1 });
function setup() {
createCanvas(100, 100);
background(200);
// Give each corner a unique radius.
square(30, 20, 55, r1, r2, r3, r4);
}
A white square with a black outline in on a gray canvas.
function setup() {
createCanvas(100, 100, WEBGL);
background(200);
square(-20, -30, 55);
}
A white square spins around on gray canvas.
rate = Inputs.range([0.01, 0.1], { step: 0.01, label: "rate", value: 0.05 });
function setup() {
createCanvas(100, 100, WEBGL);
}
function draw() {
background(200);
// Rotate around the y-axis.
rotateY(frameCount * rate);
// Draw the square.
square(-20, -30, 55);
}
Syntax
square(x, y, s, [tl], [tr], [br], [bl]);
Parameters
- x - Number: x-coordinate of the square.
- y - Number: y-coordinate of the square.
- s - Number: side size of the square.
- tl - Number: optional radius of top-left corner. (Optional)
- tr - Number: optional radius of top-right corner. (Optional)
- br - Number: optional radius of bottom-right corner. (Optional)
- bl - Number: optional radius of bottom-left corner. (Optional)