Patch Editor: Use Face Gestures to Make Objects Appear

In Spark AR Studio, you can use interaction patches to create effects that respond to all kinds of interaction. In this tutorial we'll look at how to make an effect respond to face gestures, like a happy face.

If you don't have your own 3D object, you can use an object from AR Library. In this tutorial we're using the heart shaped 3D object from AR Library.

You can also use this technique with other interaction patches. For example with the Screen Tap patch to make an effect respond to taps on the device screen.

Responding to face movements

In these examples we're going to affect the Visible property of a 3D object, to control whether or not it's visible in the scene. Any property with an arrow to the left of it in the Inspector can be controlled using patches:

The object's Visible property is highlighted in the Inspector.

Creating a visibility patch

To create this a patch for the Visibility property of an object:

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

This will open the Patch Editor, and create a yellow patch:

A Visible patch has been added to the Patch Editor.

Creating patches that detect facial movement

To detect the presence and movement of a face in your effect, you'll need to add a face tracker to your scene:

  1. Click Add Object.
  2. Select Face Tracker.

If you want the objects to move with the movement of the head, make them children of the face tracker in the Scene panel. Otherwise, they can be placed in a fixed position in the scene and will not move with the head.

Next create a patch to represent the face tracker, by dragging it into the Patch Editor. Any patches that detect specific facial movements or gestures will need to be connected to this face tracker patch.

To create an interaction patch, right-click in the Patch Editor. You'll see a menu listing all kinds of patches. Under Interaction, you'll find patches that detect facial movement and gestures - for example Blink, Left Eye Closed and Kissing Face:

The add patch menu.

Select a Smile patch from the menu. You'll now see the following patches in the Patch Editor:

A patch graph containing five patches.

To build the graph, connect:

  1. The Face output in the facetracker0 patch to the Face input port in the Smile patch.
  2. The output of the Smile patch to the patch that represents the Visible property of your object.
A patch graph containing five patches.

Like many interaction patches, the Smile patch outputs a boolean signal. Boolean signals are either on or off. When the person using the effect smiles, the signal will be switched on and the object will be visible.

Making different objects appear

To show different objects in response to different gestures, create:

  1. Patches to represent the Visible property of each object.
  2. Interaction patches for the gestures you want to detect.


  1. The output of the facetracker0 patch to the input in each interaction patch.
  2. The output of each interaction patch to a Visible input.

The graph below will make a different heart appear in response to different face gestures:

A patch graph containing nine patches.

Making different objects appear in response to the same gesture

You can use the Counter patch to count through a series of options each time the same interaction is detected.

Combining the Counter patch with the Equals Exactly patch will tell Spark AR Studio to show a certain option depending on the number of interactions counted.

Creating the patches

Right-click in the Patch Editor, and select:

  • A Counter patch.
  • A Pulse patch.
  • 3 Equals Exactly patches.

You'll also need to create patches representing the Visible property of the objects in your scene.

Connecting the patches

Connect the patches, so your graph looks like this:

A patch graph containing 12 patches.

You'll need to make a couple of edits to the values in the patches.

Make sure the Maximum Count in the Counter patch matches the number of options you want to count through. In this example, it should be set to 3.

Edit the value in the Equals Exactly patches. Each should show a number between 1 and 3, depending on which order you want them to show in the scene.

Was this article helpful?