U1LA1.1 p5.js Introduction & Deconstruction

How can we break down a robot into basic shapes in p5.js?

Teacher Feedback and Overview

PLEASE review the coding environment options before beginning this lesson - students can either work in the p5 editor or on repl.it, depending on your classroom needs and preferences. You should pick ONE environment that the ENTIRE class should use - don't leave this one to student choice!

This lesson is an unplugged activity that has students drawing a robot using shapes and that they will then use abstraction to code in the alpha editor. It is a great way to introduce p5.js before coding.

In this lesson, students will be introduced to the p5.js canvas and coordinate system. It is one of the most important concepts that students will need to master in order to be successful when coding in p5.js. This lesson is an unplugged activity in which students will draw a robot using shapes and then use abstraction decompose and code in the p5 editor or repl.it. It is a great way to introduce p5.js before coding. Students will practice abstraction (definition below) when they are decomposing the robots shapes. Abstraction is an important CS practice that is used to reduce complexity and increase efficiency.

Objectives

Students should be able to...

• Create an account on https://editor.p5js.org/signup or on https://repl.it

• Explain what p5.js is

• Describe things you can create on p5.js

• Understand the p5 canvas coordinate system

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 how I might help others identify patterns. Algorithms: Explain why I used specific instructions to complete a task. Compare and contrast my instructions with other instructions that complete the same task.

Vocabulary

• Computational Media - The practice of using programming to build expressive and interactive computer applications and media.

• p5.js - An open-source Javascript library that allows people to make web pages animated and interactive.

• IDE - Integrated development environment(IDE) is a software application that provides a place for computer programmers to develop code.

• unplugged activity - an activity that can be conducted without the use of computers or electronic equipment.

• abstraction - Abstraction is the process of taking away or removing characteristics from something in order to reduce it to a set of essential characteristics.

Pre-Req Vocab:

• width - Horizontal distance of a 2D shape

• height - Vertical distance of a 2D shape

• radius - distance from the center to edge of a circle

• diameter - distance from edge to edge of a circle passing through the center point

• Cartesian (coordinate) plane - four quadrant grid with an x & y axis, origin, etc.

Planning Notes

Planning Notes	Materials
This example is based off of the robot worksheet and example. If you or your class hate robots, plan on making a secondary example. Preview shape functions - be prepared to differentiate between radius & diameter. You’ll be using the p5 website A LOT - make sure everything linked in the lesson is unblocked and usable.	Robot Worksheet Handout Pens/Pencils Rulers Highlighters

Resources

• Robot Worksheet

• Intro to Editor && Hello Ellipse (Youtube Video)

• (Optional) Desmos p5 Coordinate Grid Activity

• (Optional) Desmos p5 Coordinate Grid Tool

Assessments

Formative: Peer reflection, Exit Slip Summative: Students Share Out, Student Robot Worksheet Review

Do Now/Warm Up (5 min)

OPTION 1:

Have your students sign up for a p5.js editor account here:

p5.js Web Editor

Link to sign up for the p5 web editor

OPTION 2:

Have your students sign up for a repl.it account here:

Sign Upreplit

Link to sign up for repl.it

They can easily create with these options:

• Google account

• Github

• Email

NB: The p5 editor is not a p5.js online tool to manage and collect student work. It is strictly an online IDE - students will need to submit their project links to you through a Learning Management System such as Google Classroom, or another method such as Google Forms or Airtable. Repl.it does offer an option called Teams for Education which does allow you to give feedback directly through the repl.it platform.

After they’re done signing up, ask them to close their laptops or turn around with their attention to you (if in a lab).

Intro: What is p5.js? (10 min)

Start the lesson by explaining what is the main programming language of this course. After watching the video ask students the following suggested questions: Video

Note: The video is interactive so move the mouse around when prompted to show students how interactive p5.js can be

1. What did you see in the video?

2. What things do you think you can make with p5?

3. How is it similar or different to other programming languages?

Show some final project student examples to give your classroom a sense of what is possible with p5.

• Emoji

• Paint Tool

Unplugged Activity: Draw A Robot (10 - 15 minutes)

Distribute the Robot Worksheet to students and explain that p5.js works on a coordinate system - it’s just a little different than the one they are used to seeing. Ask students to identify what looks different from math class, and students should notice the origin (0,0) is in the top left corner.

Explain to students that they will be creating robots on their paper using only RECTANGLES and ELLIPSES (circles/ovals). Rectangles must follow the grid-lines and ellipses must have a clear center. Inform students that they will need to find information about their shapes once they are done drawing, so be sure to follow the rules.

During the first part:

• Distribute Robot Worksheets and ask students to draw their robot consisting of only rectangles and ellipses.

• They can use as many or as few as they want, but should try to use both shapes.

• Let them draw! (Having colored drawing implements on hand can be very useful for this step.)

After the drawing:

• Model how to deconstruct robot shapes and how to log information onto the worksheet - students need to know that the important information about an ellipse is the radius and center point, and important information about a rectangle are coordinates of the top left corner, the width, and the height. Demo as needed.

• Tell students to keep in mind the p5 coordinate system with the origin in the upper left corner.

• Ask students to work with their partners to complete the activity.

• Students will take turns “driving” (recording answers on their page based on their partner’s findings) and “navigating” (finding answers based on their partner’s drawing) until they have completed the worksheet. Students should swap after each question.

After they complete the activity, either collect the student worksheets or ask them to save it for the next lesson.

Student Assessment Guiding Questions

Ask the following questions and collect answers as a class summary or check for understanding (you can complete on a post-it for quick collection or aloud for a discussion):

1. Share one new thing that you learned.

2. What was challenging? Why?

3. Which features would you like to add?

Wrap Up (5 Min)

Watch the “wrap up” space for suggestions on how to end your class for the day. Sometimes it will be a summary, a share out, a data collection, and other times it might be a look ahead to future lessons. Today, no data is needed, end your class in a way that is meaningful to you.

Show students the drawing below:

Sample Robot on p5.js Coordinate Plane

Let's unpack this drawing together:

• How many shapes can you identify?

• What is the location of the mouth of the robot?

• How big are the eyes?

Optional Implementation #1:

Ask 2-3 students (preferably that you have conferenced with) to share their answers to one of the three questions above. Student share outs are a powerful way to build community and promote student ownership of learning. One approach could be creating a “sharing calendar” where 1-2 students share daily on a rotation (once the whole class has gone, shares start over again). Try to call on students whether they have the right or wrong answer and prompt the class to coach students through errors - this can begin to build a culture of celebrating errors as learning moments. Shares work best if you make them a consistent part of your routine. Students should share struggles or strengths, and can either a) ask the class for help when sharing or b) share something helpful they learned with the class. Aim to be a teacher facilitator and allow the class to coach itself. Be sure to conference with students the day they share, even if its a quick check-in, so they don’t feel that they are being put on the spot or punished.

Optional Implementation #2:

If you are more interested in data collection and have other structures in place for culture building, consider having students answer the three questions on an index card or other half sheet of paper that you can easily collect/grade/return.

Extensions

For the Robot Itself: Add a hat or another element to the robot:

1. Using rectangles and ellipses.

2. Find a partner and add one feature to their robot and have then them deconstruct the position and size of the new feature.

Have students take turns adding to their robot and identifying sizes/coordinates as needed. “Driver” adds shapes, “navigator” finds information, then switch. For the lesson generally: In this lesson or the future lessons, if you think your students need more 'at-bats' to familiarize themselves with the p5 coordinate system, consider taking an extra period to complete the Desmos activity linked under resources.