U1LA1.3: Rectangles, Ellipses, and Layering
How can we use shape functions to create images?
In this learning activity, students will create a visual composition using the p5 shape functions rect() and ellipse(). They will continue to build on their understanding of functions and their parameters to recreate the robot from lesson 1.
This lesson is split into three parts: drawing rectangles, drawing ellipses, and coding the robot.
In lesson 1, we practiced abstraction with the unplugged robot activity, today they will get the opportunity to code their robot.
The do-now will give students an opportunity to create a new robot (or multiple robots) and make revisions to their existing robot.
Have extra copies of the worksheet because students may make mistakes (or may have lost their sheet prior to this class).
NB: There are two activities to practice rectangles and ellipses. Offer multiple opportunities for students to display and explain their work to a partner, small group or the class.
Some students may want to add color, but that lesson won’t be introduced until U1LA3. The student focus should be on drawing using functions from the p5.js library. Trust the process that styling will come later!
This lesson provides opportunities for pair programming. Please note that paired programming opportunities should always have an equal number of “at-bats” for each student.
Students should be able to:
- Consult the p5 reference
- Create rectangles using the rect() function
- Create ellipse using the ellipse() function
- Understand the concept of layering to create images using multiple shape functions
1 period ~45 minutes (This may require some extension depending on how elaborate students were with their robots, but they will come back to this project later!)
9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.
9-12.DL.1 Type proficiently on a keyboard.
9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.
Abstraction:
Algorithms:
Programming:
|
Pre-Req Vocab:
|
Planning Notes | Materials Needed |
|---|---|
|
Highlighters |
Formative: Creating ellipses and positioning, Creating rectangles and positioning Summative: Coding robot in p5.js, Taijitu symbol
This will be an unplugged activity, it is important to review how to find the positions and sizes of the shapes used to create the robot that students drew and deconstructed in lesson U1LA1.1 Ask student to take out their robot worksheet and add or make changes to it.
To review how rectangles and ellipses work in p5 ask students ask the following:
- Which corner is used to determine the position of a rectangle?
- What two values are used to determine the position of a rectangle?
- Is the width and the height of the ellipse a diameter or a radius?
Bring students back together to briefly code-along the rect() function. They should first be introduced to it along with its parameters and with examples showing different values for width and height.
Begin by introducing the rectangle function and how it works. You may have students copy it into their notes or add it onto a function poster around the classroom.
As you code, discuss the following:
- How can we tell what are the “x” and “y” values of the position of a rectangle or other shapes?
- Students can copy & paste this line of code onto future sketches. This line of code displays the “x” and “y” value of the mouse location while on the canvas.
function setup() {
createCanvas(600, 120);
}
function draw() {
background(100);
text(mouseX + ", " + mouseY, 20, 20);
}
After discussing the rect() function give students a moment to practice adding more rectangles, either with criteria you have given, or anywhere they'd like.
Some questions may come up about layering or drawing order if so tell them that in p5, shape and color functions are rendered to the canvas in the order they're written in the program - from top to bottom.
Algorithms - Drawing order and control flow in p5.js is an important CS practice. This concept will appear often throughout the course.
Shows setup and draw function, setup labeled as running once, draw labeled as running in a loop.
Ask students to complete the challenge of recreating the following shapes on their canvas. NB: The real challenge is recognizing how to get all their edges to show!
Grey canvas with a white square of equal size in each corner.
Grey canvas with white square in each corner and four in the center forming a larger square.
This activity will reinforce students’ knowledge of coordinate points and positioning on the canvas. Some calculations will be needed in order to get the rectangles in the corner. Have some present their work and explain their solutions to the rest of the class.
Some students may want to create more squares or experiment with sizing. Circulate the room to ensure students are using comments to label the different rectangles.
Ask students:
What is the relationship between the x & y coordinates and the height & width?
Explain your process for layering the rectangles in the challenge.
Bring students back together to briefly code-along the ellipse() function. They should first be introduced to it along with its parameters and with examples showing different values for width and height.
As you code, discuss the following:
Why is the x and y in the center? There is not vertex for the ellipse to use as a starting point for the width and height. It is also made that way in case we cant to draw an oval instead of a perfect circle.
Are the width and height radius or diameter? The width and height of an ellipse will serve as diameters. So that means if the height is 50 px then the radius is 25 px from the (x, y) to the top and 25 px to the bottom. Same with the width, it works horizontally.
Ask students to add to their first practice by inscribing an ellipse in each rect, like so:
Grey canvas with a white square in each corner and a white circle inscribed in each.
This activity will reinforce students’ knowledge of coordinate points and positioning on the canvas. Some calculations will be needed in order to get the ellipse in the corner. \
- Ask students to modify their code from before and add ellipsis to the center of their rectangles.
- Circulate the room to ensure students are using comments to label the different shapes.
- Students should duplicate their previous sketch so that they don’t have to code one from scratch and keep a copy of their original sketch.
- Have some present their work and explain their solutions to the rest of the class.
NB: This can also be a take home project
Draw in p5.js the robot that you made on graph paper.
- Mouse canvas position indicator (x, y)
- Adaptable grid
Make sure students read the comments in the code as they serve as instructions!
Ask 2-3 students (preferably volunteers, or students you have checked-in with) to share their code for the robot to the class. Try to call on students whether they have the right or wrong code and prompt the class to coach students through errors - this can begin to build a culture celebrating errors as learning moments. Shares work best if you make them a consistent part of your routine.
Ask Students:
- 1.When creating the robot what is the most important information that we need to gather?
- 2.What is a good way to keep track of shape order and layering? Provide an example.
- 3.What are the step to took to overcome any confusion or difficulties?
- 4.Explain how the coordinate system works in relation with rect() ant ellipse()
Ask students to check out the p5.js online reference and add more shapes to their robot.\