Educators & Parents: this Hour of Code activity can be done as a classroom lesson or students can work on it independently. If you have any questions or need help, email *Spanish captions on video are available* 

This lesson is part of a CSTA accredited professional development (PD) program. Click here to learn more. 

Sample Student Projects

Lesson Overview

Learn to program your portrait using p5.js. Express yourself creatively through code by incorporating your favorite artistic styles and personal touches to create a true masterpiece. Projects may be eligible for Code/Art’s CodeYourSelf™ competition for U.S. girls in grades 3-12.

Prior Knowledge: Students should have familiarity with a computer and a keyboard.

Learning Objectives

• Write a computer program (step-by-step coded instructions to the computer)

• Analyze computer code and perform problem-solving to fix errors

• Analyze the impact of the order of computer programming commands

• Identify ways to make their computer code easier for them and others to understand

Guiding Questions

• What shapes and lines comprise the features of your face?

• What colors best show the emotion you are projecting in your self-portrait?

• What did you learn about how you can write your computer program so that you and other programmers can understand it?

Educator Tips


Teachers do not need to be experts

As a teacher, you do not have to be an expert coder. Your role is to facilitate the process of learning how to code. Students will have access to guided tutorials allowing you to support students through observation, encouragement, and collaboration.


Encourage students to problem-solve and help each other

Identify which students are more advanced so they can help other students. When a student struggles, encourage them to, first, problem-solve on their own or with a partner. Most of the time they will be successful, which builds self-confidence. Often, a syntax error (typo) is preventing the code from running properly. Helping students debug (proofread) their code will reduce frustration and keep students engaged.


Time management is important

Encourage students to explore while also being aware of how much time they have left. Suggest that students complete a simpler “Version 1” and save it. Then, if time permits, they can start a Version 2.


Saving their projects

If your students are not able to create a p5 account, they can still save their project to work on it later or to submit to the CodeYourSelf™️ competition. Instruct your students to copy and paste all of their code from the online editor into a desktop text editor — for example, TextEdit on Mac or Notepad on Windows — and save it BEFORE they close the browser tab with their p5.js program. When they want to work on their program again, they copy the code from their saved text file and paste it into the p5.js online editor. Another option is to use a word-processing application to save the program code as a doc file. 

All-Girls CodeYourSelf™ Competition

All female or non-binary students in grades 3-12 may submit their coded portrait to Code/Art’s National All-Girls CodeYourSelf™ Competition for a chance to win prizes and recognition.

Teacher (PD) Workshops

Bring creative coding lessons like this one to your school through Code/Art’s professional development program available for Art, CS and CTE Teachers. No coding experience necessary.