Let’s look at our first closed shape, the rectangle! Did you know that there are more rectangular shapes in the world than any other shapes?

Rectangles can be drawn to the p5.js sketch using the rect() function. The function has four parameters, the first and second parameters are the x and y coordinates for the top-left corner of the shape, and the third and fourth parameters set the width and height of the rectangle.

A square is a special type of rectangle where the height is the same length as the width. They are drawn using the square() function and need three parameters: x and y coordinates for the top-left corner of the square and the width.

The x and y coordinates for the rect() and square() functions are also known as the anchor point, which is the origin of all transformations. By default, rectangles and squares anchor at the top-left corner of the shape. For now, you can think of the anchor point as the coordinates where shapes are drawn to. The location of the anchor point and how parameters of the rect() and square() functions are interpreted can be changed using the rectMode() function, which will be covered in detail in the Grouping and Transforming Shapes lesson.