In this guide, you'll learn how to use patches to build an effect that responds to facial movements.
We’re going to use the Patch Editor to:
As a result two 3D objects that look like eyes will spin when the the person using the effect raises their eyebrows.
Download the sample content to follow along.
To get started, open the unfinished version in the sample content folder. You should already see a selection of 3D objects in the Scene Panel. In the Viewport and Simulator you can see these objects look like big bug eyes:
We’ve also used a blend shape to distort the shape of the face and added a retouching effect. Find out more about face distortion and retouching in this tutorial.
To open the Patch Editor:
The Patch Editor will open at the bottom of the screen:
We want the 3D objects to animate when the user’s eyebrows change position.
To detect this change you'll start with a patch representing the face tracker. To create the patch:
Three patches will be created:
We’ll use the 3rd patch - facetracker1. We’ll connect patches to the Face output port in this patch to take data on the movements of the face.
To detect raised eyebrows we'll use an interaction patch called Eyebrows Raised.
To create any interaction patch, click Add Patch at the bottom of the Patch Editor. You'll see a menu:
To find the Eyebrows Raised patch:
Patches that detect facial movements must be connected to a face tracker patch to work properly. So, connect the Face port in the facetracker0 patch to the Face port in the Eyebrows Raised patch.
You'll see a connection between the two patches:
The next step is add the patches that will trigger the animation when raised eyebrows are detected. You can use the Pulse patch to do this. To add it to your project:
Connect the unnamed port on the Eyebrows Raised patch to the On/Off port on the Pulse patch.
Here's how your graph will look:
The Pulse patch will send a signal to any patches connected to it when the eyebrows are raised. In this project we'll connect it to an animation patch to trigger an animation.
The patches we’ll use to add animation in this effect are the Animation patch and the Transition patch. To add these to your project:
Each of the two Transition patches will specify the movement of each of the 3D objects.
Connect the Turned On port in the Pulse patch to the Play port in the Animation patch. This tells the effect to start the animation when the input is on, in this case when the eyebrows are raised.
Once you've done that, connect the Turned Off port in the Pulse patch to the Reset port in the Animation patch. This will reset the animation every time the eyebrows are raised:
Now you've set up the trigger, you can start to build the animations that will rotate the 3D objects.
You'll need to do this separately - once for each object over each eye.
Let’s start with the right eye.
First, you need to create a patch representing the rotation properties of 4 meshes that make up this part of the eye. They're each listed under a different object in the Scene Panel. Expand the objects and any null objects underneath them to find the mesh.
When you find the mesh, select them. You can select all the mesh at the same time by holding down command on your keyboard.
Your Scene Panel should look like this:
In the Inspector, click the arrow next to Rotation to add the patches to your project.
Four patches will be added:
Here’s how this part of the graph will look:
Before this part of the graph is complete we need to edit the values in the Transition patch. This will set how the animation will move. Change:
Here’s how the Transition patch should look:
We’re basically going to do the same thing for the left eye.
Again, select the meshes in the Scene Panel. Expand:
And again click the arrow next to Rotation in the Inspector.
In the Transition patch, change:
And there we go, your effect should be ready!
Make an effect respond to taps on a device screen.
Use Counter and If Then Else to show different things in response to interaction.