Face Expressions & LED Light Exercise

[00:00:00]
>> We have connected the Get User Media API to some AI face tracking software to an Arduino to create a face theremin. There you have it folks. Tell you what, I think it'd be fun to wire up the RGB LED, you can show different colors depending on what's going on as well.

[00:00:22]
If you look, this thing has four pins. It's an RGB LED, you always need a ground. I'll let you take a lucky guess why I picked the colors of the wires that I did. RGB red, green and blue one ground. Now, I will say this now. When I was going through this particular kit, I had to play around, I don't know if it was human operator error or when I did before but I'd like switch around some of the colors to get it to work right, so I am mentally prepared for that.

[00:00:56]
Maybe it was an operator error last time I did this. Maybe it's these are slightly different than I'm expecting. We'll find out together. We're gonna go with this initial layout first. And if I make it red and it turns green, we will adjust course accordingly either through code, probably we'll just do it in code.

[00:01:18]
So, we'll kinda get all of that in place as well. So yeah, as you can see, this one has four prongs, ground, R, G, and B. It's up to you if those are the colors of wires that you choose to use. I personally would suggest it, but you make your own choices, and I trust you.

[00:01:43]
Inherently so, you can try that out and let me know but I'm gonna try to do the same so I've got this RGB I used to say the bread board here and the longest pin, if I'm not mistaken, I can pull up the schematic just for the pin as well.

[00:02:09]
There's my face. I think the longest one is the ground, but it's one of those things which is I feel I'm pretty, I'm like 99% confident, but because you're all in the room, I am double guessing myself. I'm pretty sure that longest pin should be the ground.
>> You can't tell from that diagram.

[00:02:28]
>> I know. And at one point I definitely memorize this and I said do not forget whatever you do. And I've forgotten. But it stands to reason.
>> So, we don't have resistors in series with these, is that gonna be a problem?
>> I don't think so. In my experience, no.

[00:02:51]
How about that?
>> I think this has higher resistance, in a way.
>> And so I've plugged these, this schematic's different than, like, you can plug in any digital pins in this case. It doesn't really matter. Looks like I have it in 9, 10, 11. I know just in our live coding we have something in 11, so yeah, three digital pins of your choosing.

[00:03:34]
Bend that slightly so I can see it until also anyone looking at the film can see it. All right, we'll do the blue and I guess I'm gonna put this one. Eight, nine and ten. Eight. Nine, Get a little crowded on my board, it's all gonna be fine.

[00:04:27]
Ten. I just need something to go to the ground. I really want a different color wire, it's really important to me at this point. Like I said colors wires don't really matter. So, as you wire that I am gonna go flip over to my code to make sure that I am not insane.

[00:05:14]
At least, that I'm not wrong. For those watching my screen, it's very much like the LED, you just give it an array of pins. And so that will say RGB. So with Johnny-Five, it takes any CSS color, like the known ones like Blanched Almond. As well as the hex code color.

[00:06:01]
I said what I said [LAUGH] I don't see my light. So flash for a second there.
>> I think it's given me the wrong colors though.
>> That's what I said before, which is like I followed the schematic and I had the wrong colors. I had to like adjust the pin slightly.

[00:07:24]
So I am not surprised by that either. So we'll talk about how like
>> I got yellow, blue, and red. Should I get red, blue, and green?
>> Yeah, you might have, like I had to swap the numbers around and so. Yeah, so I think I said this before, I remember when I I had to, like, swap two of them.

[00:07:45]
So, out of hypothesis, I'm gonna swap the same ones I swapped last time. Like I said, it was not Let me see if that does the trick. Red. Blue, yeah, I am not totally sure, I know the experiences before. I don't know if it's the parts and these kits or what, but I had to swap it slightly, so normally they'd be an order.

[00:08:33]
I had to do it so the highest value. So it's basically three one two which is before when I tried it. I was like, maybe it's just me right now at this moment, so I was spiritually and mentally prepared for that but I had to swap those two.

[00:08:50]
And so like it was one of those things which is why you have the REPL it is very nice to be able to go in there and just like be able to change the color in the REPL and get the feedback that you need, and be able to kind of make those adjustments on the fly.

[00:09:05]
That's one place where the REPL is just super helpful in this case. So I'm gonna go back to my face theremin, and I'm going to not have the music piece for a little bit. I know. We'll put it back later, or you can put it back later. I'm just gonna comment out a lot of code.

[00:09:23]
It's gonna be okay. But I also, I'm gonna grab this and also see if I can get it to change colors based on my mood. Seems like a legitimate thing to do. So if I'm not mistaken, yeah, there's this expression. I'm just gonna socket.emit. If I'm already emitting the face, I could just emit it as the second argument as well.

[00:09:58]
So we'll emit the face position as well as the expression. We are going to slightly disable the piezo for a second. You can uncomment that line when you're ready, but just I think I've caused enough chaos with the audio. [LAUGH] For this workshop, I'm going to try to be at least a little bit polite to our friends at Frontend Masters.

[00:10:18]
Like a little, not a lot, just a little bit. So now we've got that. I'm gonna pull in that code where I swapped out slightly. Now when the face comes in, we've got just console.log the data. I think it is all in that same Data, we'll start this up.

[00:10:50]
And I should see the X, Y, and the face expression, RGB is not defined, I called it LED. All right, starting up red. And if we go here. I got the X and the Y, might be the second argument then. So data, Expression. Am I sending that all through?

[00:11:55]
Rank expressions first face, let's save that Instead. Happy, okay, so now happy is coming in. So with that on the server side, we should be able just starting like this actually is just a helper function cuz actually gives you the weights and confidence for every single phase. When I'm like, I don't care about the weights and conferences tell me which one one, says all this function does is like literally just sort the keys.

[00:12:37]
So we'll send that there was a second argument, and back in we go and so now, If expression is happy, rgb.color green, I feel like angry should be red. We know that, right? Cool. [LAUGH] If expression equals angry, you've seen the movie inside out, right? Okay, just making sure if you're like, no, I haven't like, that's cool.

[00:13:23]
It's not actually important for this at all. And I forget what the other, was sad one, we'll have that be blue. So ideally now based on the expression coming in, I should be able to change the color of the RGB LED to my mood, right? Now how do I wire this up to a zoom meeting is the big question but, Just turned it off so far.

[00:14:06]
Some of these, somebody's work, so I got we can see go blue I wonder if not all the colors are represented in here or not all the above we got the faces right but,
>> You need a base case or like a default.
>> Neutral, you got neutral in there somewhere.

[00:14:22]
>> Neutral, but like that should just not trigger any my coach just leave the previous one, right? I mean, we've got the major point of this, right? [LAUGH] We can go, well, we'll see how that works. But, arguably, we're in the part of, Also wonder if I got those pins right but like we'll see in a second.

[00:14:56]
It starts out red. Angry. Happy seems to be problematic. It was a sad. Sad works, it's really just happy that seems to be the the issue right now and as I was playing around with I wonder if I've got the pins like totally correct, right? Because green would be if i have this thing flipped the wrong way, green will be the problematic one and because we're going back and forth.

[00:15:20]
I wonder if part of this is, I just got to flip it.