Tutorial: Adding Touch Gestures with the Patch Editor

In this tutorial, we’ll use the Patch Editor to create an effect with that responds to interactions with the screen of the device - like taps and swipes.

Download the sample content to follow along. If you open the finished project, you'll see we're going to build an effect with a clown nose and confetti:

  • The clown nose will get bigger when you pinch the screen.
  • The confetti will appear in the scene in response to a long press on the screen.

Opening the Patch Editor

To get started, open the unfinished version in the sample content folder.

You should see a 3D object that looks like a red nose in the Viewport and Simulator, attached to the face. and you should also see 3 particle systems listed in the Scene tab: red emitter, yellow emitter and green emitter. They create a confetti effect:



To start working with the patches, open the Patch Editor by clicking Workspace in the Toolbar and selecting Show/Hide Patch Editor. The Patch Editor will open below the Viewport.

There should already be a graph in the Patch Editor. It uses a face landmark patch - Nose - to fix the 3D object to the tip of the nose:

Using the Screen Pinch Patch

First, you're going to add an interaction that changes the size of the clown nose when you pinch the screen.

To do this, start by adding the patch that will detect a pinching movement on the device screen:

  1. Double-click anywhere in the Patch Editor.
  2. Select Screen Pinch from the menu.
  3. Click Insert Patch.

Screen Pinch has four ports:



We're only going to use the Scale port, because we want to use this interaction to control the size of the clown nose.

To control all of the scale coordinates of the clown nose at once, you'll need to take the screen pinch gesture and convert it into one point. To do this we'll use the Point Pack patch.

Double-click in the Patch Editor again and, find and insert the Pack patch.

Then, connect the Scale port on the Screen Pinch patch to each of the 3 input ports on the Point Pack patch:



Now you've converted the screen pinch gesture into one point, you can connect it to the clown nose itself. To do this:

  1. Go to the Scene Panel and select clown_nose.dae, then find Scale in the Inspector panel.
  2. Click the small arrow next to Scale to add a patch representing the Scele of clown_nose.dae to the Patch Editor.
  3. Connect the 3D Point port on the Point Pack patch to the clown_nose.dae patch you just added.


The scale of the clown nose should now change when you pinch the screen.

Using the Screen Long Press Patch

As you can see in the Viewport and the Simulator, at the moment the confetti is visible all the time. Let’s change this by using the Screen Long Press patch. You could use a different interaction patch if you wanted - there are lots to choose fromn.

First, double-click anywhere in the Patch Editor, find the Screen Long Press patch and insert it.

This patch has three ports. We're going to focus on the State port:



It's a boolean data type, which means at any point in time, it's either true or false. In our case, this means that the long press gesture is either detected or it isn't.

To tell Spark AR Studio what to do when a long press is detected, you'll need to:

  1. Insert an If Then Else patch, using the menu in the Patch Editor.
  2. Connect the State port on the Screen Long Press patch to the Condition port on the If Then Else patch.
  3. Change the 0 next to the Then port to 10, to set how long the press needs to be.


Next, you'll need to send this signal to the particle systems in your scene. The property that controls the rate at which particles are emitted is the birthrate, so that's where you need to send the signal.

To send the signal to the particle system:

  1. Go to the Scene Panel, select the each particle system - you can select them all at the same time by holding down command on your keyboard.
  2. Click the arrow next to Birthrate to insert this patch into the Patch Editor.

You’ll see 3 patches, representing the Birthrate of each particle system.

Connect the output port on the right hand side of the If Then Else patch to the Birthrate ports in each patch:



The confetti in your scene should now only appear when a long press is detected.

To test this, click the hamburger menu at the top of the Simulator, and select Simulate Touch.