Object Oriented Scripting | SnapChat | Jake Anstey | Skillshare

Object Oriented Scripting | SnapChat

Jake Anstey, Software Engineer

Object Oriented Scripting | SnapChat

Jake Anstey, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (39m)
    • 1. Introduction

    • 2. Project Setup

    • 3. Setting Features with a Script

    • 4. Creating our Object

    • 5. Updating the Face Features

    • 6. Tying it all Together

  • --
  • 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

Scripting can range in difficulty from very easy, to extremely complex depending on the project.

It may not seem like your project needs an object oriented script, but you'd be surprised at how it will benefit you.

Object oriented programming is not native to SnapChat or Lens Studio, it is a common coding practice shared among almost every major programming language. If you have little or no experience with it, this class will guide you through creating an object and manipulating its properties and calling its methods.

This class will start and end with the same project, and each step explained in detail about why it was done.

Meet Your Teacher

Teacher Profile Image

Jake Anstey

Software Engineer


Computer programmer, augmented reality developer and enthusiast and community contributor.

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. Introduction: Hello, everyone. Welcome to my class on object oriented scripting Inland studio. This class is going to be a bit different than my other ones because I will start a project from start to finish and guide you through the steps along the way. Now, if you're not familiar with object oriented programming or scripting, then this is the perfect class for you because I will talk through everything that I'm doing and introduce you to it. Now. Object oriented isn't just for Snapchats Land Studio. It's just a nice idea in almost every programming language out there, all the newer ones, anyway. And it will help you with all other programming languages. Object oriented scripting is very underrated, in my opinion, because there's so much potential with it. It creates cleaner code. It allows for better speed and performance of your lenses. One doing lots of scripting and ultimately lends Studio puts a lot of object oriented scripting in their samples. That kind of gets overlooked. Now. What you see on my screen is an example of object oriented programming with the face. This is the project we're going to make in this class, and it might not look like it, but this lens is strictly object oriented. And, uh, it's probably a very beginner example, one of the best ones I could think of to make, because it's quite simple. All it is is changing. Face stretch from random numbers and a bunch of different features of the face were basically changing them in a random order, making the face randomly squished or expanded. So with that, let's begin. 2. Project Setup: this first lesson will just be about setting up the project for the object oriented programming. All it is is a blink project with some face stretch features. Let's get started, open up the lines studio and create a new project, and at this point you might as well hit, save and save it as a new project somewhere perfect. So we can go to add new and let's add some face stretch and on the right we can actually add new features. So what that means is feature zero weaken stretch any direction we want and then adding a new feature will just be a completely new stretch. So on the screen you can see it's reset itself, but on the right, you can see that this stretch from the first feature is already stretched. So if we take feature to when we do it stretched down here and then we can add another feature and then do a completely different stretch and so on. So in this example, let's add eight. Just keep clicking, plus to get some features up to feature seven, because it includes zero. So this will give you eight features. Now go ahead and randomly stretch these. It doesn't matter at the moment because we will be setting them down to zero great another . You have eight features set with different stretches along the face. We can go ahead and just add a new script and let's rename it to face controller. Now, in this lens, we actually don't need lighting, so you can go ahead and delete that. And we do not need these Echo Park def and spec perfect, so you can go ahead and double click your script, and we will continue this in the next lesson. 3. Setting Features with a Script: All right, so we're back in the script editor, And if you've seen my other class on introduce scripting, you'll know that there are a bunch of ways from the script to interact with our seeing objects on the left. Now in this project were actually going to be putting the script on the face stretch. That way we can get this object through the child function. There are other ways we can actually type in slash, slash input and then take a face stretch as an input. But to make it clean, we can just drop our script onto the face controller itself. Perfect. So now, to add a bit of functionality, since this lens will be about adjusting the stretch of the face, we can give the user a bit of control and adjust the speed of how fast the stretches occur . So let's go ahead and add a new input, and it will be a float. Sorry and end. And then we will add a widget for it. And again, I covered widgets briefly in one of my other scripting classes. We're gonna add a slider widget. We're going to say men is one, and then our Max is going to be 10. We can hit, save, click away, Click back And we I did not name it My bad. We're going to say, um, stretch, speed click back. And now we have a slider from 1 to 10 called stretch speed. And this will give the user not the Snapchat user but the developer using this script, it will give them access to a bit of customization. Then you can add as many of these as you want to customize your, uh, script. But for now, let's just add the stretch beat so we can go ahead and create the turn on event method will create the function for it, and then we will bind it. Perfect. Now we'll set a global variable in our script and call it. We'll set it to get the actual face stretch So we'll say var face stretch. And then in our turn on weaken say Okay, let's set the face. Stretch is equal to script dot Get seen object. Don't get child. Actually, not even. Yeah, get child at zero. We're getting the first child. Sorry. That's wrong. Um, get seen object. We're getting this scene object here and then we can get the component, and the component we're looking for is face, stretch, face, stretch visual perfect that gives us access when the lens turns on. We're getting this seat seen object in our script and will need to access this object a lot . So with that being said, let's take a quick look at the A P I to see what the face stretch gives us. So the face stretch gives us two methods it gives us get feature weight and set feature. Wait. They both take a string, which is the feature, and the set gives you an intensity. So when you get feature weighted returns the intensity and then when you set future weight , you can set the intensity and then the fates index, which isn't very important to us with this lesson. So with that being said, this features strength is actually correlated to these feature names here. Now, as far as I know, you can't rename them, but they are feature and then the number of the index of the future. So zero through seven in our case, and there's eight of them. So with that being said, we can go ahead and in our in it, we will set them all to zero. So we will take a four loop and then in each one of them, Well, say, uh, far feature is equal to sure. Plus, I got to string, and then that will give us the actual feature plus the index number, because we're starting at zero, and then we're gonna be at seven. So then we can just say feature. Sorry, my bed, um, face stretch dot set feature. Wait. And then we're gonna pass and feature as the string name of it, and then we'll pass. So when we had saved were actually resetting. So when the lens turns on, we're resetting the face stretch to zero, every single one of these They were set to one in the beginning because that's the way it's set when you actually added. But in our script, we're just setting them all to zero to make your face normal in the beginning. And we can also do this when the face gets lost. So with that, we will continue this in the next lesson. 4. Creating our Object: All right. So let's create our very first object. And creating this object will actually give us the option to make this code more clean and organized and also reusable. So instead of copying this, if we want to reset it at some point, we can actually call a method in our object to call this function. And sorry, this might sound confusing to some people, but hopefully you'll understand in just a moment. So let's actually create our object. Creating objects in javascript itself because of this programming language is JavaScript. There are a bunch of different ways to do it, and I won't go into detail on those. But the easiest way is to actually just save our and then your class name. So the object name. I'm gonna call it feature because this object is going to represent one of these values. So I'm gonna call future, they're going to say is equal to function, and then in here in the function parameters you can actually create, um, anything you want, you can take anything you want. So when you create a new one, you pass a different value to it. So actually, the best thing to pass would be the future name. So let's say name. So here's our object. It's very simple when we passed the name in the class of JavaScript. How you set variables to the class is with the this parameter so we can go ahead and say this dot name and it can be upper case, lower case. I personally like uppercase in classes when I'm putting variables in a class I like to have , um uppercase because that keeps me, um it reminds me that there public and anyone can access them if they have access to this object. So we can say this dot name is equal to make. And what that does is if you type this dot anything, it creates a new variable in the class. So we will get into this like a very slow way. But hopefully it starts to make sense to you. So now, within this function, this ignore the function and think of a class right now. So in this class, we can also create a function within this class. So let's create when that's called reset. So we can say, um, far reset is equal to function. I believe sometimes I get confused. Try this out. Sorry, it's this dot Reset. I believe this dot So we're gonna create a new function The story said is equal to function . And within this, we can actually say, um, face stretch dot set feature weight. And now we don't have access to this future cause it's over here. But we do have access to this dot name, so let's see what we can do with this. Now, we have one definition of the class. We can actually store them somewhere, so we'll store them in an array off features. So we'll say Lara features. And you can name this whatever you want, because just gonna be equal to an empty array. So when the turn on, we will now delete this code because now, actually, keep the feature name will need that. But here we can actually call features dot Push. Okay, we're pushing to the array. We're adding a new element to our array and we will say new feature. This is our class that we just define and then it brackets and that it wants name. So let's give it the future. So I believe now we should be able to call features at I. So now we're in the array features that I dot reset and voila! We just moved our reset code to the actual class. So if you don't understand, we are first getting the name based on the, uh, index of our for them. Then we are adding a new feature, which is our own class. We're passing the name because that's what's uniquely identifying it, and now it's in our array. So then now, in over rate at any index, we can call Reset. And it calls this method which sets the feature Wait 20 We're resetting. And like I said, you might want to do this when they look away. So if we do create a new event for face lost, then we can actually reset every single one of them. We just do another four loop and then features we just call features that I don't reset and we might do this and near the end. But for now that concludes this lesson 5. Updating the Face Features: hello again. Hopefully I haven't lost you. And hopefully some of you guys are catching a bit of grasp on what's going on here. Um, and some of you may already know what object oriented is and just want to know how to implement it into a lens. But, um, yeah, I'm going to keep going. And so in this class, we're just going to continue with our class and add some new variables to it and a new function. So if we first look at the A P I for set feature wait, we can see immediately that the intensity must be greater than negative 0.5 and less than two. So this gives us our boundaries to what we can actually do. Um, obviously, we can't stretch it to, like, five times the limit, so we need to code that into our class somehow. So when we do end up doing the pulsing the up and down the stretching and shrinking of the face, we need to make sure that it's greater than negative 0.5 in less than two. So let's create a new variable, and it's going to be a Boolean, and it's going to tell us if this particular feature is increasing or decreasing. So we will just say this dot Increasing is equal to true because in the beginning, when we reset to zero, let's start increasing instead of decreasing it. So with that, let's create a new function as well. And this function is going to be called update. And this will be called every time the lens updates, which we can now add as a event. And then down here, let's just put our update is equal to function. And I realized that I have upper Camel case and then Camel case down here. Uh, I'll just change this to keep with the flow. Rename it down here and then down here, we'll just find our update event to update method. And then down here, this is this is the easy part. We just raid on a four loop. We can actually copy it. We're going eight times because we know and if you have more or less features and you can add them, you will have to adjust this hard coded eight here undoing eight. Because I know I have eight features and at the time there is no way to check how many features are in the actual face. Stretch visual. So you have to kind of hard coded for now. There are ways to figure it out by doing a try catch and figuring out what the upper limit is. But this is the easiest way to go about doing it now. So we looked through in the update, and then we can actually just say features at I dot update. So now all of the features in this array, which our feature we just call dot update, which calls this function for every single feature class. So this is where we can actually put the bulk of the logic for each one of thes features we can say, OK, if we're increasing, then let's see. Did you hit the max of two? Did you hit the men of negative 0.5? And since it's going to be random than we also need to set some random numbers to see, um, you know how big it's gonna be or how small it's gonna be Hand Ultimately, random ization is key here, so we can say this dot next about you is equal to 1.0 for now. So in the update event, we can just do a little check if this start increasing. So for going up, then do something here and then else were obviously subtracting. So if we're increasing, this is where we can take our stretch speed so we can do something like, um, let's get the reek of our great is equal to, um, let's say, script dot stretch speed multiplied by 100. I don't know. I I'm just testing this out. And then we'll times that by get Delta time, which is the time it took for the last frame to update. So this rate we can now apply, Um, if we're increasing that, it's a positive rate, and if it's decreasing, we can actually just copy this. Um, we'll put it out here outside of the if statement. That way we can reference it by both of these if and else. And so if it's else were actually going negative, so we can just say great times equal times equals will multiply and set the variable to negative 1.0 just to make sure that we keep those decimals. And so now the rate will be negative and we're going down. So with that said, we can now say, um, not script we just have faced stretch dot sent feature. Wait, we'll just copy this and then, um let's see. What? What can we do? We do, um, face stretched, get feature way, and then we'll pass this stunning and then plus rate. Yeah, so we've already got an error here. Let's see, um, our rate, it's 78. So we actually might want to defy perfect. So you can see on the right. It's actually expanding, and it will keep expanding because we don't have a upper limits set right now, But that might not be fast enough for us, So let's divide by 50. Could save it. Where, he said, may not be fast enough. Do we need to divide it all? Let's see No too fast. So you just divide by 10 and then we can also just control it with this slider here. So if it's 10 then yeah, that's that's quite fast. And if you notice if we let it go, it will give us an error that our upper limit has being passed, so intensity should be in negative 0.5 and 2.0. So this just shows that we can set the, uh, we can call the update on each class, and each class will contain. It's own, um, next value. So these will all be random. There will be eight different random value set contained in this class. And we can check which one they which like, what's the next value, then set the next value All in this contain code. And I just realized being clean code, we can actually just say we'll take this out of here and then we'll say, if not increasing great times equals negative, negative one. So if it's not increasing, we're just gonna multiply it by negative 1.2 and then we can actually just paste our set future weight code outside of that, if statement so that were only calling it once. And we can contain just the one line of code. So when we decrease, it will just multiply the rate by negative one points here, and we will continue this in the next class 6. Tying it all Together: Welcome back to this class. And this lesson we're just going to, uh, tidy up our update method. So I tried to make this code clean, and it does look clean, and it works very well for if you're just increasing, but we are going to be going both directions and we don't know which way we're going, and we don't want to hit the upper limit. We don't want to hit the lower limit. Negative 0.5 and two. So we should add some checks before we do anything we can just we'll get rid of print because it does Spam, your consul and it kind of messes things up sometimes. But, you know, you can see her right now, like what it's going to be. So we get rid of the print statement and we now have our rate. So we can just say if we're increasing men else. So for increasing, we want to see um, Well, actually, take this get feature weight will extract this control X to cut its a great keyboard shortcut. We'll just see far. Um, current, uh, wait is equal to, so we'll just get it in the top of the method. And this will just allow us to reference this without calling get future weight over and over again because that could be resource intensive. I'm not sure if it is or not, but it could be, um So, yeah, Now we have this in a variable our current weight so we can do a check here in the increasing. Um, if our current rate current weight plus our rate is greater than or equal to 2.0, then we just want to go ahead and say this Stott increasing is equal to false. So now we're just saying, OK, go backwards now and we can actually just hit return and let it do its thing in the next update. So this will be called in like, a millisecond later, and then we'll end up in this methods. So with that, we actually want to set the next value again so we can go ahead and say, What's let's great another function. But this one we won't do this dot will just say function next value, that sick get next and this function I just wanted to return the next value, so we'll put our random logic in here that will get us the next value. Um, so this this method should return two different sets of numbers, one of your increasing and one of your decreasing. So if we're increasing, we want the next to random value to be greater than our current, but less than the two point. Oh, and if we're decreasing, we want it to be greater than negative 0.5 and greater than that. Sorry. Less than greater than negative 0.5 and less than our current. So this should return two different sets of numbers depending on the this start increasing . So this might get a bit tricky for some, but we can start doing this logic so we know that if we're increasing, it should be easy. We can just call math dot random multiplied by 200. So instead of two point over, I'm going to shift these to the right time, shifting the decimal place to the right just so that it makes our math statement easier. So now we have our 0 to 200 value, and then I want to offset that by our current. So we'll just put the if this stuff actually, we can pass the increasing in the method. Why not? It doesn't matter which way you do it, but to me it's probably easy is to pass it in here. So we'll just say if increasing and get the lower case one, because that's when we pass in. If you call this without this dot then, uh, it will reference this and it will break because you're not calling this dot And like I said, either one will work at this point. Um, so if increasing and then we'll just say so if we're decreasing on, we'll put this in the increasing part. So now we have our random number between zero and 200. And like I said, we need to, um, add our current. So we need this get feature. Wait, let's actually pass that as well. We'll just say current, please. That's a good fit. So we'll, uh, at our current weight to offset it Perfect. And then we'll actually go math Darkman. So I want the minimum value of because this can now overflow over 200 which will eventually be two point deal. We want to clamp that. So if it's over 200 what's put another value in our math, Ottman and math. Altman is actually it will take the minimum of the two. So this is our 1st 1 the math, the 200 plus our current weight and then, let's say, 200 0.0. But I don't think that that's a good idea. That's actually not a bad idea. So let's Yeah, we'll do that. 200.0. And why I think it might not be a good idea is because if we send it to 200 then once it hits 200 we don't want it to overflow again by hitting the rate. But we do have our check here. So if the current rate current weight plus rate is greater than 2.0, um, anyway, this will clamp it to 200 so you can not go over 200 then we will have two divided by 100.0 . So that's our next value. We can return this perfect, so that will hopefully give us a value between, um, our current and 200 we contest this by calling get next to value. Somehow. Let me just see what we can do. Weaken. We'll test that in a bit, but let's move on to our decreasing. So decreasing is a bit easier. It's, um we're just getting from negative 0.5 to, uh, our current value. So we wanted to be less than our current. So between negative 0.5 current. Yes, um, will create the math statement. So we'll need to offset this by 0.5. And we can do that by Let's see. We'll take the math thought random because we need that multiplied by our current weight. It was. So now we can call this function right here so we could save our next, Actually, this dot next value is equal to get next value. So since we're not increasing anymore, it should give us a lower value. Perfect. And yeah, and then we can put in else here because if we're, um increasing. And it's not that we can just say this dot set feature week, actually. Sorry, it's down here. I didn't delete it, so you could just copy this that control X and, uh, yeah, we can set the future wait to our current. I believe that's a current weight plus rate and then down here for decreasing. Let's see if we're decreasing, we're going to check if it's less than is your 0.5. So we'll say if the current weight is less than or equal to negative 0.5. Then we want to just set increasing to true. And we'll say this stuff next now used to get next value. And while I totally forgot passing this stuff increasing and then current weight and then this stuff increasing and then wait and then else we can just say face Stretch. Uh, sorry. We'll just copy this and will say We'll just put this in brackets to be safe and then multiply that by negative 1.0. I would get rid of this. Let's see what happens. So we blow up all the way and something is happening. Oh, that's right. So in our else, we're going to want actually check if we hit our next value or not, Right? So we'll just say if current wait, actually, since we already caught the plus rate, since we already checked our upper limit, we can just sit well, do the face stretch, and then we will just call this method again to be safe will set the current weight to the get feature. Wait once more down here and then we can use it again and say if the current weight is greater than or equal to this stop next value perfect. We can say this Start increasing. It's good to false that we're gonna want a decrease. And this dot next value is equal to get next value this increasing so we can also pass falls and current weight, and we can do the same check down here. We've done it. So we can now say current weight is equal to after the face stretch happened. Current weight is equal to the new weight. And we can now say if our current weight is less than or equal to this stock next value, so difficult under or did we equal are an extra value. Then we're going to say this not increasing is equal to true. And this dot next value is equal to set, start, get next to value this doctor increasing and wait. So I'm not sure what this could happen. So we did get an error. We're getting an intensity error. Okay, so I figured it out and, um I did some bad math, which is not surprising, but in the decreasing, Uh, this looks to be incorrect. So we actually, um, times the entire thing by negative 1.0, and I don't think I should have. I think that I need to subtract the rate. That's all I needed to do. I don't know why I multiplied it by negative 1.0, but let's try this. That's it. That was it. There we go. OK, so now we have random face mushing, and I'm sorry that took so long. That was probably the biggest part of the code by now. Hopefully you have some sort of idea of object oriented, and I know this very basic and buy basic. I mean, we have one class with three variables, three methods. And, um, it just makes our code cleaner because if you were to make this without object oriented, you would have a lot of if statements you would have a lot of code that could have being reused but was not reused. And ultimately, object oriented is a good way to go. When creating lenses like this with random numbers, you have seven different things need to interact with differently, like each one of them has their own values, whether it's decreasing or increasing. And, uh, yeah, so hopefully you enjoyed it. This class and I will create more like it soon. And, um yeah, please follow me. Review this class if you liked it, and I will post more classes. And if you haven't checked out my other classes yet, be camera tricks. And I believe I have to scripting, um, classes, please check them out and get familiar with Lens studio because it is such a powerful program and very underrated, if you ask me, with all these features included. So with that, take care and enjoy.