Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

Using Face Movements to Control Animation

You can set an animation to play when a specific face movement or gesture is detected. Here we’ll look at 2 examples:

You’ll use a patch representing the face tracker, and an interaction patch. The face tracker patch will detect the movement of the face and the interaction patch will detect a specific facial movement or expression.

You’ll connect these to the Loop Animation and Transition patches, to create the animation.

Other interaction patches can be used to create these effects too. You’d just remove the face tracker patch from the beginning of the patch graph.

Playing an animation while an interaction is detected

Creating the patches

To try this out, add:

  1. A face tracker to your project, and create a patch to represent it by dragging it into the Patch Editor.
  2. Add an interaction patch, using the menu in the Patch Editor. For this example we’ll use the Smile patch - but you could choose another interaction patch that detects facial movement.
  3. A Loop Animation and a Transition patch, again using the menu in the Patch Editor.

Next create a patch to represent the property you want to affect. The Position or Rotation properties work well, to either move the object along the X, Y and Z axis or rotate it. In this example, we’ll use Position. To add this patch:

  1. Select an object in the Scene panel.
  2. Click the arrow next to Position in the Inspector.

Connecting the Patches

Now connect:

  1. The Face output in the face tracker patch to the Face input in the Smile patch.
  2. The output of the Smile patch to the Enable input port in the Loop Animation patch.
  3. The Progress output in the Loop Animation patch to the Progress input in the Transition patch.
  4. The output of the Transition patch to the 3D Position input in the patch representing the 3D object.

Here’s how your graph will look:



The final step is to edit the values in the Transition patch, to set the movement of the object. It’s worth experimenting with different values here. For this example try setting:

  1. The X and Z values next to End to 0.
  2. The Y value next to End to 0.1.


The object will start at a position of 0 on the X, Y and Z axes, and move upwards along the Y axis:

You could try checking the box next to Mirrored in the Loop Animation patch, to mirror the movement of the animation

Starting and stopping an animation each time an interaction is detected

If a patch creates a boolean signal, it sends information to other patches in your graph to say whether something is happening or not. Use the same patches as in the example above to try this out.

Finding out what kind of signal a patch creates

Find this information in Spark AR Studio:

  1. Right-click in the Patch Editor.
  2. Search for a patch.

You’ll see information about what the patch does, including its inputs and outputs:

Adding the patches

From the menu in the Patch Editor, select a:

  1. Pulse patch.
  2. Switch patch.

The Pulse patch will transform the signal from the Smile patch into a discrete event.

Disconnect the Smile and Loop Animation patches, and add the Pulse and Switch patches between them. Here’s how your graph should look:



The animation will now switch between starting and stopping each time a smile is detected.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?