Everything you need to know to create an interactive augmented reality experience.
There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.
In this tutorial, you'll learn how to use more advanced patches, like Eyebrows Raised, Transition, Pulse and Animation, to build an effect that responds to facial movements.
Download the sample content to follow along. If you open the finished effect, you'll see you're going to build an effect with bug eyes that spin when you raise your eyebrows.
To get started, open the unfinished version in the sample content folder. You should already see the eyes in the Viewport and Simulator, and listed in the Scene tab. If you click Run in the Toolbar, you'll see that nothing happens. To make the eyes respond to facial movements, you'll need to animate them.
First, open the Patch Editor by clicking View in the menu bar and selecting Show Patch Editor. You should now see it below the Viewport.
For this project, we want the eyes to move when your eyebrows change position. To detect this change, you'll need to use the face tracker. To add this patch, select the face tracker in the Scene tab and drag it into the Patch Editor. As you can see, the face tracker patch is a group with three patches inside. For this effect, we need the facetracker1 patch and the Face port.
Now that you have the face tracker information, you can start to build a graph that triggers the eye rotation animation when eyebrows are raised.
To do this double-click anywhere in the Patch Editor, select Eyebrows Raised from the menu and click Insert.
Eyebrows Raised lets you capture data about specific parts of the face. You could use other patches to do this, like the Mouth Open patch. These patches must be connected to a face tracker patch in order to work properly, so click the port next to Face on the facetracker0 patch and drag it to the Face port on the Eyebrows Raised patch. You should now see a connection between the two patches.
The next step is build the trigger for the animation. For this you need the Pulse patch. So, double-click in the Patch Editor, select Pulse from the menu and click Insert. Then, connect the unnamed port on the Eyebrows Raised patch to the On/Off port on the Pulse patch.
We want an animation to start when eyebrows are raised, so double-click in the Patch Editor and select Animation, then click Insert.
Connect the Turned On port on the Pulse patch to the Play port on 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 On port on the Pulse patch to the Reset port on the Animation patch to reset the animation every time the eyebrows are raised.
Now that you've set up the trigger, you can start to build the eye rotation animations. You'll need to do this separately, starting with the right eye.
To connect it to the eye, you'll need to make the values from the patches you've already inserted affect the rotation of the eye. To do this:
To test what you've built, click Run in the Toolbar and raise your eyebrows. When your eyebrows are raised, you should see the right eye rotate. Once you've seen it, click Stop in the Toolbar.
Next, you're going to do the same to the left eye:
Your effect should be ready! To check it works, click Run in the Toolbar and raise your eyebrows. You should see both eyes rotate.
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community