🤑 Join the Treehouse affiliate program and earn 25% commission!

✨ No-code curious? Check out 4 new FREE Adalo courses and start building an app in minutes — no code required!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Well done!

You have completed Create AR Effects for TikTok with Effect House!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

Nodes

12:32 with Rachel Johnson

In this video, we’ll get Mike to imitate the user by using facial movement detection nodes. When the user blinks, Mike will blink too! When the user opens their mouth, so will Mike! We’ll also add a speech bubble that originates from the user’s mouth when it opens.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Now that we've got our objects placed, let's add some Facial Movement Detection, 0:00

such as Mike blinking when we blink and Mike's mouth opening when our mouth opens. 0:05

We'll start off with the eyes. 0:11

We'll make Mike blink when we blink. 0:12

To do this, we're finally gonna play around with this guy down here, 0:16

the visual scripting panel. 0:19

So I'm gonna make this really, really big so we can see what we're doing. 0:22

And we don't really need to use the scene panel anymore because we've 0:25

actually already placed all of our objects. 0:29

So we'll just leave that there. 0:32

We're gonna have to add something that we'll watch for when our eyes blink. 0:35

So I'll explain everything along the way. 0:39

But come over here with me to the top right of the panel where it says Add node. 0:42

When you click this, 0:46

the dialogue box will appear in the middle of the visual scripting panel. 0:47

We're gonna look for Facial Movement Detection and press Enter. 0:52

Now, this will drop a node into our visual scripting panel, so 0:58

I'll just scroll right in there, so we can really see it. 1:02

Now, there are two parts to a node. 1:06

There's the input on the left, and then the output on the right. 1:08

So for this particular node, an input is what we're looking for, and 1:11

the output is what to execute based on the input. 1:16

So for us, we're detecting Face 0. 1:21

So what this means is that it's the first face that we see. 1:23

If we click on this, we'll see Face 0, 1, 2, 3, 4, and Any. 1:26

So this is a default because it's the first face. 1:30

We're gonna make an effect with just one face. 1:33

So Face 0 makes sense. 1:35

And Facial Movement is Eye Blink Both. 1:37

It's a very odd combination of words, but I'm sure you get what it's trying to say. 1:40

It's gonna look for when both eyes are blinking, so when both eyes are closed. 1:45

Now that we've told the node what to look for, we'll go over to the right here and 1:51

we'll tell the node what to do once it detects that Face 0 has Eye Blink Both. 1:56

So we'll have a look at these four arrows. 2:02

We've got Begin, Stay, End, and None. 2:04

We'll start with Begin. 2:08

Now, a begin is when the action is first detected, when we begin to blink our eyes. 2:10

So what we're gonna do here is we're gonna take this green arrow and 2:16

we're gonna drag it just somewhere else, somewhere anywhere else on the panel. 2:20

And it pops up with another dialog box. 2:24

Now, what we have to do here is to create a node that will run when eyes 2:27

begin to blink. 2:31

So what we're gonna do is we're going to look for a Set Image. 2:33

The idea here is that when the eyes blink, we're gonna change this image's texture 2:37

to a texture where Mike is blinking so it looks like he's following us. 2:42

So Set Image, we'll press Enter, and we'll pop that in there, and 2:47

we'll just come over here. 2:50

Now, I'm panning around the space using the right mouse button. 2:52

I'm clicking on the right mouse button and then dragging. 2:55

That's what's happening here. 2:57

Now, you may have noticed already this little blue, not blue right now, 2:59

white dot. 3:04

You can see that when I blink, it turns blue, and that's sort of saying, 3:05

hey, I'm working, I'm watching your eyes, and I can see when they blink. 3:10

So this, as you can see, is a little bit of a different kind of node for 3:15

starters up here. 3:19

The header section is gray, whereas this one was blue, and 3:21

we've got a slightly different icon. 3:24

Now, this is called a utility node. 3:26

