`rect()`

The `rect()` function in p5.js is used to draw rectangles on the canvas, making it a foundational tool for creating shapes and forms in generative art and interactive experiences. Creative coders use `rect()` to build everything from simple graphics to complex interactive installations. For example, in a game that tests reaction times, rectangles can represent the interactive elements players need to engage with.

📖 p5.js Reference →

🧠 See The Whole Picture

Imagine the canvas as a coordinate grid where each point represents a pixel. When you call `rect(x, y, width, height)`, you are instructing p5.js to start drawing at the coordinates (x, y) and then extend horizontally and vertically to create a rectangle that fills the specified width and height. Visualize it like placing a box on a flat surface, where (x, y) is the bottom-left corner of the box.

📖 Visual Learner's Guide

The Big Picture:

Running this code would show you a rectangle drawn on the canvas. It starts at coordinates (200, 150) and extends 80 pixels wide and 50 pixels tall.

Visual Analogy:

Think of it as placing a rectangular block on a table. You decide where to position it with the first two numbers and how big it should be with the last two.

The Numbers Decoded:

The x=200 means the rectangle starts 200 pixels from the left edge of the canvas. The y=150 means it starts 150 pixels down from the top. Width=80 makes it 80 pixels wide, and height=50 makes it 50 pixels tall.

Connection Map:

The `fill()` function sets the color inside the rectangle before you draw it with `rect()`, and `stroke()` sets the outline color.

Common Gotcha:

Remember, the coordinates represent the top-left corner of the rectangle, which can be different from how you might expect other shapes to work!

🔄 How It Works

graph TD A[Your Code] --> B[rect] B --> C[Canvas] style B fill:#ff6b6b

This diagram illustrates the flow from your code to the `rect()` function and how it results in a visual output on the canvas.

📝 Syntax

📖 How to Read This

Read `rect(x, y, w, h)` as: 'Draw a rectangle with the top-left corner at position x,y with width w and height h.' The parameters are like coordinates and dimensions you give to a builder to construct the shape.

rect(param1, param2, ...)

Example: rect(200, 150, 80)

🔀 Different Ways to Call It

rect(value)

This form draws a square at the top left corner of the canvas with a size of 'value'.

rect(128) → A square of size 128 pixels drawn at (0, 0) on the canvas.

rect(v1, v2, v3)

This form draws a rectangle with the top-left corner at (v1, v2) and a width and height determined by v3.

rect(255, 100, 50) → A rectangle with its top-left corner at (255, 100) and a width and height of 50 pixels.

↩️ What It Returns

Type: void

The `rect()` function doesn't return anything; instead, it directly draws on your canvas, much like painting a shape on a wall.

📥 What Goes In

When you provide the `rect()` function with four numbers, you're giving it directions. The first two numbers tell it where to place the rectangle on the canvas, like marking a spot on a map. The last two numbers tell it how big to make the rectangle, like specifying dimensions for a piece of furniture.

📤 What Happens

The `rect()` function takes your input and paints a rectangle on the canvas immediately. It fills the rectangle with the current `fill()` color, providing a visual representation of your instructions.

Parameters

x Number required

A Number represents a pixel value on the canvas. Think of it as a measurement from the edges of the canvas.

Controls the horizontal position of the rectangle. A value of 0 aligns it with the left edge, while max width positions it at the far right.

Range: 0 to canvas width

Examples: 0 → Rectangle starts from the left edge. 200 → Rectangle starts from the middle of the canvas. width → Rectangle starts from the right edge.

y Number required

Similar to x, this is a vertical pixel value.

Controls the vertical position of the rectangle. A value of 0 aligns it with the top edge, while max height positions it at the bottom.

Range: 0 to canvas height

Examples: 0 → Rectangle starts from the top edge. 200 → Rectangle starts from the middle of the canvas. height → Rectangle starts from the bottom edge.

width Number required

A Number defining how wide the rectangle will be.

Defines the horizontal size of the rectangle. At 0, it will not be visible, and larger values increase its width.

Range: 0 to any positive number

Examples: 0 → Invisible rectangle. 100 → Rectangle is 100 pixels wide. 300 → Rectangle is 300 pixels wide.

height Number required

A Number defining how tall the rectangle will be.

Defines the vertical size of the rectangle. At 0, it will not be visible, and larger values increase its height.

Range: 0 to any positive number

Examples: 0 → Invisible rectangle. 50 → Rectangle is 50 pixels high. 150 → Rectangle is 150 pixels high.

💡 How Parameters Work Together

Each parameter in `rect()` works together to determine the rectangle's position and size. Think of it like designing a room: the x and y parameters set the location of the room's corner, while width and height define the room's size. If you want a larger room, you increase the width and height; to move it around, you adjust the x and y values.

💻 Working Example

// Complete working example with comments
function setup() {
  createCanvas(400, 400); // Create a canvas of 400x400 pixels
}

function draw() {
  background(220); // Set background to light gray
  rect(200, 150, 80, 50); // Draw a rectangle at (200, 150) with width 80 and height 50
}

Try This Code →

⚙️ How It Works

When you execute `rect()`, p5.js reads the parameters you provided. It determines the location on the canvas by interpreting x and y as the top-left corner of the rectangle. It then expands the shape horizontally and vertically based on the width and height values. Finally, it draws the rectangle directly on the canvas, utilizing the current fill and stroke settings to render it visually.

🎓 Learn Prompt Patterns

