Hour of Code Teacher Notes: Computational Portraiture

Introduction:

Peblio is an adaptable platform that supports differentiation and scaffolding. You can remix this activity by signing up and selecting "remix" 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
‍
This hour of code will focus on computational portraiture. The theme can vary from famous women in tech to endangered species but the work should be used to focus on and raise awareness of a specific issue. Teachers are encouraged to create an account and remix this page to adapt the lesson to focus on an issue that interests them.
‍
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 p5 functions to upload and display images to the canvas
- Use  the random function to select  random pixel values from the canvas
- Use variables to store those values and apply them to randomly displaying shapes on the canvas


Suggested Duration

2.5 hours

Planning Notes

- The best way to plan for this hour of code is simply to go through the activity yourself. Creating your own  artwork also allows you to share your work with your students.
-Provide paper and pencils for students who would like to create a sketch of their composition before implementing it in code.

You can complete this activity in 3 ways.
- The main page is designed to be self directed and will take you through p5 from the beginning. Students can watch the videos and complete the activity (link)
- You can complete our first hour of code (interactive art) to get the basics down before moving on to this one. You can then remix the main page and delete the first few activities (link)
- You can teach the necessary concepts with slides and code alongs and then use the worksheets below for student work. The first worksheet provides the students with the code to remix and the second starts from scratch so that your students can code along with you.


Resources
- Hour of code(landing page)
- Hour of code #1: Interactive Art (landing page )
- Worksheet with an example to remix (worksheet)
- Worksheet with slides for code along ( worksheet , slides)


‍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

Provide a writing prompt for the topic that you are covering in your lesson. You might ask students to look up an important woman in tech and describe her accomplishments. You might as them to describe an endangered species, explain where they are found, how many are left, and how they might be saved. You might ask them to explore important contributors to their own communities. The sky is the limit but class should be started by framing the issue and asking students to select a subject for their portraits.

Discussion: How can art change the world?

- Have students share out a few of their ideas.
- Discuss the ways that art has played a powerful role in society and can raise awareness of important issues.
- Show a few examples of artworks that have been created around your chosen theme. You might find some of the resources below helpful.
‍
Resources
- The Rise for Climate Justice Mural Project: https://art.350.org/rise-murals/
- Art to save the sea: https://washedashore.org/
- Amy Sherald: https://www.amysherald.com/
- Kehinde Wiley: http://kehindewiley.com/
- Cindy Sherman: https://art21.org/artist/cindy-sherman/
- Barbara Kruger: http://www.barbarakruger.com/
- Ai Wei Wei: https://www.aiweiwei.com
- Rachel Ignotofsky: https://www.rachelignotofskydesign.com/everything
‍
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 for more advanced projects. They can explore the sample code and incorporate those concepts into their portraits. The Rise for Climate Justice Mural Project
‍
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.