Coding and Design

This module introduces students to the type of work computer programmers do to meet the needs of customers. It begins with the fundamentals phase of the solutionary framework. Students learn basic skills in computer programming using graphics features of P5.js. Students are asked to apply these skills in a series of daily challenges to create personally meaningful artifacts in P5.js. In the problem cycle phase, students learn about artists who create designs that inspire people to make changes in their communities and the larger world. Students also learn how graphics and messages are used in well-known social justice and environmental justice campaigns. In the first problem cycle, students brainstorm a message they want to convey about an important environmental or social justice issue in their community through a design in P5.js. They present their ideas to a partner and receive feedback about how to improve their message and design. Students then start to create their designs. Over the next lessons, students work on their designs and continue to receive feedback in a design cycle. Students present their final designs to the class and complete a self-assessment rubric in the solutions phase of the module. In the same way that computer programmers judge the effectiveness of their programs to address consumers’ needs, student consider how well their design and message inspires their intended audience to work for change. 

In the third week of the unit, students enter a second problem cycle to explore the causes and effects of climate change, and to develop a message using a P5.js design targeting a government legislator. The message will be designed to inspire action on climate change legislation. Students go directly into the problem cycle phase to create a climate change message that inspires environmental solutions through civic engagement.

Module Overview: https://docs.google.com/document/d/1QxxbMefpdD4r8PnfeqnygQ_uVDc98EIZ95n32GIMZSA/edit?usp=sharing 

For the lessons that include slide decks, please make sure you check the notes at the bottom of individual slides for instructional recommendations and suggestions. 

In this lesson, students are introduced to the P5.js web editor and programming environment. The teacher will work with students to examine the layout and function of the default P5.js web editor using a thinking routine -  Parts, Purposes, and Complexities (PPC). This routine helps students look closely at a system to uncover how different parts work on their own, and how parts work together to form a more complex system. Students will work with the circle() function and change the parameters to investigate how the function works to create a circle image in the P5.js web editor. Next, students briefly explore the P5.js reference tool and select a new shape function to investigate. Finally, students create accounts in P5.js so they can save their work during this unit. They will be asked to complete a challenge problem to design and program an emoji using an emoji starter project. Students will be asked to complete a self-assessment rubric for the emoji challenge problem in the next lesson warm up.

Make sure students Log-in before doing any work on P5.js and select "File -> Save" when they are done. The program does NOT automatically save. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-1?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1hB1AewPwnz2L_h1dyEgbHw6KgeR5Jqq1rxpk6Y2cpLY/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1zXPqpNTS3VLuojru7Z3CpI8K4EZGZmaMVx2dHPdbHQI/edit?usp=sharing

Parts of P5.js Student Slide Deck: https://docs.google.com/presentation/d/1S-yaqhE5abC_NIez0D8PIHHLiRyS3DhtVBIYMnKCN-s/edit?usp=sharing 

Parts of the circle() function Student Slide Deck: https://docs.google.com/presentation/d/1DngKoxrSz29CTv8zGSHwmxhojvsK_L12dacY8rVsMwQ/edit?usp=sharing  

Lesson Video: https://drive.google.com/file/d/1ruLRWsihAYRIFZa4wak4IsZHZbZRL8t1/view?usp=sharing 

Self-Assessment Rubric: https://docs.google.com/document/d/1tRsr6KvoHQJFubkm4zHOv2jdW4G8fHXvFFAYLtcG8tY/edit?usp=sharing 

In this lesson, students build on the previous lesson by applying what they’ve learned about shapes in P5.js and incorporating colors. Teachers will work with students to investigate logo designs that are used to promote environmental and social causes, both locally and worldwide. Students will plan a re-design of a logo and work on a challenge problem to create a logo using different shapes and colors. Students will be asked to complete a self-assessment rubric for the logo design challenge problem in the next lesson warm up. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-2?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1n3YlkwBfSD3WJYvxO_llD9XcsXP_j6EY7DRTLVvQH7w/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/10zBOvzSM0UsH9mT-X2t_VhXVK94_ZgpRwION2jH9UO0/edit?usp=sharing 

Logo Redesign Slide Deck: https://docs.google.com/presentation/d/19ZJMOnrl2PUHMZBHOlS4ouFtqjzeBUzJEGd0q3MnXKs/edit?usp=sharing 

