Skip Navigation

Code-moji

By Kassandra Lenters 120 minutes
Level
Grade 7-8
Subjects
Art,
Mathematics
components
  • Programming
  • Data
  • Design
Tools & Languages
OpenProcessing

Teach this lesson between December 5-11 to unlock Emoji World!

Your students will get to envision and express themselves in this world through their favourite emojis, representing the big impact we can make when we collectively code!

Emoji WorldCLC Week

Key Coding Concepts

  • Algorithms
  • Conditional Statements
  • Functions
  • Sequences

Terminology

Algorithms

A step-by-step set of operations to be performed to help solve a problem

 

Conditional Statements

Making decisions based on conditions i.e. if some condition is met do something, else do nothing or something else

 

Function

A type of procedure or routine that performs a distinct operation. There are often ‘canned’ functions that exist already like the ‘jump’ block

 

Sequences

Identifying a series of steps for a task. Computers and Scratch read and perform commands in order from top to bottom

Create emojis with code! In this activity, learners remix a p5js sketch to build their very own interactive emoji artwork.

Technology

  • Computers w/ access to the internet

Before the lesson...

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.”

Unlock Emoji World

After you teach, go to www.canadalearningcode.ca/emojiworld and tell us you taught to get a unique code that will unlock Emoji World for your class.

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

r

More Lesson Plans For Grade 7-8

    View All Lesson Plans

    Explore lessons based on components

    The K-12 Computer Science Framework

    Although learning how to build digital projects is a key part of Computer Science education, students should also learn a wider set of skills and competencies that will help them to harness the power of digital technologies as both creators and consumers. A comprehensive approach to K-12 Computer Science education includes learning about the following five focus areas:

    View Framework ➝

    Programming

    By the end of high school, students should be able to create a simple computer program.

    Computing and Networks

    By the end of high school, students should understand and be able to use the tools and devices commonly used to build digital projects.

    Data

    By the end of high school, students should be able to explain how we use computers to create, store, organize, and analyze data.

    Technology and Society

    By the end of high school, students should be able to explore the ways in which technology and society have mutually shaped each other.

    Design

    By the end of high school, students should be able to apply design principles to the digital projects they create.