AR - Virtual Face Paintings (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

When you run on the AR face camera, you have the option of displaying some or all of these 4 areas: face, eyes, mouth and lips.

In this tutorial, you will build a program that allows the user to try different face paintings.

Step 1 - Add AR Face Camera

Create a new project with these 3 starting blocks:

)

Note that these input options are changed for the “switch to AR face camera” block:

The markers are not shown, since we will focus on the face meshes;
Emulation mode is used, which allows us to easily look at the result from different angles;
All 4 meshes are turned on.

You should get the default face like this:

Step 2 - Add A Button for “Colors”

Please add the “widget” extension, then add a new button.

By default, the button will be added at the center of the stage. When you use the “Widget Position” tool to drag it to the left top, and the block will be updated automatically:

Step 3 - Update Face Color

Whenever the button is clicked, we would like to update the face color. To do that, we need the “when widget clicked” block, and then add the “update color” block.

Since “All” areas are selected, the entire face will be updated to the color you choose:

Step 4 - Set Random Colors

Instead of fixed color, you can randomly select the color whenever the button is clicked. The key is to use the “color” reporter block with a “pick random” block:

Now we can repeatedly click the “Colors” button to change colors:

Step 5 - Different Colors for Each Area

You can use the “area” input to control which part of the face to change color. The “Main” area refers to the face, the “Second” area refers to the eyes, the “Third” area refers to inside the mouth, and the “Forth” area refers to the lips.

For example, we can use 4 “update color” blocks, and select a different area for each block:

Step 6 - Another Button for “Tiger”

For the second face painting effect, let’s convert the face to a tiger. Please add a new button for “Tiger”, and drag it next to the first button:

Step 7 - Apply the “Tiger” Texture

When the new button is clicked, we should apply a new texture to the face. You can search for an image online with the face of a tiger, or some other animal. For example, this is a good tiger face image to use:

https://www.clipartmax.com/middle/m2i8H7b1A0N4G6m2_tiger-face-icon-tiger-animals-png-icon/

You need to download that image file, then upload it into your project as a costume.

Once that’s done, you can use the “update texture using costume” block to apply this texture to the entire face (all areas). Note that some images will show up upside-down, so it needs to be rotated 180 degrees.

Now you get a tiger face like this:

Step 8 - Adjust the “Tiger” Texture

The tiger face still has one major issue: only the center area of the tiger face is used. To make sure more of the tiger face is used, we can apply a simple trick.

In the costume editor, convert the tiger costume to a “vector”, then shrink it smaller. After that, draw a transparent rectangle (no fill) around the tiger’s face. This will shrink the tiger’s face, so it will fit into the face mesh.

Step 9 - Test with the Real Camera

Now we are mostly done with the coding, we can start to test with the real camera, and make adjustments. For that, we just need to switch the “emulation mode” to “No”.

Here is the final output:

Creative Ideas

There are unlimited ways for you to paint the face mesh differently. Here are some ideas:

Transparent Colors: you can try to use transparent colors for the face mesh, so the real face is still visible.
Text or Object: you can try to write some text or paint a small object (like a tree) on the face.
Other Animal Faces: you can try to replace the tiger costume with another animal face.