Famous Logo Redesign Slide Deck: https://docs.google.com/presentation/d/1mbqnF-UfTGnVJv-xYJKxy8Ovw6fz7qQfjcMFu-VhPWs/edit?usp=sharing 

Design Challenge Logo Self-Assessment Rubric: https://docs.google.com/document/d/1wQw0MB5R-I6kWQpPKT-5PFFMyYpSNNCgt9eQoUJ3Z6E/edit?usp=sharing 

In this lesson, students build on the previous lesson by using color and coordinates to edit functions in P5.js. Students investigate how functions can be used in a coordinate system to move and size images. Students finish the lesson by completing a challenge problem to create a poster design using functions and a self-assessment rubric. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-3-cs-hero-poster?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1uuJ5hAgIkGW-BHMg7kHlUo65o8tq3y5uNB04L1aLFGE/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1B186apzjppTd8QHShwx04NGF58NnwVw_kpfr-ntjcqc/edit?usp=sharing 

Parts of preload() & setup() Slide Deck Student Copy: https://docs.google.com/presentation/u/1/d/15ZBZmb3flrTrlEjlSoG8t5oi-7ooJAllfvz60_qGKaI/copy?usp=sharing 

CS Heroes Poster Set (Research): https://drive.google.com/file/d/1eppWYQXiE83f3KIscAadx6wQI1hF_gjQ/view 

Design Challenge CS Hero Challenge Self-Assessment Rubric: https://docs.google.com/document/u/1/d/1wQivGDxCokzr8hbK8yvDJP2j-55zQoYrkxgKrknIzPU/copy?usp=sharing 

In this lesson, students build on the previous lesson by using basic shapes and colors to create a function in P5.js. Students investigate how functions can be used in a coordinate system to translate and replicate shapes. Students finish the lesson by completing a challenge problem to create a design using an ice cream cone function and a self-assessment rubric. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-3?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1NfKs8JQj8kNplnSSuOkkvASIJLBpEqHYCZNNw4zM38k/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1Pv482dvD5zUE-T8PSXFsT2c1sedLnFa3ys5ZHJX6htA/edit?usp=sharing 

Parts of iceCream() Slide Deck Student Copy: https://docs.google.com/presentation/d/13QQb83ZsPqbXKP_UjgybFT376HQ7kcFZyR77gnvIYlc/edit?usp=sharing 

Design Challenge Ice Cream Challenge Self-Assessment Rubric: https://docs.google.com/document/d/1Zs4gWOdzbMfoFmO4xl6vZ74JpONdXwIelHS4M6Xd2B8/edit?usp=sharing 

In this lesson, teachers will introduce the final design project where students are asked to complete a design challenge to create an artifact that promotes the solution to an important environmental problem in their community or the world. Teachers will work with students to investigate how the design templates work and how students can manipulate them to create new and personally meaningful design solutions to an environmental problem. Students will be introduced to different artists from a variety of backgrounds. Students will be asked to choose one of the artists to investigate. Finally, students use the T-Shirt Design Template to complete a design challenge and a self-assessment rubric. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-4?authuser=0

Lesson Plan: https://docs.google.com/document/d/1ffiX7JB0AX1oTGS6M9mNqEASF9AYEmK9Tj-r1CgbQjc/edit?usp=sharing

Teacher Slide Deck: https://docs.google.com/presentation/d/1rGWELqGZat0uEOdXqcMcaVBPudJ3a_veQI5z5NHr5ks/edit?usp=sharing 

Parts of a T-Shirt Design Template Slide Deck: https://docs.google.com/presentation/d/1d2H9gV0J_hbRFlk4K3LcyP9arMrdssoORgLU3YQPQpY/edit?usp=sharing  

How to Add Emojis Slide Deck: https://docs.google.com/presentation/d/1N0VfDI-QAQO9rpHWlpN745VokBc4HKoLMdmE8yGfog0/edit?usp=sharing 

An Artist Who Inspires You Student Slide Deck: https://docs.google.com/presentation/d/1g3FEH83232_ZHUlpwDALnY5AqTEqSidVjur1xYJuuOU/edit?usp=sharing 

Design Challenge T-Shirt Design Self-Assessment Rubric: https://docs.google.com/document/d/1XmDgBd0iQiMPGiHalTG7imYco0UlYDaSQ9iAcOSceDE/edit?usp=sharing 

