This rectangle coding activity builds on our previous activity that explored the ellipse() function. Like our circle coding activity, this activity emphasizes the importance in the order of code, the coordinate grid, how a rectangle is positioned by its upper left corner, and how to add color.
This activity is designed for kid coders with basic coding experience, but it can be adapted for younger learners as well.
I did this activity with my oldest girls, 6yrs and 11yrs. The trick to keeping it simple with a young kid coder is to treat the activity as more of an exploration and create excitement about turning drawings into programs on a computer while inserting some key vocabulary.
What is p5.js?
p5.js is based on Processing, a creative coding environment originally developed by Ben Fry and Casey Reas.
One of the primary goals of Processing is to help artists, designers, educators, and beginners learn how to program interactive, graphical applications while also being an impressive tool for experts.
This activity introduces and reinforces the following code:
- rect(x, y, w, h)
- line(x1, y1, x2, y2)
- point(x, y)
- fill(r, g, b)
- background(r, g, b)
Please Note: This interactive coding activity is best viewed on a desktop or tablet. Mobile devices can be used to complete the lesson with scrolling or in landscape mode.
How to Code a Rectangle
In order for the computer to understand how to draw a rectangle, you’ll need to give it information about where to draw the rectangle as well as what size it should be.
This information is given to a computer by using the rectangle function.
The Coordinate Grid
Before we can plot our rectangles, we need to understand how the canvas grid works.
In math class, a coordinate grid starts with (0,0) in the middle of the grid and the Y value increases as you move up and decreases as you move down. There are also negative numbers. This type of coordinate grid is called the Cartesian Coordinate System.
In a computer system, the coordinate system is reversed along the y-axis and (0,0) begins in the top left corner of the grid.
You should print a canvas drawing grid to help you figure out the coordinates for your drawings.
The canvas size used for this activity is 600×600, which means that the center of our canvas is (300,300).
The drawing grid is 60 blocks by 60 blocks, so each block is equivalent to 10 pixels (60 blocks X 10 pixels = 600 pixels). Use this to calculate your width and height.
A point is the simplest of objects and includes only (x, y) parameters that indicate it’s location. To plot your rectangles, you use the upper left point of your rectangle.
Using your coordinate sheet to draw your rectangles is great practice for identifying the top corner point as well as the center point of your rectangles.
The shortest distance between two points is a line. The line function is line(x1, y1, x2, y2) with the parameters identifying the coordinates of the first and second points.
If you wanted to draw a line from (200, 200) to (300, 400), you would call the function: line(200, 200, 300, 400).
You’ll notice a function called strokeWeight() used in the following example. This function allows you to set the width of the stroke and is measure in pixels.
It applies to every function called after it, so I’ve used it twice to change the strokeWeight back to a thin line right above the line function.
The numbers that go into the parentheses are called parameters. Parameters are information passed to a function to customize it.
In our program, we are calling the rect() function and passing it four parameters to change how the rectangles are drawn.
The first two parameters control the position of the top left corner of the rectangle. The second two parameters control the size of the rectangle in pixels.
The first parameter is called parameter X. It determines the direction the rectangle goes across our canvas from the left side of the canvas.
In this activity, parameter X starts with 0 and ends at 600 and moves left (with numbers closer to zero) and right (with numbers closer to 600). Adjust the first parameter and hit “Play”.
Parameter X Grid Drawing
Check out how this rectangle looks on a grid drawing! This rectangle is a square because its width and height parameters are the same.
To tell a computer to draw this rectangle, we call: rect(200, 200, 200, 200).
The second parameter is called parameter Y. It determines the direction the rectangle goes down the canvas. It starts at zero up in the top left corner and goes to 600 at the bottom of the canvas.
Parameter Y Grid Drawing
Check out how this rectangle looks on a grid drawing! The position of this rectangle is (300,400).
Remember that the position of a rectangle is found by using the coordinates of the upper left corner.
To tell a computer to draw this rectangle, we call: rect(200, 400, 100, 100).
The third parameter is called width. This changes how wide or thin the rectangle is.
Width Parameter Grid Drawing
Check out how this rectangle looks on a grid drawing!
The position of this rectangle is (300,300). This rectangle has a width of 100 pixels and a height of 200 pixels.
To tell a computer to draw this rectangle, we call: rect(300, 300, 100, 200).
The fourth parameter is called height. This makes the rectangle taller and shorter.
Height Parameter Grid Drawing
Check out how this rectangle looks on a grid drawing! The position of this rectangle is (300,300).
This rectangle has a width of 200 pixels and a height of 100 pixels.
To tell a computer to draw this rectangle, we call: rect(300, 300, 200, 100).
The Importance of Command Order
Change the parameters of the rectangles in the editor below to match the parameters you chose above. What happened?
Adjust the parameters until you can see all of the rectangles. Did you notice how the order of your code matters to the placement of the rectangles?
Commands run in order from the top to the bottom, so the order of your rectangles matter if you are trying to layer the shapes to make an image.
Do you see how rect(350,350,50,200) is on top of the others in the canvas below? That is because it is the last command to run. Move those parameters to the first rect() function and see what happens.
Change the order of your rectangles until you create a design that shows all rectangles. You can also play with our example below if you’d like!
Coding Rectangle Art
Now that we know how to make rectangles, move them around the grid, and order them to create art.
You can use the RGB Color Codes Chart from Rapid Tables to find more colors. You can also change the background color by adjusting the color in the background() command. Change 255 to 0 and see what happens!
To add color to each rectangle, you must call the fill() function before every rectangle. Remember that order is important. See our example below for help.
Using the Center of a Rectangle
Another way to draw a rectangle is by using the center point, along with width and height. To use this method, you need to add the CENTER mode before the instruction for the rectangle itself.
p5 is case-sensitive, so make sure to use all caps when using rectMode(CENTER).
Then, use the center point to determine the width and height. For example, a width of 200 pixels would be 100 pixels from each side of the center point.
Tips to Remember:
1. Use one command per line.
2. Each function must end with a ; (this is a common mistake!)
3. Commands run in order from the top to bottom.
4. Order of parameters in commands matter.
5. Each parameter must be separated by a comma.
6. (0,0) is the top left corner of the grid, this is the origin of the grid.
7. All x and y parameters on the grid are positive.
8. The coordinates of a rectangle are determined by the location of the top left corner of the rectangle.
Meet Toni, the Maker Mom behind Our Family Code
Hey there, I’m Toni! I’m a software engineer and Maker Mom that finds my joy in unleashing my children’s curiosity by exploring STEAM concepts with my fantastic five!
When I’m not chasing toddlers or raising tweens, you can find me tearing things up and putting them back together over here at Our Family Code.
I am the owner and content creator of multiple educational websites designed to increase access to STEAM & STEM education with a focus on teaching computer science and coding to kids of all ages!
You can also find out more about me by visiting ToniGardner.com!