The rect() function in p5.js is used to draw rectangles. It can create standard rectangles, rectangles with rounded corners, and, in WebGL mode, rectagnles with additional 3D detail.

Basic Parameters

Four fundamental parameters define a rectangle's position and dimensions:

• x: The x-coordinate of the rectangle's top-left corner.
• y: The y-coordinate of the rectangle's top-left corner.
• w: The width of the rectangle.
• h: The height of the rectangle.

For example, rect(50, 50, 200, 100) draws a rectangle with its top-left corner at (50, 50), a width of 200 pixels, and a height of 100 pixels.

Creating Rounded Rectangles

Uniform Corner Radius

To create a rectangle where all four corners have the same radius, add a fifth parameter specifying the radius value.

rect(x, y, w, h, radius)

Example: rect(50, 50, 200, 100, 20) draws a rectangle with all corners rounded by 20 pixels.

Individual Corner Radii

To specify a unique radius for each corner, use eight parameters. The last four parameters define the radii for the top-left, top-right, bottom-right, and bottom-left corners, in that order.

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

Example: rect(50, 50, 200, 100, 30, 0, 15, 0) creates a rectangle with a 30-pixel radius on the top-left corner, a 15-pixel radius on the bottom-right corner, and sharp corners (0 radius) on the top-right and bottom-left.

If fewer than four radius parameter are provided, the unspecified values are inherited from the last radius value given. For instance, rect(50, 50, 200, 100, 20, 10) results in top-left=20, top-right=10, bottom-right=10, bottom-left=10.

Code Examples

Basic Rectangle

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(240);
  rect(50, 50, 200, 100);
}

Rounded Rectangle

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(240);
  fill(135, 206, 235);
  rect(50, 50, 200, 100, 20);
}

Asymmetrical Rounded Rectangle

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(240);
  fill(255, 165, 0);
  rect(50, 50, 200, 100, 30, 0, 0, 30);
}

Interactive Grid of Rectangles

This example creates a grid of rectangles that respond to mouse movement and change color over time.

function setup() {
  createCanvas(800, 600);
  frameRate(30);
}

function draw() {
  background(30);

  const numCols = 10;
  const numRows = 8;
  const spacing = 6;
  const cellWidth = (width - spacing * (numCols + 1)) / numCols;
  const cellHeight = (height - spacing * (numRows + 1)) / numRows;

  const mousePosX = constrain(mouseX, 0, width);
  const mousePosY = constrain(mouseY, 0, height);

  for (let col = 0; col < numCols; col++) {
    for (let row = 0; row < numRows; row++) {
      const posX = spacing + col * (cellWidth + spacing);
      const posY = spacing + row * (cellHeight + spacing);

      const centerX = posX + cellWidth / 2;
      const centerY = posY + cellHeight / 2;
      const distToMouse = dist(mousePosX, mousePosY, centerX, centerY);
      const scaleFactor = map(distToMouse, 0, 200, 1.15, 0.95, true);
      const smoothScale = lerp(0.95, scaleFactor, 0.2);

      const radiusX = map(mousePosX, 0, width, 0, 15);
      const radiusY = map(mousePosY, 0, height, 0, 10);
      const cornerRadius = radiusX + radiusY;

      const colorHue = (frameCount * 1 + col * 30 + row * 15) % 360;
      fill(`hsla(${colorHue}, 70%, 75%, 0.9)`);

      stroke(`hsla(${colorHue}, 70%, 40%, 0.9)`);
      strokeWeight(1);

      rect(posX, posY, cellWidth * smoothScale, cellHeight * smoothScale, cornerRadius);
    }
  }
}