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 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.

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

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.

Blueprint Foundational Student Outcomes

Abstraction: Give examples of specific patterns in something I can see, do or touch. Describe different things I tried in order to achieve a goal. Explain how I might help others identify patterns. Algorithms: Describe more than one set of instructions that might complete a task. Explain why I used specific instructions to complete a task. Compare and contrast my instructions with other instructions that complete the same task. Programming: Experiment with the commands of a programming language. Describe three ways a development environment helps me create a project. Explain why I chose specific commands to communicate my instructions. Discuss what can and cannot be done with a specific set of commands.

Vocabulary

function - Functions are lines of code that perform specific tasks. parameters - Function parameters are the names listed in the function definition, e.g. in the following function definition, rect(x-coord, y-coord, width, height), x-coord, y-coord, width and height are all parameters. 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

Planning Notes	Materials Needed
Students might have lost their robot or may want to redo it from lesson. Students will need 3 tabs open p5 Editor or repl.it Slide Decks (optional) P5.js Reference Guide	Computer or laptop Pens/Pencils Rulers Highlighters

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

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.

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.

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:

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 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()

Extension

Ask students to check out the p5.js online reference and add more shapes to their robot.\

---