U1LA1.4 Various Shapes, Stroke, Weight, Fill

How can we use shape functions to create images?

Overview && Teacher Feedback

In this learning activity, students will explore the various p5 shape-drawing functions as pairs or in groups. The second focus of the lesson will be building research and collaboration skills so that students can have a successful time when programming in p5.js. Then they will continue to build on their understanding of functions and their parameters to recreate the robot from lesson 1.

• This lesson is an exploratory lesson meant to help empower students with the ability to troubleshoot problems when coding. They will be heavily using the p5 reference website, so make students are pair programming efficiently.

• The do-now offers great discussion questions around problem solving and collaboration.

• Some students will struggle with researching on their own so it is important to tell them that a programmer is not able to remember every function but should be able to read and use them.

Objectives

Students should be able to:

• Consult the p5 reference for documentations

• Create triangles

• Create quadrilaterals

• Create arcs

• Create shapes defined by its vertices

• Use layering to create images

Suggested Duration

1 period ~45 minutes

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 why I chose to include the specific components of my prototype over others. Explain how I might help others identify patterns. Explain why using patterns is necessary when creating with a computer. 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. Describe the changes I made after testing at least three parts of my program. 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.

• triangle()

• quad()

• openShape()

• arc()

Pre-Req Vocab:

• vertex (plural: vertices) - a corner or a point where lines meet.

• quadrilateral - A four-sided polygon.

• triangle - Three-sided polygon

Planning Notes

Planning Notes	Materials Needed
Pairing or grouping students who have difficulty with literacy or difficulty reading the p5 reference with students who can assist in completing the task. Students will need 3 tabs open or p5 Editor or repl.it Slide Decks (optional) P5.js Reference Guide	Computer or laptop Pens/Pencils Rulers Highlighters

Resources

• Video Tutorial: 1.4: Color - p5.js

• Basic shape guide

• Blank Student Shape Guide

• Using the Reference Sheet (Youtube Video)

• Styling Shapes (Youtube Video) | Starter Code (p5 editor | repl.it)

Assessments

Formative: Guided questions, code alongs, peer examples Summative: Student Share Out, Blank Student Shape Guide

Do Now/Warm Up (4 -8 min)

• Having an open discussion on these questions is a good way to gauge the temperature of the classroom. Students should know that a programmer does not know everything but they have them collaborate and research skills to find creative solutions.

• Creating a poster from students' feedback can help create a successful and safe risk-taking culture in your classroom.

• Interesting Video on Tech Culture: https://www.youtube.com/watch?v=QW834PGYnYI

Ask Students:

1. What do you do when you are stuck or confused on a problem?

2. How do you think a software engineer solves a problem when they are stuck or confused?

3. How does risk-taking play a role in problem-solving? Give examples using our classroom?

Optional Questions:

1. How can we promote self-advocacy?

2. What are successful peer collaboration skills?

3. What would help you as a student to be able to search for solutions?

Intro (5 Min)

Tell students that this activity will have them problem-solving and researching with their peers. Ask students what they do when feeling stuck? This question will open up the discussion on how students go about solving problems.

Prompt students to think about these questions when they feel stuck. You can have them copy it from a slide deck or create a poster.

• Ask yourself:

  • What was supposed to happen?

  • What happened instead?

• If there is an error message look at the line number and error description. If the error message has a suggestion try that first.

• Check for common errors working line by line from top to bottom

• Play with the code. Make one change at a time then hit run.

• Use teamwork. Compare your code to the code of someone next to you.

• Check out the p5.js online reference. www.p5js.org/reference Model how to navigate the reference guide and then how to read the arguments a function takes.

• Attach a sticky note to the back of your laptop. Let your peers or teachers know that you need extra help.

Model how to navigate the reference guide and then how to read the arguments a function takes.

Screenshot of the p5.js Reference Sheet

Draw Other Shapes and Navigate the p5.js Reference Sheet (~15-25 min)

Explain the definition of fill(), stroke() and noStroke() to students, and then code along (p5 editor | repl.it) to explain the difference between the 3 functions. Ensure students are adding comments to their code. After the code-along, give students time to practice using the functions on the other shapes.

One thing that students may notice is that the helper coordinate text is getting styled, too, and may become distracting or unreadable. This is because the draw function runs on a loop, meaning whatever the last styling text is will loop back up to the top and apply to whatever comes first if it is not otherwise styled. Ask students if they can figure out a solution, and they should come up with something like this:

strokeWeight(1) //alternately, they may use noStroke()
stroke(0)
fill(0)
text(mouseX + ", " + mouseY, 20, 20)

The other thing they should notice is that there are shapes they haven't learned before! They work, but what do the numbers mean? In pairs or groups of 3 ask students to complete the following worksheet by filling in the missing blanks and using the p5 reference to research information on each shape. Model how to complete the worksheet with the students.

After they are done with the worksheet, ask them to create one or more of the following shapes in the p5.js:

• Triangle using triangle() function

• Quadrilateral using quad() function

• Star using beginShape() function

• An arc using the arc() function.

Their sketches should include:

• Sketch name that matches the unit and lesson number. Make this a standard practice in your classroom.

• A canvas size of 600 pixels wide by 120 pixels high.

• Light gray background.

Examples of possible outputs:

Four shapes on grey background, a triangle, a star-esque polygon, a quadrilateral, and a small arc.

Possible Solution | Possible Solution with stroke() and fill()

Students do not have to recreate these shapes exactly. Circulate the room to ensure students are adding comments to their code to label each shape.

For students choosing to create the star shape or their own polygon, remind them that they can use the beginShape() function, and then add as many vertices as needed. Add endShape(CLOSE) at the end to close the shape.

Example:

Image of a continous line forming a house on a grey background

Ask students and partners to explain the parameter of one new shape function and how their image aligns with the parameters. Teacher will circulate and and help clear confusion. Students should use the content from the reference to explain their answers.

Wrap Up

Ask 2-3 students (preferably that you have conferenced with) to share their answers to one of the shapes above. Students should share their project link with teacher prior to answering and explaining how they created their shapes.

Ask Students:

• What are the benefits of displaying mouseX and mouseY on the canvas? How can it be used for future projects?

• What was challenging when drawing more complex shapes?

• What are the things important when drawing more complex shapes?

Extension

If time allows, spend some time reviewing the arc function, angle measuring units, and how its parameters work using this p5 reference cheat sheet and have the students compare their results in their groups. Then have them create this arc using the cheat sheet.

Circle (arc) with a slice missing