2D text & Utility patches: counter, option picker / Instagram Filter Spark AR Tutorial | Ekaterina Usova | Skillshare

2D text & Utility patches: counter, option picker / Instagram Filter Spark AR Tutorial

Ekaterina Usova, Artist

2D text & Utility patches: counter, option picker / Instagram Filter Spark AR Tutorial

Ekaterina Usova, Artist

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (14m)
    • 1. About this lesson

    • 2. Objects and patches

    • 3. 2D Text

    • 4. Actual time & more

    • 5. Understand the logic

    • 6. Equality

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In today's lesson, we are going to create an awesome Instagram Filter with 2D text and actual time. 

We are going to learn new patches from the Utility and Math categories.

All you need is the Spark AR studio and a few pictures with transparent background.

Meet Your Teacher

Teacher Profile Image

Ekaterina Usova



I am a designer and photographer from Russia. I have a passion for teaching people and creating amazing things. 

Do you want to learn new skills that are in demand right now? Do you choose to create, to be an artist in the modern world? Welcome to my courses!

My courses are designed for such an enthusiast people as me, who always want to learn more! 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. About this lesson: Hi and welcome to the next lesson. In this lesson, we're going to create this filter. To create it, we're going to work with utility batches and math patches. 2. Objects and patches: I'm going to demonstrate this filtered on this one. And this filtering, we have several phrases of that change when you tap on a screen. So I'm going to add these phrases using rectangles. So let's add rectangle. I'm going to rename it. It shouldn't be full size. Okay. So it's just a rectangle. I hope you remember the way we work with it. Let's add a new material. Let's type. Our next step is to add a texture for this material. But you understand that we need several textures for this one, right? In this case we have three phrases and we want them to change one after another, but we have only one texture here. So again, in this case we need the patch editor. So let's open it and click here to create a patch. The patch from this texture. My next step is to import the textures that we're gonna use. So here are three phrases. This one, this one, and this one. We're gonna do the same thing, the screen tap patch. Cause we want a user to tap on the screen, then the counter and the option picker. Alright. So in this case, we need not the number but the texture option. So now it allows us to choose a texture from this acids. So let's select first, second, and the third one. We can drag like this. She make it smaller. And of course we need to go to the counter and change the maximum count to three hour, right? Lads connect these patches. Now we see the first phrase here. Let's switch to the seemingly touch. We touch me prophesies. 3. 2D Text: The next thing is the actual time. How to add it? Well, basically the time, it's that 2D text. So let me show you how to add a 2D texts for your filter. Click Add Object and, and find texts. Heritage is, in this case, since we already have the Canvas, 2D tags is added as a child object of it. But if you use play an object instead of the rectangle, then the 2D text needs its own canvas. Alright, so here it is. It's 2D texts. Let's rename it two times because we wanted to show the actual time. And let's take a look at the properties at the inspector panel. Here, we held the topography properties. So basically, you can add anything here. How are you? Since the text is too long, we see this three dots here. So let's drag like this. So we can change the size of this TextField just the way you want. Next, we can change the font. And the good news is you can upload any font you like. Let me show you how to do it. For example, I got this font, so a drag and drop it to my project. Here it is. You see that spark, your studio understands that it belongs to their fonts folder. Here's the name of the font. So let's go back to the text. And here, font, let's find it. It should be here at the bottom. Here it is. Very good. So you can change everything here like collared alignment, spacing between letters and lines. But in this case, we need the tax to be dynamic. What does it mean? 4. Actual time & more: If you click Insert, you'll see that we have several options here, like current city or temperature or time. So in this case we need the time. So let's select this one. What it does it as the actual time. We can also select the current CT or the current airports. It gets the information from GPS and add this information to the filter. For instance, let's select the day of the week. Again, we can't see it. Make it bigger. So it's Wednesday, alright? In this case we need just the time, so I'm gonna delete everything from here. This, then insert the time. By the way, let's take a look at the long format. The long forward means that different type of the time. So you see it has the seconds and PM or am. All right, so I delete and insert the short one. So I'm going to use this font. Just change the color to white. Then take this time and let it be somewhere some way here. Alright, let's take a look. So I'm going to restart my filter and take a look at how it looks. Although the color of the time is too intense, that it be more gray. Move like this. And this it, we've done, we've created a good filter. But what if you need the time to be only own one of the slides? Like you don't need it for this one or this one. You only need it for this one. The journalist in this case, let's work with the patch editor again. 5. Understand the logic: I really want you to understand the logic, because once you understand it, you can go further and create complex projects. Not just follow my steps, but you can create your own. So in this case, we need the time to be only for this one. And the journaling is the option number one. So for the option for this one means that option first, because I hope you remember that that first option is 0. And this one is the first or one. So what we are trying to do, we're trying to say, hey, we'd like to see the time only when we have the phrase to on a screen. That means if we see the option one from the option beaker, then, then we want to see that 2D text. That 2D text will be invisible for the phrases 13, and it will be visible for this one. So we selected 2D text, go to the properties and select the patch from visibility here. Well done. Next, how to get this phrase too? If we click here and go to the option peaker description, patch in four, we see that its output is that selected value. So the type of the output is that texture. Right now it's a texture is not the number. It's not the number of the option. And we need the number of the option instead. So lads go back, let's take one step back and take a look at the counter patch. The counter patch counts. So it tells that option beaker, which option to pick. That means if we click on this patch and go here, patch in four, and go to the output, that the output is a number that represents the current count value. So the counter gives a number as its output, and that's what we need in programming numbers and things like this. And they're called values. So we can create a new patch value. And what it does, it outputs that input value without changing it. So what it does, it just takes this value and right now it holds it, but it will output it. So again, right now if we click, we see option two and the values two, you click Options 0, values 011. So we received the value, we received a number of the phrase. And now we need to understand is the value equals to one, because again, 0, the value is 0. This picture, the value is one. This one. 6. Equality: So the value is one. We need to understand. Does it equal at patch? Doesn't equal what? One. And the tolerance is 0 in this case. So again, this patch gets this value from this one, so 1122. And what this package does, it compares this number with this one. I typed one here, but I anything. And it will compare these two numbers and it outputs the result. It is Boolean. Let me show you here. So the output for this patch, a Boolean signal that is true if the first and the second values are equal within the tolerance. In our case, the tolerance is 0. That means that these numbers should be equal exactly. And we connect it with this visibility patch. And yeah, it seems like it work because we don't see the time anymore. But let's restart the filter. So we have 0 everywhere, type 111. It compares these two numbers. And it understands that yes, these two numbers are equal. That means that our visibility patch is activated and we see the time tap again. 21, no, then not equal no time. By the way, the time the 2D texts is still here, but we don't see it because it is invisible. Type one more time again. These two numbers are not equal. So the time is invisible. Alright, great job. I hope you understand what we have just done. If not, watch this lesson again, because I really want you to understand what we are doing here. Alright? I believe in you. All right, see you in the next lesson.