This changes something about something else. 3:28

And then over here, we've got our next. 3:30

So once we're done setting the image, 3:34

we can tell visual scripting to go do something else. 3:36

But in our case, we're just gonna set the image and we're not gonna do anything. 3:40

So we don't actually have to use this arrow at all. 3:43

So what are we doing? 3:47

We are changing an image. 3:48

So we'll select this image. 3:49

Currently, it's None. 3:51

So what are we targeting? 3:52

We're targeting Mike. 3:54

Press OK. 3:55

What are we changing Mike to? 3:56

We want Mike to blink with us. 3:58

So for the texture, we're gonna change it to mike-blink. 4:00

Now, for color, we have to select white, because if we set select black and 4:05

I'll show you what happens, It changes to the sort of muddy, blackish image. 4:10

It's almost like it's overlaid. 4:16

So we will have to select white. 4:18

Okay, so let's see what happens when we blink. 4:22

Okay, when we blinked, Mike closed his eyes, 4:27

[LAUGH] only he didn't open them back up again. 4:30

Of course not, we never told him to open it back up again. 4:32

So let's put this over here and 4:36

we'll see what we can do to get Mike to open his eyes again. 4:38

Back to our four arrows here, we've got Begin, Stay, End, and None. 4:42

Let's have a look at End. 4:45

So as you could probably guess, this is what runs when this action, this 4:47

Eye Blink Both action ends, so when we're done blinking and we open them up again. 4:51

So just like before, we're going to drag this arrow, let's say, down here, and 4:57

then we're going to find Set Image, because we are gonna set the image again. 5:01

We're gonna set Mike's image back to neutral. 5:05

So let's drag it up here so we can see and we'll come down here. 5:09

Now, we can have a look at this dot when my eyes open again. 5:12

It goes blue, so it's working. 5:16

So Image is Mike, Texture is neutral. 5:18

And again, with this color, we have to set it to white. 5:24

Let's have a look. 5:28

Hey, it's working super well, Mike is blinking with us. 5:31

So let's have a look at the remaining two arrows. 5:35

So Stay, the second one, 5:39

Stay is what happens when the action is still happening. 5:41

So when our eyes are still closed, what do we want Mike to do? 5:45

Well, we want Mike's eyes to stay closed as well. 5:47

So let's take this arrow and drag it to this node. 5:51

Now, if you're familiar with programming, 5:55

you'll notice that nodes are very similar to functions. 5:57

Functions can be called many, many times from many different places, and 6:01

this is what's happening here. 6:05

Both Begin and Stay are both calling this Set Image node or function. 6:07

And also with None, let's have a look at None. 6:11

None means when this action is not happening, so when we're not blinking, so 6:14

when our eyes are open. 6:19

So of course when our eyes are open, we want Mike's eyes to be open as well. 6:20

So let's take this arrow and drag it down here to this arrow. 6:25

Okay, working pretty well. 6:31

And there you go, you've written your first visual script with 6:33

just three nodes and a bunch of connections. 6:38

Mike is happily blinking away with us, go you. 6:42

Now, let's tackle that speech bubble that appears when we open our mouth. 6:45

Now, I know I said earlier that we already placed all of our objects, but 6:51

apparently not. 6:54

So let's make our scene panel much bigger so we can see what we're doing. 6:56

Now, just like before, the speech bubble will be a face sticker. 7:00

But instead of adding another one, let's just duplicate Mike. 7:04

So come over here to the Hierarchy panel. 7:08

We'll right-click on Mike, and Duplicate. 7:11

And then come over here to the Inspector panel. 7:12

First, let's rename it to Bubble. 7:17

And then we'll come down here to Texture. 7:18

When you click on mike-neutral to change it, again, 7:25

the dialog box will appear in the middle of the screen. 7:27

So we'll come over here and we'll find bubble-web and press OK, 7:30

Great, okay, so now we've got that directly above Mike's face. 7:37

