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)