Make Your Own Face Filters in PictoBlox Using the Face Detection

Introduction

Many of you must have used face filters like the age filter on Snapchat or Blossom filter on Instagram. But did you ever wonder how these filters recognize our faces? 

Learn how face filters work hands-on by making a project that lets you choose a filter among the ones displayed on the screen and apply it to your face using PictoBlox’s Face Detection extension.

Prerequisites

To make the project all you need is 

1. A laptop or a computer with a camera,
2. The latest version of PictoBlox downloaded
3. Good Internet connection.

You can download PictoBlox from here:

Setting Up the Project

Let’s begin by adding the Face Detection extension.

1. Open PictoBlox.
2. Click on Board and select evive.
3. Next, click on the Add extension button.
4. And choose Face Detection extension.
5. You need to keep two things in mind while working with this extension:
   1. That your computer is connected to the internet.
   2. You did Log in to your PictoBlox account to use it.
6. Wait for a little till the models get loaded.

You are now all set to proceed further.

Making the Face Filter Library

Let’s begin by adding sprites to our project.

1. Delete Tobi’s sprite by clicking on the delete button.  
2. Now, let’s make the Filter library so that we can choose among the filters that we provide. Click on Choose a Sprite button and add the Face filter sprite you want to apply on your face.
3. Next, add as many face filter sprites as you want to try into the Sprite palette one by one.
4. Now, let’s change the costumes of the face filter sprites from the Costumes tab. You may choose the costume from the options available.
5. Change the following as:
   1. Face filter 2 to heart goggles
   2. Face filter 3 to crown 1
   3. Face filter 4 to crown 2
   4. Face filter 5 to a mustache
   5. Face filter 6 to bunny ears
   6. Face filter 7 to Beard
   7. Face filter 8 to deer
   8. Face filter 9 to the facemask
6. Let’s make an additional sprite with a small message that prompts the user to click on different filters to try them. Thus, click on Choose a Sprite button and select Paint.
7. Use the Rectangle tool to draw background and Text tool to display the message.

Now that the sprites are added, let’s begin by setting the stage.

You can even choose the filters of your choice.

Customizing the Face filter Sprite

1. Select the First face filter sprite.
2. As we want to execute the program every time the green flag is clicked, thus place the when flag clicked hat block into the scripting area.
3. To turn on camera whenever we start the script, select the turn on video on stage with 0% transparency block from Face Detection palette and select ON from the first drop-down.
4. Now get a forever block from Controls palate.
5. Drag and drop an analyse image from stage block inside the forever block to continuously analyze the image from the camera and apply the filter accordingly.   
6. Now to make the filter of the size of the face, drag and drop set size to % block from the Looks palette.
7. Place the get () of face () block from Face Detection palette, inside the set size to block and choose the width from the first drop-down and 1 from the second.
8. Next, we need to detect the location where the face filter should be applied, thus add a go-to x() y() block from the Motion palette.
9. Add the get () of face () block from Face Detection palette in the X parameter and choose x position from the first drop-down.
10. Duplicate it and place it in the Y parameter, select y position from the 1st dropdown.

With this, the face filter will perfectly fit onto our faces.

Making the Face Filters Clickable

Now let’s resize the filters and make them clickable.

1. Select face filter 2.
2. Get when flag clicked block from Events palate.
3. Next, set the size of the filter to 50%.
4. Now to trigger a change in the filter we will broadcast a message when a sprite is clicked. Thus, drag and drop when this sprite is clicked block, place broadcast message block, and set the new message as heart goggles.
5. Repeat steps 2 to 4 for all the other face filters too.

Completing the Script

1. Now let’s select the main Face filter sprite and make a script to change the costume when it receives the broadcasted message. Place a when I receive broadcast block from the Controls Palette and switch the message to heart goggles.
2. Drag and drop the switch costume to block and select Heart Goggles from the drop-down.
3. Right-click on this script and duplicate it the number of times we have the face filters times and change it for each and every filter by selecting their broadcast message and costume from the drop-down.

Now your basic script is ready.

Click on the flag button and arrange your filters.

Making the Face Filter Tilt

As you try out the filters, you would have noticed that filters don’t tilt if you tilt your head. In order to make it tilt, we will need to do a few modifications to the main script.

1. To find the tilt angle of your head we will use the slope of a line that joins your eyes.
2. We will find a difference in X-position and Y-position of left and right eyes and store it variables dX and day. Now the slope is equal to dX/dY.
3. To find angle we will apply a Tan inverse function to it.
4. If the angle is positive we will directly make the filter point in direction of angle.
5. And if it is negative we will add 180 to it to get the angle.

Conclusion

With this, your AI-based face filter project is ready. Go ahead and enjoy!