In this lesson, students will continue learning about the final design project. Students will be introduced to  two new concepts in P5.js: the random() function and for-loops. Students will explore random() in an existing project using Parts, Purposes and Complexities thinking routine. Then, they will manipulate an existing for-loop to see how changing parameters affects a program’s outcomes. For-loops can be used to program a repeated action and are an important feature of design elements that use repeated patterns. As a mini-lesson, students are also introduced to some basic repeated patterns that are used in popular designs, like clothing and kitchen materials. Finally, students are given a design challenge to apply for-loops to a t-shirt design (or another template) and complete a self-assessment rubric.

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-5?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1Oxg--51uKeOMJjniSJGoJ3f9_0BJjj6FC4jwz5wYC_k/edit?usp=sharing

Teacher Slide Deck: https://docs.google.com/presentation/d/1za5FHGS8FSeikau9jS3hKVw_QDRe_acPV0x8VxbYbkA/edit?usp=sharing

Repeated Patterns Mini Lesson Slide Deck: https://docs.google.com/presentation/d/1Mw6nta6F-h08mLYIHGXXM3e7Pkzi3djNiAzk4hwFCcQ/edit?usp=sharing 

Parts of Random() Function Slide Deck: https://docs.google.com/presentation/d/1AT2eMI7-zv2W61wsxibvi51HdbzINlGeQIdI8F3-aOs/edit?usp=sharing 

Design Challenge Make a Repeated Pattern Design Self-Assessment Rubric: https://docs.google.com/document/d/1f1guKYGcfxpYXyVswxNyummRR8Qr3zQ1-oEbRHoXq_0/edit?usp=sharing 

Students will build on previous lessons, where they learned about design templates, and begin focusing on their final design project using a planning document. Students are introduced to the Final Project Assessment Rubric. Students will define the issue, audience, message and campaign for their project. The issue should have an environmental focus. The message and campaign will be created in P5.js with the goal of distributing through a social media platform or website. The lesson uses an I Do, You Do, We Do format, where the teacher introduces a social justice campaign and shows how to complete a planning document. Then, students work with the teacher to fill out a planning document for an environmental campaign. Finally, students begin working on the planning document for their final project design.

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-6?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1EL0NL57-ZSuRgQfRDZB7uBAp_0ZYJ2lOEDV6jNNhciw/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1EQC1NLu6bxCJW-gXYS09wqpjuq_12hPfeVyqCtrzbLA/edit?usp=sharing

Final Project Planning Document: https://docs.google.com/document/d/1gcYR7yEuenCaF79pVogyxQkEW_6RzT4rjqDU-R4-TFY/edit?usp=sharing 

Final Project Planning Slide Deck (Student): https://docs.google.com/presentation/d/1tmmYQWNyH_gr8KzPOJO8U34Jv-ZrxUl5PE2LTL7jWb0/edit?usp=sharing 

Final Project Design Elements (Student): https://docs.google.com/presentation/d/1owcUuP1mFy2iK6rQNfCr3jhfIV3C8sXimJKYC3z_-tU/edit?usp=sharing 

Final Project Planning Document (Completed for Say Her Name): https://docs.google.com/document/d/1GDl7R018gG0zK9bh6b8BXrJTUov1etSvyak_IUJSpDg/edit?usp=sharing 

Final Project Planning Document (Completed for Keep Tahoe Blue Campaign): https://docs.google.com/document/d/1sgO359K8lDSkkAI__LmmJAsX8Gzlol6AhWn1ORrmLRw/edit?usp=sharing 

In this lesson, students build on previous lessons by continuing to work on their final design projects. Students share their final project designs using the Design Elements Form (slide). Students work with a Notice-Wonder Strategy for providing and receiving feedback. Students receive feedback on their Design Elements form, focusing on which elements they need help with. Students go over a strategy for finding and receiving help with their projects. Finally, students continue working on their final design projects.

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-7?authuser=0 

Lesson Plan: https://docs.google.com/document/d/15kzbdNj4dlVVtSw8WvyjJodVeHrlWAOviXPRowrWQ0Q/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/193el1RyCtWeZPTKgl9P5t-s7O8iyhL7zk1siFmtRtXE/edit?usp=sharing 

Design Elements Feedback Form: https://docs.google.com/presentation/d/1g2l_V_WMX2bOWGtYt4IQbR0WWA3ZTRCsb6lVrOKMFxU/edit?usp=sharing 

