Vidcode: Code a Snapchat Filter

Educator Resources

60 minutes

JavaScript

STUDENTS: START YOUR HOUR OF CODE TUTORIAL HERE

The activity 

Big Idea: Code is behind the things you use in your everyday life (like Snapchat filters!)

  • CCSS.MATH.PRACTICE.MP6 Attend to precision.

    CSTA 1B-AP-09 Create programs that use variables to store and modify data.

    CSTA 1B-AP-11 Decompose (break down) problems into smaller, manageable subproblems to facilitate the program development process.

    CSTA 1B-AP-14 Observe intellectual property rights and give appropriate attribution when creating or remixing programs.

    CSTA 1B-AP-15 Test and debug (identify and fix errors) a program or algorithm to ensure it runs as intended.

LESSON PLAN

Time: 60 minutes

  • 10 minutes background

  • 35 minutes coding

  • 10 minutes sharing

  • 10 minutes reflection

Background (10 minutes)

Review: What is a function? (Something to DO)
Objects hold your data. Use yourself as an example of an object.
teacher

Properties are the elements that are about the object, or belong to the object. Here are some of your properties (have the class volunteer more once they get the pattern):

teacher.height = 5.5; teacher.favColor = "blue"; teacher.name = "Ms. Miller";

You can think of properties as being like nouns or adjectives.

Methods are functions that belong to an object, or things the object can do. Here are some of your methods:

teacher.jump(); teacher.say("class dismissed"); teacher.walkForward(5);

You can think of methods as being like verbs.
You can tell a property apart from a method because methods are always followed by parentheses, just like functions. Sometimes they have arguments, and sometimes they don’t.
If you have enough time, have students come up with their own properties and methods, or use a famous person as an example, like Beyonce or Stephen Curry.

Code Challenge (35 minutes)

Time to make a Snapchat filter by adding words and graphics to your video!
Have students complete the “Snapchat Challenge” tutorial, paying attention to the properties of the text and graphics objects. Circulate to make sure students get to try out both text and graphics.
Note, some students may ask about how objects are created and saved. This is slightly advanced for the level we’re coding at now, and will be covered later. For your reference:

var my_graphic = graphic("create.png");

graphic("create.png") is a function that creates a graphic object.

"create.png" is the argument to that function and it sets the graphic’s source property.
my_graphic is the name you gave to this particular graphic object, and var saves it as a variable you can access later.
See why we made that a draggable block?

  • movie = video();

    movie.source = "camping.mp4";

    var box = rect(0, movie.height-180, movie.width,200);

    box.color = "gold";

    box.opacity = .5;

    var my_graphic = graphic("bus.png");

    my_graphic.x = 40;

    my_graphic.y = 100;

    my_graphic.scale = 0.5;

    my_graphic.opacity = 0.8;

    var tip = text("don't sleep in!");

    tip.font = "Oswald";

    tip.x = 30;

    tip.y = 20;

    tip.color = "gold";

    tip.size = 30;

    var emoji = text("🤹");

    emoji.size = 150;

    emoji.rotation = 15;

    emoji.y = 220

    emoji.x = 70;

Sharing (10 minutes)

Be prepared to share what you created and share/explain how it worked. Share on individual computers with neighbors. Give feedback. Explain to students that the next activity will also be making memes, so they can spend some time before then thinking about how to make their next meme even better.

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 a property? (Something about or belonging to an object, like a noun or adjective.)

  • What is a method? (Something the object does, like a verb.)

  • How do you tell the difference? (Methods have parentheses and can take arguments.)

  • What are two objects you used today? (text and graphic)

  • Do the text and graphic objects have the same properties? (No, it wouldn’t make any sense for graphics to have a color or font!)

Sign up to our Hour of Code Newsletter for additional resources and updates!