So over in the Scene panel, we're going to drag this down so 7:42

that the very corner of our speech bubble is just touching that blue dot. 7:46

Now, on my screen, it looks very, very small, so I'm gonna make 7:52

it a little bit bigger, but you can feel free to do what works best for you. 7:57

So because this only appears when our mouth opens, let's open our mouth and 8:02

try to position it nicely in the preview. 8:06

So, Okay, 8:08

so now let's get back to scripting. 8:16

So I'll make this super small cuz we won't need it. 8:19

Now, back in visual scripting, I'll scroll out a little bit and 8:22

then we'll move somewhere else because we're no longer really working with our 8:26

Eye Blink Both [LAUGH] Facial Movement Detection. 8:31

But we do need another facial movement detection. 8:34

So let's come over here and we'll create a new one. 8:37

Come up here to the plus icon, come back to the middle where the dialog box is 8:40

opened, and we'll look for a Facial Movement Detection once again. 8:44

Okay, so we'll move this here, we'll scroll in. 8:50

Now, what are we looking for? 8:53

We are looking for when the mouth opens. 8:55

So let's click on Facial Movement and Mouth Open. 8:57

Great, so what do we want to happen? 8:59

We want this bubble to appear when our mouth opens. 9:04

So let's grab our arrow, come over here, and we're gonna use 9:08

Set Visibility because we're going to make it visible or invisible. 9:13

Okay, so this one looks a lot more simple than the Set Image node. 9:19

In fact, there's really only two things that you can change here. 9:25

So let's have a look at the blue/white dot. 9:29

Hmm, seems to only work when I just open it. 9:35

We'll see how that works later. 9:38

So Target is our Bubble and Visibility is On. 9:40

So when our mouth is open, we want to turn it on. 9:45

Okay, I mean, of course, that works [LAUGH] cuz it was already there. 9:49

So let's take it away when it ends. 9:56

So we'll drag this over here, give it another one, oops, Set Visibility. 9:58

Okay, Target is Bubble, and then Visibility is Off. 10:07

Great, now it's working. 10:15

However, you may have noticed that when you, let's say, refresh the effect, 10:17

When refreshed, it's there, even though our mouth isn't open. 10:23

So this is a great example of why we need to use Stay and None. 10:28

So let's do Stay first. 10:34

So Stay when our mouth is open, we wanna keep it visible. 10:35

And None is when our mouth is closed. 10:40

Now, this includes the beginning of the effect. 10:42

So when our mouth is closed, we set the visibility to None. 10:45

Let's refresh the effect now. 10:50

It appeared a little bit [LAUGH]. 10:55

Okay, it's probably cuz my mouth was kind of open. 10:59

And now you can see when the filter is refreshed, 11:03

it doesn't just appear by itself. 11:06

And then now, Works great. 11:08

Now, something that we still have to add is Mike's mouth opening and closing. 11:13

So instead of creating a whole new Facial Movement Detection, 11:18

what we're gonna do is we're gonna chain onto these Set Visibility nodes. 11:23

This thing that we talked about before that we weren't gonna use, 11:28

we're gonna use now. 11:31

So, Mike, again, we're changing Mike's texture, Mike's images texture. 11:33

[LAUGH] So let's see, when my mouth is open, 11:39

we're gonna set Mike's mouth to open as well. 11:42

So let's chain alone, Set Image, it's very big, 11:45

we might have to rearrange everything just a little bit. 11:51

So Set Image, we're gonna target Mike. 11:58

Texture is Mike mouth open, and color is what? 12:02

Let's see, Perfect, 12:09

not only are we getting the speech bubble down here, but Mike is also opening and 12:13

closing his mouth according to when we open and close our mouth. 12:18

Got a pretty cool filter so far. 12:23

All right, so we've got our objects, we've got our nodes, next, 12:25

we're gonna tackle interactions 12:29

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up