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.
Instructions
Use the rect()
function to draw a rectangle in the upper-left quadrant of the p5.js sketch, positioned at (30, 20), with a width of 100 pixels and a height of 200 pixels. Remember that rectangles are positioned by their upper-left corner.
Next, draw a 100px wide square to the right of the rectangle. Position the square with the top left corner at (250, 100).