Introduction:
Peblio is an adaptable platform that supports differentiation and scaffolding. You can remix this activity by signing up and selecting "fork" on the project page. Then with "edit mode" on, you can add, delete, or change elements on the page. See the link to the guide below for more on using Peblio.
Peblio Guide The activity: Overview
In this hour of code, students will practice providing instructions to a computer using a Javascript library called p5.js. They will select an artwork that they would like to recreate in code. They will then learn how to draw shapes with code, add color, and finally make their artworks interactive with system variables.
Student will be able to
- Use p5 functions to draw shapes on a canvas
- Refer to the p5.js documentation to discover more functions
- Add color to their compositions using p5.js color functions
- Use variables to create interactive compositions
Suggested Duration
1 hour with an optional 15 minute added activity
Planning Notes
- The best way to plan for this hour of code is simply to go through the activity yourself. Creating your own interactive artwork also allows you to share your work with your students.
- This activity starts with an unplugged drawing activity which adds about 15 minutes to the class. If you have some extra time for the activity, print the worksheets for each student. This activity can also be done using graph paper.
-Provide paper and pencils for students who would like to create a sketch of their composition before implementing it in code.
Resources
Unplugged drawing activity
Hour of code activity (landing page)
Assessment
Assessment of student’s development of computational practices via commenting in p5.js and reflection prompts:
- Show students how
commenting works in p5.js
- Ask students to reflect on their project via comments in their project.
- Challenge students to respond to
these prompts by adding comments in their p5.js project.
- Students should aim to respond to at least two items(checkboxes) for each practice(experimenting and iterating, testing and debugging, reusing and . remixing, abstracting and modularizing). Keep in mind that not all checkbox items may apply to projects.
- Students should use the last section in the document (Practices in Practice) to count the total number of computational practices and as reflection tool on the project.
Lesson Plan
Do Now
1. Hand out the unplugged activity worksheets and instruct the students to create a simple drawing using the grid on page 1 with basic shapes. Students should be reminded not to show their drawing to their classmates.
2. They should then write instructions on page 2 to teach someone else how to draw their picture. Students should only describe the shapes that they drew (their location on the grid, width, height etc.). They should not tell their partner what the image depicts (e.g draw a cat in the center of the grid)
3. Have students swap instructions with a partner and follow their partner’s instructions to create a drawing.
Discussion: How do we provide detailed instructions?
Ask students to compare their drawings with the original drawings.
-Were the drawings the same?
-Where did they go wrong?
-How could the instructions have been clarified to avoid the mistakes that were made.
Inform the students that in this hour of code they will need to provide drawing instructions to a computer. A computer won’t understand instructions like “draw a house,” but they will be able to instruct the computer to draw shapes as long as they provide the coordinates, and size information that the computer will need to draw the shape correctly.
Student Activity: Hour of Code
Direct students to the Peblio Hour of Code page.
You can watch the video on the landing page together as a class, individually, or if you introduced the project on your own, they can skip it and press “get started.”
For the remainder of the activity, students can watch the videos and create a project in the workspace. Circulate as they work to answer questions and help students debug their code.
Wrap Up
- Ask students to share their project (press share in the workspace and follow the prompts to share the project) and then share the link to their project with you or with the whole class on a padlet.
- Have students click the button at the bottom of the page to receive their hour of code certificate.
- Ask for volunteers to share their project with the class and explain their work.
Extensions
There are resources at the end of the activity for students who are ready to move on with p5. They can watch the extension videos and incorporate new concepts into their projects.
CSTA Standards:
CT.L2-01 - Use the basic steps in algorithmic problem-solving to design solutions (e.g., problem statement and exploration, examination of sample instances, design, implementing a solution, testing, evaluation).
CT.L2-03 - Define an algorithm as a sequence of instructions that can be processed by a computer.
CT.L2-04 - Evaluate ways that different algorithms may be used to solve the same problem.
CT.L2-12 - Use abstraction to decompose a problem into sub problems.
CT.L3A-01 - Use predefined functions and parameters, classes and methods to divide a complex problem into simpler parts.
CT.L3A-11 - Describe how computation shares features with art and music by translating human intention into an artifact.
CL.L2-04 - Exhibit dispositions necessary for collaboration: providing useful feedback, integrating feedback, understanding and accepting multiple perspectives, socialization.
CL.L3A-01 - Work in a team to design and develop a software artifact.
CL.L3A-02 - Use collaborative tools to communicate with project team members (e.g., discussion threads, wikis, blogs, version control, etc.).
CL.L3A-03 - Describe how computing enhances traditional forms and enables new forms of experience, expression, communication, and collaboration.
CL.L3B-01 - Use project collaboration tools, version control systems, and Integrated Development Environments (IDEs) while working on a collaborative software project.
CL.L3B-03 - Evaluate programs written by others for readability and usability.
CPP.L2-07 - Identify interdisciplinary careers that are enhanced by computer science.
CD.L3A-04 - Compare various forms of input and output.
Blueprint Foundations Student Outcomes (https://blueprint.cs4all.nyc/outcomes/)
Analyze Programming - Experiment with the commands of a programming language.
Prototype Programming - Explain why I chose specific commands to communicate my instructions.
Communicate Programming - Discuss what can and cannot be done with a specific set of commands.
Analyze Abstraction - Give examples of specific patterns in something I can see, do or touch.
Prototype Abstraction - Describe different things I tried in order to achieve a goal.
Chrome is the recommended browser for this activity.