These patterns help you write better prompts for ANY function:

🎭 Persona Pattern

Tell the AI to act as a specific type of creator

"Act as a creative coder making generative art. Use `rect()` to create a colorful abstract composition."

Why it works: Giving the AI a persona helps it understand the context and style you want, leading to a more tailored output.

📋 Recipe Pattern

Ask for step-by-step instructions

"Give me step-by-step code to use `rect()` to create a grid of rectangles."

Why it works: Breaking down into steps helps you understand each part and learn incrementally.

📝 Template Pattern

Provide a structure for the AI to fill in

"Use this template: setup creates canvas, draw uses `rect()` with random parameters to make an abstract art piece."

Why it works: Templates give the AI clear constraints, resulting in more predictable output.

🔄 Refinement Pattern

Start simple and iterate

"Start with a basic `rect()` example. Then I'll ask you to add color, animation, and interaction."

Why it works: Building up gradually helps you understand each addition and not get overwhelmed.

🎯 Direct Prompts - Name the Function

Tell the AI exactly which function to use:

Direct

"Use `rect()` to create a colorful reaction time game where rectangles appear at random positions."

💡 Why this is good: This prompt encourages creative coding with a specific visual goal, engaging the learner's imagination.

📚 What you learn: You learn to use `rect()` for interactive applications.

📝 Sample Output:

// Complete code for a basic reaction time game

Direct

"Generate a grid of rectangles using `rect()` at different positions."

💡 Why this is good: This prompt breaks down the task into manageable steps, making it accessible for beginners.

📚 What you learn: You learn to control positioning and layout in p5.js.

📝 Sample Output:

// Complete code for drawing a grid of rectangles

🔮 Indirect Prompts - Describe What You Want

Don't name the function - see if the AI figures out to use rect():

Indirect

"Describe a visual where you have colorful boxes appearing randomly on the screen."

💡 Why this is good: This helps you articulate your visual intent without needing to know the exact function name.

� What you learn: You learn to express your visual ideas in coding terms.

📝 Sample Output:

// Code showing AI chose `rect()` to create boxes

🖼️ See It In Real Sketches

How rect() is used in actual gallery sketches:

AI Reaction Time Test

`rect()` is used to represent the interactive elements that change color, allowing users to test their reflexes by clicking when prompted.

// Part of the code where `rect()` is used to draw the target
if (isReady) {
  fill(0, 255, 0);
  rect(targetX, targetY, targetWidth, targetHeight);
}...

View Sketch →

AI Maze Generator

`rect()` helps visualize the paths and walls of the maze, drawing each cell as a rectangle during the recursive backtracking algorithm.

// Part of the maze generation code
rect(cell.i * cellSize, cell.j * cellSize, cellSize, cellSize);...

View Sketch →

🔀 Fun Function Combinations

Try asking the AI to combine rect() with these:

rect() + fill()

→ Creates filled rectangles with specified colors.

Try: "Create a colorful grid of rectangles using `fill()` with `rect()`."

// Example code using fill() with rect()
for (let i = 0; i < 10; i++) {
  fill(random(255), random(255), random(255));
  rect(i * 40, 100, 30, 30);
}

⚠️ Common Mistakes & Fixes

❌ Mistake: Drawing rectangles using incorrect coordinates or dimensions.

🤔 Why it's wrong: Beginners often confuse the order of parameters or think the coordinates represent the center instead of the top-left corner.

✅ Fix: Ensure you understand that the first two parameters are for the top-left corner of the rectangle.

🗺️ Learning Path

💡 Project Ideas

Create a simple game using `rect()` as interactive elements
Build a visual pattern generator using multiple `rect()` calls

🤖 Ask xelsed-alpha6 to Explain

Your prompt:

"Explain what rect() does in p5.js"

Try this prompt in p5js.AI to see how the AI explains it!

Try in p5js.AI →

💡 Prompt AI to Write Code Using rect()

Example prompt:

"Create something using rect()"

🔧 Ask AI to Help Debug

When stuck, try:

"My rect() isn't working, help me debug"

✨ Creative Combinations with AI

Ask AI to combine functions:

"Combine rect() with other functions for interesting effects"

Ready to Try rect()?

Open p5js.AI and ask the AI to help you use rect() in your own creative project.

Start Coding with AI →

rect()

🧠 See The Whole Picture

📖 Visual Learner's Guide

The Big Picture:

Visual Analogy:

The Numbers Decoded:

Connection Map:

Common Gotcha:

🔄 How It Works

📝 Syntax

📖 How to Read This

🔀 Different Ways to Call It

↩️ What It Returns

🎛️ Mode-Dependent Behavior

📥 What Goes In

📤 What Happens

Parameters

💡 How Parameters Work Together

💻 Working Example

⚙️ How It Works

🎓 Learn Prompt Patterns

🎭 Persona Pattern

📋 Recipe Pattern

📝 Template Pattern

🔄 Refinement Pattern

🎯 Direct Prompts - Name the Function

🔮 Indirect Prompts - Describe What You Want

🖼️ See It In Real Sketches

AI Reaction Time Test

AI Maze Generator

🔀 Fun Function Combinations

⚠️ Common Mistakes & Fixes

🗺️ Learning Path

💡 Project Ideas

🤖 Ask xelsed-alpha6 to Explain

💡 Prompt AI to Write Code Using rect()

🔧 Ask AI to Help Debug

✨ Creative Combinations with AI

Ready to Try rect()?

`rect()`