U1LA1.3: Rectangles, Ellipses, and Layering
How can we use shape functions to create images?
Overview && Teacher Feedback
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 donow 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 โatbatsโ for each student.
Objectives
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
Suggested Duration
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!)
NYS Standards
912.CT.4 Implement a program using a combination of studentdefined and thirdparty functions to organize the computation.
912.DL.1 Type proficiently on a keyboard.
912.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.
Blueprint Foundational Student Outcomes
Abstraction:
Algorithms:
Programming:

Vocabulary
PreReq Vocab:

Planning Notes
Planning Notes  Materials Needed 


Highlighters 
Resources
Basics of Drawing (Youtube Video)
Intro to Editor && Hello Ellipse (Youtube Video w/ Code Activity)
Intro to Rectangle (Youtube Video w/ Code Activity)
Assessments
Formative: Creating ellipses and positioning, Creating rectangles and positioning Summative: Coding robot in p5.js, Taijitu symbol
Do Now/Warm Up
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?
Draw a Rectangle (10 Min)
Bring students back together to briefly codealong 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 many arguments does rect() accept? Use the reference to show its parameters.
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.
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.
Drawing Order
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.
Student Practice #1 (5 Min)
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!
Solution Code (p5 editor  repl.it)
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.
Draw an Ellipse (5 min)
Bring students back together to briefly codealong 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.
Student Practice #2 (5 min)
Ask students to add to their first practice by inscribing an ellipse in each rect, like so:
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.
Draw Your Robot (10 min)
NB: This can also be a take home project
Draw in p5.js the robot that you made on graph paper.
Students who are having trouble with positioning can use this starter sketch (p5 editor  repl.it) that contains the following:
Mouse canvas position indicator (x, y)
Adaptable grid
Make sure students read the comments in the code as they serve as instructions!
Alternately, for students for whom it is not helpful to see the grid, they may get more use out of this starter code that just shows mouse canvas position as x, y coordinates (p5 editor  repl.it).
Wrap Up (3 min)
Ask 23 students (preferably volunteers, or students you have checkedin 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:
When creating the robot what is the most important information that we need to gather?
What is a good way to keep track of shape order and layering? Provide an example.
What are the step to took to overcome any confusion or difficulties?
Explain how the coordinate system works in relation with rect() ant ellipse()
Extension
Ask students to check out the p5.js online reference and add more shapes to their robot.\
Last updated