Vidcode: Animoji
Teacher Resources
60 minutes
JavaScript
the Activity
Use a loop to iterate over an array, making an emoji animate through multiple options.
Big Idea: The modulo operator makes your counting wrap around, like a clock!
-
CCSS.MATH.PRACTICE.MP1 Make sense of problems and persevere in solving them.
CCSS.MATH.PRACTICE.MP2 Reason abstractly and quantitatively.
CCSS.MATH.PRACTICE.MP4 Model with mathematics.
CSTA 1B-AP-09 Create programs that use variables to store and modify data.
CSTA 1B-AP-15 Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.
CSTA 1B-AP-17 Describe choices made during program development using code comments, presentations, and demonstrations.
NGSS ETS1.B: Developing Possible Solutions
AP CS P Standards
EK 4.2.4C The correctness of an algorithm is determined by reasoning formally or mathematically about the algorithm, not be testing an implementation of the algorithm.
EK 5.3.1G Parameters provide different values as input to procedures when they are called in a program.
EK 5.5.1D Mathematical expressions using arithmetic operators are part of most programming languages.
Lesson plan
Time: 45-60 minutes
10 minutes background
35 minutes coding
5 minutes sharing
5 minutes reflection
Background (10 minutes)
Review: What is an operator? (A symbol that manipulates data)
Review: What operators did we learn last time? (++, --, +=, -=)numbers)
Review: How do you make an array? (var array = [a,b,c];)
Review: How do we count the items in an array? (Starting at zero)
Review: How do we access an item in an array? (Using its index: array[5])
There's a new operator in town, and its name is modulo. It looks like the percent sign (%). It gives you the remainder when the first number is divided by the second.
14 % 5 = 4 “Fourteen mod five equals 4”
This may sound confusing, but you use modulo every day, to tell time! You are constantly doing %12 to It's why three hours after 11:00 is 2:00.
We count on clocks up to 12:00 (or 24:00), then wrap back around to 1:00. This is the same as calculating the remainder when the hour is divided by 12 (or 24).
Write this chart on the board, and have students complete the pattern.
9 %12 = 9
10 %12 = 10
11 %12 = 11
12 %12 = 0 (convention translates this to 12)
13 %12 = 1
14 %12 = 2
In this project, we're going to use the modulo operator to count through an array, but wrap back around to the start when we run out of items.
Code Challenge (35 minutes)
Have students complete the "Animoji" module. This one is particularly engaging with students, so give them the freedom to produce multiple videos and experiment with emoji.
Sharing (10 minutes)
Be Prepared to share what you created and share/explain how it worked.
Class:
Publish the completed projects to the Vidcode gallery. Allow time for the students to explore all their peers' projects on the gallery page.
Partners:
Share your project with your neighbors. If you have time, take ideas from your own videos and combine them with your neighbors to make a collaborative video! You can share with other groups and then collaborate even more!
Reflection (10 minutes)
What things did other students create that you'd like to know how to do?
What things did you create that you are proud of figuring out?
What is modulo? (an operator that calculates a remainder)
Why is it useful? (it lets you count like a clock)
What answer does modulo give you when the first number is divisible by the second? (0)
The modulo operator can be used to check if a number divides evenly into another number. Discuss how this might be useful (Examples: The clock, deciding if you can share a number of things evenly).
