U1LA1.3: Rectangles, Ellipses, and Layering

How can we use shape functions to create images?

Teacher Notes && Overview

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 U1LA1.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). Additionally, having a paper copy of the p5 coordinate plane is really useful at this point in time!

NB: There are two activities to practice rectangles and ellipses. Offer multiple opportunities for students to display and explain their work to the class or peers.

Some students may want to add color, but that lesson won’t be introduced until later. The student focus should be on drawing using functions from the p5.js library. Trust the process that styling will come later, and embrace any students who figure it out early!

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.

Objectives

Students will be able to:

• Consult the p5 reference

• Create rectangles using the rect() function

• Create ellipses using the ellipse() function

• Understand the concept of layering to create images using multiple shape functions

Suggested Duration

1-2 periods, (~45-90 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

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.

Vocabulary

• Function - Functions are lines of code that perform specific tasks.

• Parameters - Are the values inside of a parenthesis following the name of the function.

• rect() function - Draws a rectangle to the screen.

• ellipse() function - Draws an ellipse (oval) to the screen.

Pre-Req Vocab:

• Width - Horizontal distance of a 2D shape

• Height - Vertical distance of a 2D shape

• Rectangle - a 2D figure with four straight sides and four right angles

• Ellipse - a regular oval shape

Planning Notes && Materials

Planning Notes	Materials
Anticipate that students may have lost their robot or want to redo their robot. Make sure students can navigate multiple tabs!	Pens/Pencils Highlighters Rulers Robot Worksheet (Extras, Printed)

Resources

• Basics of Drawing (Youtube Video)

• Layering Example

• Robot Worksheet

• Intro to Editor && Hello Ellipse (Youtube Video w/ Code Activity)

• Intro to Rectangle (Youtube Video w/ Code Activity)

Assessments

Formative:

Ellipse and Rect position challenges

Summative:

Code Your Robot

Taijitu Symbol (Upcoming Mini Project)

Abstract Album Art (End of Unit Project)

Do Now/Warm Up (~3-5 min)

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 the 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 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 many parameters does rect() accept? Use the reference to show its arguments.

• 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);
	//code to display coordinates
	text(mouseX + ", " + mouseY, 20, 20);
	
	//code along rectangle
	rect(200, 50, 10, 50)
}

After discussing the rect()function and adding one together, ask students to experiment with changing the different argument values to alter the parameters. Then 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.

Shows setup and draw function, setup labeled as running once, draw labeled as running in a loop.

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!

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.

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 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. Follow the same step as with rect(), allowing students to adjust values before continuing. They should end up with a function like this anywhere on their page:

ellipse(50, 200, 100, 10)

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 want 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:

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.

Possible Solution

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 2-3 students (preferably that have volunteered, or 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()

Extension

Ask students to check out the p5.js online reference and add more shapes to their robot, or give it a friend/pet/background.