Vidcode: Facetracker

Educator Resource

The Activity

Use a facetracking library to code your own custom face filter, like the ones you use on social media.

Big Idea: Computers make a lot of decisions in the background, it’s important to think critically about where those decisions come from. All the decisions computers make are planned by humans!

LESSON PLAN

Time: 60-120 minutes

• 10 minutes background

• 30-90 minutes coding (depending on which chapter students choose to end)

• 10 minutes sharing

• 10 minutes reflection

Background (10 minutes)

This Hour of Code covers a lot of ground. But don’t worry! It starts off slow and ramps up. Students can submit a finished project at the end of any chapter.

Topics covered in this Hour of Code

JavaScript 

JavaScript is a programming language. Since computers don't speak human languages like English or Spanish, we use programming languages to talk to them. JavaScript is the programming language that we can use to talk directly to web pages.

Variables

A variable is a holder for your data. When you move or change the size of your graphic, you use the variable name. 

For example:

var my_rect = rect();

my_rect.color = “red”;

And 

var other_name = rect();

other_name.color = “red”;

Do the same thing!

Functions

Functions are the main way of getting things done in JavaScript. A function is an action that has a name. Functions are written with parentheses.

Some functions need one or more arguments inside the parentheses. This tells the function extra information about what to do.

rect(20, 20, 100, 100, “red”);

The rect function takes five arguments: an x-position, y-position, width, height, and color. The order matters!

Face-tracking

The line of code movie.facetracking = true; turns the facetracking library on. Otherwise it’s not running. This is because it takes a lot of resources to run, and would slow down other projects if it were on all the time.

Arrays

Arrays are lists that hold your data. They always start and end with square brackets, and the things in the array are separated by commas.

They look like this:

["rock", "paper", "scissors"]

The things inside the array are called items. We count array items starting from 0, so "rock" is the 0th item in the array, "paper" is the 1st, and"scissors" is the 2nd.

Repeat Loop

A repeat loop runs code over and over again. Code outside of a repeat loop on Vidcode only runs once, when it loads.

repeat(function(){

     //do something here

}, 1);

Repeat is a function that takes two arguments. The first argument is a function that holds the code that is to be repeated, and the second is a number that says how often to repeat it in frames.

For-in Loop

The for...in loop is used to loop through an array. 

In the example: 

for (var f in movie.faces){

    var face = movie.faces[f];

    text("😀", face.x, face.y, face.width);

}

The loop will use the properties from one face, then loop and iterate to the next face.

When it first loops, f is set to 0. Each time it loops, f increases by one.

If-else Statements

IF checks if something is true. But what if that thing is NOT true? For that situation, you have ELSE.

if (x = -y) {

       do a thing;

} else {

       do a different thing;

};

ELSE means the same as “otherwise” or “if not” or “conversely.” It lets us take one action if a certain condition is met, and another if it is not met. You can't use ELSE on it's own! It can only come after an IF.

Code Challenge: 30-90 minutes coding (depending on which chapter students choose to end)

CHapters

Chapter 1: Find a face

movie = image();

movie.source = "face.png";

var my_rect = rect(0, 0, 150, 200);

my_rect.color = "clear";

my_rect.x = 495;

my_rect.y = 120;

my_rect.width = 400;

my_rect.height = 570;

my_rect.borderColor = "#E90ADA";

my_rect.borderWidth = 15;



Chapter 2: Human vs Machine

movie = image();

movie.source = "face.png";

var my_rect = rect(0, 0, 150, 200);

my_rect.color = "clear";

my_rect.x = 495;

my_rect.y = 120;

my_rect.width = 400;

my_rect.height = 570;

my_rect.borderColor = "#E90ADA";

my_rect.borderWidth = 15;

movie.facetracking = true;

repeat(function() {

  var face = movie.faces[0];

  var comp_rect = rect(20, 50, 40, 40);

  comp_rect.x = face.x;

  comp_rect.y = face.y;

  comp_rect.width = face.width;

  comp_rect.height = face.height;

  comp_rect.color = "clear";

  comp_rect.borderColor = "#0FECF0";

  comp_rect.borderWidth = 15;

}, 5);

Chapter 3: Beauty in Simplicity

movie = image();

movie.source = "face.png";

movie.facetracking = true;

movie.facetracking = true;

repeat(function() {

  var face = movie.faces[0];

  //var comp_rect = rect(face.x, face.y, face.width, face.height,"clear","blue",15);

  var emoji = text("🦄", face.x - 30, face.y-20, "clear", face.width + 120);

}, 5);

Chapter 4: Stand out from the Crowd

movie = image();

movie.source = "group.png";

movie.facetracking = true;

repeat(function() {

   for (let i = 0; i < movie.faces.length; i++) {

       let face = movie.faces[i];

       let r = text("👀");

       r.x = face.x;

       r.y = face.y;

       r.size = face.width;

   }

}, 5);

Chapter 5: ...And We’re Live!

movie = webcam();

movie.facetracking = true;

repeat(function() {

  if (movie.faces.length > 0){

    for (var f in movie.faces){

      var face = movie.faces[f];

      if (face.width > 100){

      text("👑", face.x, 

           face.y-(face.height/2), face.width);

      } else {

        text("🕶", face.eyes.x, 

             face.eyes.y, face.width);

    }

  }

}, 5);

Sharing (10 minutes)

Be Prepared to share what you created and share/explain how it worked.

Students should share their filters and their experiences with facetracking

• In Chapter one, what decisions did you make that were different than the ones the computer made?

• Does the facetracking software find all faces all the time? 

• When does it fail? 

• Who does it exclude?

Discussion and 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?

• How many different ways can you find to fool the facetracker?

• Imagine this facetracking software was used to identify every person entering a bank. What benefit would it have? What problems would arise? How would you feel about going into that bank?

• Imagine this facetracking software was used to identify people at a protest. What benefit would it have? What problems would arise? How would you feel about going to that protest?

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