Final Project Planning Slide Deck: https://docs.google.com/presentation/d/1Xaa8woZhvOIryRCP6fWMkLksC7lBcYa75ZjryaHcphc/edit?usp=sharing 

In this lesson, students build on previous lessons by continuing to work on their final design projects. Students share what they’ve completed in their project and receive feedback from a partner on the status.  They also receive suggestions for completing the project. Students spend the majority of the class time working on their final projects.

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-8?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1DQt4VrQID79J1SwFFO9PotucvDiOF7cho7WpTcBAwn0/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/13C5ja-Nqe7BPh5aonG-qVNOwtEkS1EU9V5h5W-ApHys/edit?usp=sharing 

Priorities Checklist End of Day #3 Student Slide Deck: https://docs.google.com/presentation/d/14i1iShz4RvChRIA6nWYhmo00yBa5e7uIuPwKOPrwWn0/edit?usp=sharing 

In this lesson, students build on previous lessons by continuing to work on their final design projects. Students share what they’ve completed in their project and receive feedback from a partner on the status.  They also receive suggestions for completing the project. Students spend the majority of the class time completing their final projects.

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-9?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1r67zomGbJAKMXlb5_ChvFr_7MfX8CYKvVM9dLz9_JKk/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1wXQQpUH0LW2mQe2RlTd6HfR3HAnBsuNxFB-nSBe6RCM/edit?usp=sharing 

Challenge: Priorities Checklist End of Lesson 9 Slide Deck: https://docs.google.com/presentation/d/1ybDngrzTLjiiNmB2owV14aC56wzA08LBp_YYSByGjdc/edit?usp=sharing 

In this lesson, students build on previous lessons by sharing their completed final design projects with the class. Teachers complete Final Design Project Rubrics to provide feedback to students on their projects. Students complete the rubric as a reflection on how well they feel their projects met the requirements of the assignment. The teacher also completes a matching assessment rubric for each student.

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-9?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1wF4Qu2rKNRaoKXVCpRyRdeDVKC-Bm-Y_xzRkmGPZzj8/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1ECGGARanSL099ZpewOFVLVyWpmSlr0fKObQxiPL4XmQ/edit?usp=sharing 

Final Project Design Peer Review Rubric Slide Deck: https://docs.google.com/presentation/d/1lV8WEfj8XeBXVJoDIhxyBUM5GPSDWY7NSVrCsjNG_kQ/edit?usp=sharing 

Final Project Peer Review Rubric Blank Slide Deck: https://docs.google.com/presentation/d/1PKh6DqvkJJKEaDih_6mPqEaahXJSQW0YQTIJE95bPNw/edit?usp=sharing 

Teacher Project Assessment Rubric Document: https://docs.google.com/document/d/1_LZnU_7IanYwd43Q8UKBzGt9J1geaAMtMgKAGJ41_VE/edit?usp=sharing 

Project Self-Assessment Rubric Document: https://docs.google.com/document/d/1yDrhadzHkDuL6AeOAPi5OdYfRiJUgOTblmdkAsigA1E/edit?usp=sharing 

In this lesson, students will learn the basics of climate science or supplement what they’ve already learned. Students will also learn why it is important to find solutions to the effects of climate change and how to take civic action (writing to elected officials). Students will gain a basic understanding of how their own art and designs in P5.js can be used to create powerful messages, drawing attention to climate change issues and solutions.

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-11?authuser=0 

Lesson Plan: https://docs.google.com/document/d/19tIy82Jj_b2uKge5M7l5JhMUWjA1eLIS_GPJaey7748/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1BOUVnJapDSyeUPhVDEzbL9tEA39SgqjhAJZkW3K5bDw/edit?usp=sharing 

Our Climate, Our Future Videos Discussion Jigsaw Student Worksheet: https://docs.google.com/document/d/10vpSMykydj4QD0MhemrHbmapOPvU4DQ5dNOEueOa32g/edit?usp=sharing 

In this lesson, students build on what they learned in the previous lesson about climate science and the impacts of climate change by researching their legislative representatives. They will find out who represents them in the senate, congress, and state houses. They will research their representatives’ positions on climate-related legislation. Students will brainstorm how to craft a message to their representative on climate change using P5.js. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-12?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1N1gH4-BqwyS6XtD5wxYtCdT7n_oOY5po7Dbb-BkCURM/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1VGkh0wqR-I5rmcFCddWemFm5G4w9nv1X2w7altFf68Q/edit?usp=sharing 

