Code-moji

Technology

• Computers w/ access to the internet

Before the lesson...

• Review key coding concepts and ensure you are confident describing them to your group
• Create a (free) account for your class
• Review the example project
• Print the solution sheet
• Stuck? Check out our troubleshooting resource.

Introduction

Watch this video about the History of Emoji (~5 minutes).

Ask: "What stood out to you?" "What is something you learned that you didn't know before?"

Introduce today's project: creating interactive emojis using a programming language called Processing!

Have learners go to openprocessing.org and sign in using the class account that you created.

Direct learners to the ‘Getting Started’ sketch in OpenProcessing.

Have them ‘Create a Fork’ of the project, then ‘Edit’ and rename their sketch (see Step 1 of solution sheet for guidance).

Point out the following elements of the ‘Getting Started’ sketch:

Function setup: This sets up our sketch. It is the first thing that happens when we run our project, and only happens once.

Function draw: This is where we add our code for drawing and animations. This happens next, but loops over and over, in the same order (or sequence) that the code is listed.

Semicolons: We need to add these after each line of code that we add inside of the void and draw functions.

Using x,y coordinates: Note that our canvas uses x,y coordinates… HOWEVER (0,0) is in a different location than we are used to. Instead of being in the middle, (0,0) is in the top, left corner. When X increases, it moves right. When Y increases, it moves down.

Comments : The //backslashes are comments - these are for our eyes only.

Introduce learners to their new BFF - the p5js Reference! Have them open it in another tab.

Go through 2-3 challenges:

• Change the colour of the background
• Move the circle to the middle of your sketch.
• DRAW a rectangle BEHIND your circle (try to make a watch!)

See this sketch for an example solution.

Activity

Show learners the example project. We’re creating emojis using code!

Have learners open the starter project and click on the "FORK" icon > “Create a Fork"

Use the solution sheet to guide learners through the following steps:

1. Mapping shapes to coordinates
2. Drawing more shapes
3. Adding interactivity
4. Adding colour using RGB values

Give learners time to work on their sketches. If you have time, include “Add-On: Customize Your Emoji.”

Learning Outcomes

I can create algorithms in p5js
I can position shapes using x,y coordinates
I can use sequences to layer shapes in my sketch
I can use conditionals to make my project interactive
I can digitally mix colours using RGB values

Assessment Ideas

Have learners write an Artist’s Statement to explain their design decisions, and add it into their sketch as a comment. “This artwork is titled [name]. It is a [style of art] using [materials]. I chose [design decision] because [reason].” --> E.g. “This artwork is titled Playful. It is a generative art project created using Processing. I chose to make the background blue because it is a complementary colour to yellow.”

Have learners add comments to their code for each change/addition they make to the starter project to ensure that they understand what each line of code does.

Arts & Design

• Watch video Step into the Page about Glen Keane (animator at Disney). Practice drawing emotions the same way that Glen Keane and his father did (01:30) - by drawing circles on a paper with a list of expressions under each. Have learners choose one of these faces as inspiration for their emoji art.
• Include a focus on colour theory. Discuss RGB as an additive colour model, use Adobe Colour to learn about colour schemes, or discuss colour + emotion.

Math

Link to a math lesson on area, where learners record the surface area of each circle and rectangle on their sketch, in pixels. Challenge them to add up the total surface area of all of the circles and rectangle drawn in their sketch, or calculate the total surface area of a partner’s processing sketch.

Language Arts & Technology and Society

Use this opportunity to discuss when learners should and should not be using emojis at school (e.g. Emojis should never appear in essays, but are okay to include when brainstorming in Google Docs).

The History of Emoji (Tofugu)
https://www.youtube.com/watch?v=SoZlB9pFV2M

Glen Keane – Step into the Page (Future of StoryTelling)
https://www.youtube.com/watch?v=GSbkn6mCfXE

Teach lessons that are tied to your existing curriculum! https://bit.ly/CLClessons