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.
You can use the Patch Editor to add interactivity, logic and animation to your effects, without needing to know how to write code.
You'll do this by creating patches that represent objects, assets and their properties. You'll then connect them together in what's known as a graph.
In this tutorial, you'll learn the basics of using the Patch Editor. We'll cover:
You can also use the Patch Editor to create your own textures and make complex changes to materials.
We've already added a 3D object shaped like a heart to the scene - it's listed as heart in the Scene Panel.
For now we'll start with the basics, making the object appear in response to interactions, change color, and animate.
To open the Patch Editor:
The Patch Editor will open at the bottom of the screen:
Most objects, assets and properties in Spark AR Studio can be represented as patches.
Let's take a look at the different ways to create patches.
Objects in the Scene Panel can be dragged into the Patch Editor.
To try this out, insert a face tracker:
Because the face tracker produces a signal - in response to the movement of the face - the patch we've created is known as a producer patch. Producer patches are pink.
You can use the Inspector to create patches representing the properties of an object or asset. When a property has a small circle with an arrow in next to it, it means you can make a patch to represent it.
To test this out:
The patch that's been created can be used to control whether or not the heart is visible in your effect.
Patches created to represent object properties will always be at the end of the graph - because they consume the signals created by all the other patches, to make something happen in your scene.
For this reason, they're known as consumer patches. They're always yellow.
You can create the patches that control exactly what happens in your effect in the Patch Editor itself. To do this, click Add Patch at the bottom of the Patch Editor.
You could also right click anywhere in the Patch Editor to show this menu.
Each of the options in this menu represent a different type of patch. For example:
For this example, we’re going to use an interaction patch. Interaction patches detect interactions from the person using your effect. To add one to your project:
You’ll see a gray patch has been added to the Patch Editor:
When it’s connected to the face tracker, the Mouth Open patch will detect whether the person using your effect has an open mouth or not, and how open it is.
Let's take a quick look at the patches you've just created. The circles on either side are used to make connections to other patches. They're known as ports - the circles on the right are input ports, and on the left are output ports.
The labels on the patch give you an indication of what data the ports can pass and receive when they're connected as part of a graph:
For example, the Mouth Open patch can receive data from the Face port in the face tracker patch. If you select the patch itself, the labels next to each output port show what signals they can pass on to the next patch.
In this case, the Mouth Open port will indicate whether the mouth is open or not, and the Mouth Openness port will indicate how open it is.
Now let's connect these patches. You can do this by clicking and dragging a connection from an output port, to an input port.
Select the faceTracker0 patch. Connect the Face port in the face tracker patch to the Face port in the Mouth Open patch.
Then connect the Mouth Open port in the Mouth Open patch to the Visible port in the patch representing the heart object. You'll see the heart has disappeared. It'll now only be visible when an open mouth is detected.
Here's how the graph will look:
Not all ports can be connected to one another. This is because you can only connect ports with compatible data types.
You can find the data type, as well as information about what each port does, in the Patch Library:
For the Mouth Open patch, you can see that the Mouth Open port outputs a boolean signal.
A boolean signal is always either true or false - in this case, the mouth is either open or closed. Because an object is either visible, or not, these patches can be connected to each other directly.
If you break the connection between Mouth Open and Visible, by clicking a port and pressing delete on your keyboard, and try to connect it to Mouth Openness instead, you'll be unable to make a connection.
This is because Mouth Openness outputs a number signal, detecting how open a mouth is. It needs to drive a property that can read this signal - like a single channel of scale.
We'll look at how to do that next.
To try out using the Mouth Openness port, create a patch representing the scale of the heart object, by clicking the arrow next to Scale in the Inspector.
We can't connect the Mouth Openness port directly to the 3D Scale port in the patch we just created, because we need to scale the heart using values relative to the values generated by the Mouth Openness port.
We can use the Transition patch to do this. To add a Transition patch:
The Transition patch can be used to convert a progress value between a start and end range of your choice. In this case, we'll use it change the scale of the heart along the X,Y and Z axes.
To finish, set the co ordinates that we want the heart to scale between, by changing the values in the Transition patch. To do this, just click the value you want to change.
For this effect edit the values next to End. Set X, Y and Z to 9. When the mouth is fully open, the heart will be 9 times bigger than its original size.
When making effects, you might want something to only happen sometimes, or for different things to happen based on different interactions. This is called adding logic. A basic example of this would be to show one object if someone raises their eyebrows, and a different object if someone opens their mouth.
You can combine all kinds of patches to add complex logic, but to make a fun effect that's easy for people to use and understand, it's often a case of the simpler the better.
The logic we're going to add now will make the heart change between two colors, each time it appears.
You'll change the color of the material applied to the heart using a patch that represents the material's Diffuse property. To create the patch:
In the Patch Editor menu, select a:
When connected to the Mouth Open patch, the Pulse patch will send a signal to the next patch in the graph, each time the mouth opens.
You're going to connect the Pulse patch to the Switch patch. As a result, each time the mouth is opened, a switch will be turned either on or off.
You'll connect the Switch patch to the If Then Else patch, which is where you'll add the two different color options to switch between.
You can change the data type of many patches in Spark AR Studio, to use them in different ways. By default, the If Then Else patch's type is set to Number. This means it'll count single values.
Because we're using this patch to change the color of the material, change its Type to Color.
To do this, click the dropdown box at the bottom of the patch - here you'll see a list of the different data types you can choose from. Select Color.
Now let's take a closer look at the two inputs in the If Then Else patch.
Like we said earlier, the first time the mouth opens, the switch will be turned on. This will trigger the color we set next to the Then port to appear in the effect. The next time the mouth opens, the switch will turn off, triggering the color we set next to the Else port to appear.
To set the colors, just click in each box and select a color.
For this tutorial we’ll select pink and blue. You can pick any colors you want!
Now you're ready to connect the patches. Connect:
Now, each time the mouth is open, the heart will change color.
Let's now animate the object using the Loop Animation patch. The Loop Animation and Transition patches can be used together to add a continuous looping animation between the start and end values set in the Transition patch.
From the menu in the Patch Editor, select:
Next create a patch for the property we want to animate in the 3D object. Let's go with Rotation - so we can make the heart rotate from side to side. To create this patch:
It's worth mentioning here that if you wanted to animate the position or scale of the object, you'd still be able to, even though you've already made patches representing these properties. All you'd need to do is make the heart a child of a null object. You'd then be able to animate the position or scale of the null object, instead.
Here's how the graph will look:
Now adjust the values in the Transition patch, to set how the animation moves. It's usually a case of experimenting until you get the effect you want.
Let's make the heart rotate slightly from side to side, by editing the Y values:
The animation is now moving from one side to the next, then starting again. If you tick the box next to Mirrored in the Loop Animation patch, the heart will move back and forth.
It can be fun to experiment with the Curve option - to change how the animation moves. At the moment it's set to Linear. If you change it to say, Exponential Out, the movement will change.
When you've finished editing the patches, your graph should look like this:
You've learned the basics of using the Patch Editor - including inserting and connecting patches, editing values, and adding interactivity, logic and animation.