Government Legislators Trading Cards: https://docs.google.com/presentation/d/1LPuY2WJ_PY7XtbbBc2ZlmWgWjt1ExcPh8Z8RANjhZwc/edit?usp=sharing 

Climate Message Planning Document Slide Deck (Student Copy): https://docs.google.com/presentation/d/1l2XmeZtitJX0HiQLvBmeQS5c_7m8NqpSNaPVu_baRqY/edit?usp=sharing 

Legislator Position Climate Change Worksheet: https://docs.google.com/document/d/1BTJZpcCegqdypfORZNEjIubuYIFH1fb1XViRe4G6jok/edit?usp=sharing 

In this lesson, students build on what they learned in the previous lesson about their legislative representatives and their positions on climate change. Students share their climate message project brainstorm and receive feedback from a partner on their plans. They also receive suggestions for completing the project.  Students spend the majority of the class time working on their climate message projects using P5.js. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-13?authuser=0 

Lesson Plan: https://docs.google.com/document/d/1V4kZpIxCOacGR-N8qZdeDNg9cZvy-kGj7PxDByuH5K8/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1dwBzA6PLuV2PA6xD7yzeAWx_LjTrkMuLIYWcsu0x4AY/edit?usp=sharing

Priorities Checklist End of Lesson 13 (Student Copy): https://docs.google.com/presentation/d/1YYdP1Yec9QDqQLUXrlyIeQJos5u4IMwF1TX7jsbQurE/edit?usp=sharing 

Design Elements Planning Slide Deck (Student Copy): https://docs.google.com/presentation/d/1iRwxjnLuOqZMoeJ9eVASG64qnjBbhu7ZW6Tkalmg1aE/edit?usp=sharing 

Climate Message Planning Feedback Form: https://docs.google.com/presentation/d/1YUhJmf6kTiaxNIDNPhk2U2aYyGJOKOA0WIWszgLzfH0/edit?usp=sharing 

In this lesson, students build on what they learned in the previous lesson for completing their projects. Students share their project completing priority list and receive feedback from a partner. Students spend the majority of the class time working on their climate message projects using P5.js. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-14?authuser=0 

Lesson Plan: https://docs.google.com/document/d/123FmLxDXovEK8xMJiIQwLaA7dD2odws80C0Y1lv-Q6A/edit?usp=sharing 

Teacher Slide Deck: https://docs.google.com/presentation/d/1QKT9Fsprz9ylaRyJwKReip-4MFO96wPPBFA7M8dspj8/edit?usp=sharing

Design Elements Feedback Form (Student Copy): https://docs.google.com/presentation/d/1XsrQC0ifqXwpV0Er_q_Ij9-ykQ2vdsfUowaR_qzL00U/edit?usp=sharing

Priorities Checklist End of Lesson 14 (Student Copy): https://docs.google.com/presentation/d/17ekTEWko92V08jYY0BuSzl6dsL3NG2l-LL1LjnC8Z5A/edit?usp=sharing 

In this lesson, students build on what they learned in the previous lesson for completing their projects. Students share their final projects with the class. Students complete a self-assessment rubric. 

Website: https://sites.google.com/smcoe.org/swpcs/lessons/lesson-15?authuser=0

Lesson Plan: https://docs.google.com/document/d/1Q5j7YL700UBmMi6sFrAjmfV3T44q2ywkgSDbdrT2p0k/edit?usp=sharing 

Teacher Slide Deck:  https://docs.google.com/presentation/d/1exzDOYHVUpkn3HrBGkne5lKKNX6susafiHfyD3YEPx4/edit?usp=sharing

Climate Message Peer Review Rubric: https://docs.google.com/presentation/d/1Y_U7L_fIuvaIJADvfig7wL7C2sqHuJeQXUZWvLRL2r0/edit?usp=sharing

Climate Message Project Final Assessment Rubric: https://docs.google.com/document/d/1C0dVpLMMXCfUPax03mgFnRxe0ZR9F5_EBTs-kcMXTNc/edit?usp=sharing 

Climate Message Project Self-Assessment Rubric: https://docs.google.com/document/d/11z_DDV5BE18cI2adQi17zCbrbWntkYs6yTyuXeYZy3k/edit?usp=sharing