U1LA1.1 p5.js Introduction & Deconstruction
How can we break down a robot into basic shapes in p5.js?
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.
Students should be able to...
- Explain what p5.js is
- Describe things you can create on p5.js
- Understand the p5 canvas coordinate system
1 Period ~45 Minutes
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.
- Computational Media - The practice of using programming to build expressive and interactive computer applications and media.
- 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.
- 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.
Formative: Peer reflection, Exit Slip Summative: Students Share Out, Student Robot Worksheet Review
Have your students sign up for a p5.js editor account here:
Have your students sign up for a repl.it account here:
They can easily create with these options:
- Google account
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).
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.
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.
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?
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?
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.
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.