Patches in Spark AR Studio

Patches in Spark AR Studio act as visual building blocks. Use them to stitch together all sorts of capabilities, to bring your AR effects to life.

Many capabilities available in JavaScript can be added to your effect as patches, so you can add interaction and complexity without knowing how to code.

In this guide, you'll learn about:

• Understanding and editing patches in Spark AR Studio.
• The types of patches in Spark AR Studio, and how to create them.
• Creating a very simple effect, using the main patch types.
• Grouping patches.
• Connecting patches together, to build graphs.

Once you've learned the basics, it's worth taking a look at the different ways we've used patches to build full effects, in our sample effect tutorials.

Understanding and Editing Patches

This is what a patch looks like in Spark AR Studio:

Name

In the example above, the patch is called Loop Animation. You can rename some patches by double-clicking their name at the top of the patch.

Ports

The small circles along each side of the patch are known as 'ports'. Ports along the right side of a patch are known as 'output ports'. The ports on the left are 'input ports'. You'll link one patch to another by drawing a connection from an output port, to an input port.

Ports are labelled to indicate what they do. For example, Loop Animation has 3 inputs:

1. Enable - making a connection to this port can turn the animation on or off.
2. Duration - you'd adjust the value of this port to edit the duration of an animation, in seconds.
3. Reset - you'd use this port to reset an animation.

It has 1 output port, Progress. This port creates a signal representing the progress of the animation.

You can find more information about what each port does by right-clicking on the patch, and selecting Patch Info:

Editing Values

Many patches have values that can be edited. You can tell when a value can be edited, because the symbol next to the port or value label will change to a lighter color when you hover the mouse over it.

In the Loop Animation patch, 2 values can be edited:

• Duration: To change the duration of the animation.
• Mirrored: To mirror an animation.

Data Types

Ports accept associated data types. You can edit the data type in some patches by right-clicking the port and selecting an option from the Type menu:

The data type of the Transition patch in the example above is set to Point 3D. That means the patch can be used, for example, to transition an object from one position to another in 3D space. You'd do this by editing the values next to Start and End, to choose the X, Y and Z co-ordinates the object will move between.

If you changed the data type to say, Color, it could be used to transition the color of something.

Types of Patches

Producers

These patches generally represent objects you've added to the Scene tab - like the face tracker:

Create producer patches by dragging an object from the Scene tab, into the Patch Editor.

Producers will usually be at the start of the graph. You'll then choose patches that can use signals from the producer patch, to make things happen in your scene.

Consumers

These patches represent properties - for example, the visibility or position of an object in your scene. They're blue in color:

You can create producer patches by clicking the circle next to a property in the Inspector panel.

These patches will generally be the final patches in a graph. This is because they consume the signals created by the producer patch and other patches you've added. As a result, changes will be made to the property the patch represents.

Intermediaries

These patches take the information from the producer patch and manipulate it - depending on the type of intermediary patch you choose. They're grey in color.

Create intermediary patches by right-clicking in the Patch Editor, and selecting the patch you need from the menu.

There are lots of intermediary patches to choose from in Spark AR Studio:

• Math - to perform mathematical functions.
• Logic Patches - to perform logical functions.
• Utility Patches - a broad range of patches, from face trackers to random number generators.
• Interaction Patches - to interpret interaction from the person using the effect - like screen taps and swipes.
• Face Landmark Patches - to precisely capture the position of facial features.
• Facial Gesture Recognition Patches - these patches identify facial expressions - like a ‘Happy face’, ‘Kissing face’ or ‘Surprised face’.
• Animation Patches - to add animation.
• Audio Patches - to manage and control your audio assets.
• Visual Shaders - for working with textures and materials.

Creating Patches From Assets

You can create patches to represent assets you've added to your project, for example an audio file or a texture. They're orange in color.

Asset patches can be inserted multiple times.

Find about more about creating patches to represent audio assets, and textures.

Example

Here's an example of a simple graph. It uses:

• A consumer patch - representing the face tracker.
• An intermediary patch - Mouth Open. This patch captures when the mouth is open, and how open it is.
• 3 consumer patches, each representing the Visibility property an object that's been added to the Scene tab.

As a result of connecting these patches, when a face with an open mouth is detected, 3 objects will appear in the effect.

Let's take a closer look at how the patches in this graph makes this happen.

The Face output port in the the face tracker patch captures data on the face detected by the face tracker. The Mouth Open patch narrows down this information to focus on the movement of the mouth. It outputs two signals:

1. Whether or not the mouth is open - from the Mouth Open port.
2. How open the mouth is - from the Mouth Openness port.

In this example, we've used the Mouth Open port. We've connected this port to 3 consumer patches. These patches represent the Visibility property of 3 objects. Because they're connected to the Mouth Open port in the Mouth Open patch, the objects will become visible when the mouth is open.

To find out more about creating simple effects with the Patch Editor, take a look at these examples.

Grouping patches

You can group patches to help organize your graph. You can also save patch groups to use again in other projects, and share with other creators. Find out more.

Building Graphs

Find out more about creating patches and building graphs in this guide.