Math.sin - Adobe After Effects Expression

in this After Effects tutorial we're going to examine the math dot sign expression this is a little bit of JavaScript that allows you to have properties oscillate in a regular sine wave we're going to explore what it means what it does how to control it ideally by the end of this you'll learn about math expressions after-effects and each other I'm Evan Abrams and this is math dot sign and after-effects so before we open After Effects let's get into just what math dot sign is now certainly it's an expression we'll just type capital m and then a th dot si N and then some parentheses here parentheses into an expression window what does that mean if we hope to make use of a thing we first need to understand the thing or just copy and paste and really hope that we work so so math dot sine is the trigonometry to calculate an angle of the thing or maybe from science where it's used to model waves for light and sound and for us it's that same function it's that same sine wave function so looking at this thing as an expression we need to understand the kind of input it's gonna take and to expect the kind of output it's going to give us inputs go here in the argument zone between those parentheses and really we just put in a number and the output we get will be the sine of that number so if we put in 0 or 1 or 2 or 11 then we get the sine of that number that we put in the number that we're putting in is treated as a Radian now a Radian is a another measure of angle so similar to degrees so you could have you know this 90-degree angle or this however many Radian angle that is and in fact 180 degrees is equal to PI radians or 3.14159 and so on radiant but more on that later that'll be important to know later the number that it spits out the output though we're gonna guess after putting in the radians it's going to be a regular wave oscillating between -1 and 1 or negative 1 and 1 if we want this change if we want to use this as an expression to generate some movement we're gonna have to use a value in that argument that changes over time and I would recommend using the word time we've covered the time property on other tutorials so if you want to read about that but the big thing about to know is that this word will now become whatever the time is in seconds on whatever frame we're looking at but taking the sign of the time alone is not super useful we need more than just oscillating between minus 1 and 1 we should amplify that so if we modify this by another number we multiply this whole thing then we're getting something that we can probably use and this multiplication that we're doing to it this increasing the distance away from zero is what we call the amplitude but I think we need more control than that it's not enough to say how much it oscillates how tall this wave gets I want to be able to say when is it oscillating how often you know what is the frequency of oscillations that are gonna happen how many times per second does this wave repeat now I could make it repeat once per second exactly by multiplying the time here by 2 times pi if we want this wave to repeat twice every second then we would just multiply this result here by 2 so we just slip a little 2 in there and then it's working out alternatively we could describe the way this wave is repeating as having a period a set distance between the zero and the zero when it repeats the wave what is that distance in time we would call that the period so in this case we're looking at a one-second period and if we want to control the wave using that we would just multiply here in inside the brackets by 1 over whatever we want the period to be so if we want the period to be 3 seconds with multiply it by 1 over 3 and thanks to how math works that's what we end up with but I think it's time to open up after-effects and actually use this to make something alright as promised after-effects is open let's get into some examples the first thing I want to show you is making something's position change in that lovely sine wave this is where the rubber really meets the road and we have to actually type things into an expression window so I've got a composition open I've got a shape layer and I've got a null object I have parented my shape layer to the null object so that the position is zero zero when it's right here this will make the numbers a little bit easier for us to understand so I'm gonna hold down alt click on position and it's time to start typing we know because this is position the end of the expression needs to be X comma Y that's the end goal we want to fill something in for the first part of this property and fill something in for the second part and I think we want this to just go up and down just oscillate up and down so the X can be equal to whatever the value is here so in square brackets put a 0 meaning it'll always reference the first part here for X there are some other variables I'd like to put in such as a for amplitude that we talked about so let's make the amplitude 240 let's make the frequency let's say F equals 0.5 0.5 times a second so close that out so we're amplitude frequency now I think we need to write the real thing so we're gonna say y equals math dot sign and our little argument zone parenthesis we're gonna multiply all of this by the amplitude close that out and inside the brackets like we've done we are going to type time times 2 times or multiply or you say that math dot PI that's how we get the PI in here any time we want it and then times F for the frequency and cross your fingers we've done it all right well it didn't make a noise so we hit play and we can see it's oscillating look at it go which is not super exciting if we look at who click this button here we can go to the graph editor and we can enjoy looking at the value graph and we can see these oscillations happening right here in the graph editor if you look at a speed graph it looks like this just a bunch of bumps but they're all perfect and regular bump now you're probably saying well Evan I could do this with a loop and maybe some keyframes well that's true but the purpose here is you can use this build and hopefully do more interesting things with your own creative mind something I will say that this does a lot better than keyframes are things like decay so we could have this decay or increase by say multiplying this by time again inside the brackets and now what's gonna happen is it's gonna go slow fast fast fast forever / / / / / which is something that is a little bit difficult to do with keyframes we're able to do this using the power of expression if you want to go more in depth I would recommend you read all the articles by Danny Bert's head on over to his website links to that in the description the man is a genius and very generous with his knowledge and his site continues to be invaluable so we've got this thing oscillating a problem you might run into is if you start moving this layer forward or backward in time you'll notice that it doesn't move its position you know it's not relative to the start of the layer so if you want to make that happen you can hit T and type in a new variable time - in point and close that out and then just change the time in here to be that T meaning we're taking the time we're at say 6 seconds and subtracting the current time of the endpoint which is around to here 6 minus 2 is 4 so we get the value that would have happened at 4 meaning we can move this forward and backward and we kind of have our oscillations baked into the layer rather than being relative to the composition time that's how we would apply this to position what if we wanted to apply this - I don't know scale so go over to the scale here here's an example with scale I'm just copying and I am pasting because I am lazy we don't need to type it out again and we paste it here on the scale what's going on well it's doing pretty much the same thing because if we want say the percentage to change the same we would need to have the same variable here and the outputs of Y comma Y so we can probably get rid of the X part we don't need that make that go away so now it's getting larger and smaller you know if we look at its graph we have a look at the graph going on here you can see that it's going up and down and so dipping here into the negatives and that is because we oscillate between positive and negative of the amplitude it's not going down to a hundred and backup it's actually going into the negative so if we had something on here it would be flipping so that's something to be aware of when you use this on scale so now let's apply this to the opacity so we go in here we could talk to the opacity stick it on there paste and just like we had to modify the output the output really only needs to be the single variable the y equals math that sine etc so now have this interesting kind of stoplight blinking which is great or it likes a blinking light but if we go into the graph this graph looks different this looks like a square graph now that's happening because we're pushing the values above and below where we want to be so I would adjust my amplitude down maybe we adjust it down to a hundred so we're going from a hundred to negative that means that we're getting half the wave because the rest of it goes below zero and opacity cannot hold values below zero so maybe we set this to fifty and then we go Y plus 50 so then we end up with it oscillating from 100% to zero on and off like so so sometimes you're gonna have to massage the outputs a little bit depending on the kind of property that you're putting it on our final example the last example let's do a little bit more with the position I'm gonna duplicate that so we have position + rotation now let's add some rotation to this you can't really tell if this is rotating so let's a poly star to that I'm gonna rotate it 90 degrees so it's pointing off to the side so what I would like it to do is to point up when it's going up and then point down as it's going down like the arrow is pointing the direction it's going to go so we go to the rotation and hold down alt we paste you know this is the same thing from from the opacity and the final thing is gonna be the Y right for the amplitude let's make it 45 it's gonna go 45 degrees one way 45 degrees the other and what does that do well this is not what I was hoping it is pointing up when it goes up but it's not exactly what I was hoping so here I'm gonna talk about signs twin brother cousin I don't know they're the same but a little bit different and really the difference is that sign begins its life at zero and then goes up and then down whereas cosign begins its life at 1 and dips down to minus 1 and then back up so if I type in math dot coasts here cos now we're off to something we dip we dip what I'll need to do here is to make sure that I can add my own value by adding the value there so now now it's pointing in the right direction to begin with so there we go now it's pointing down pointing up pointing down pointing up so if we have a look at the graphs making sure this little button here is on let me get the position make sure it's a little button is on we have have a look at those in the graph editor you can see that the waves are offset from each other so the peak of this one is that the middle point of this one so that's how cosine sine can interact with each other and even though I didn't mention it for the entire tutorial Coast works exactly the same as sine you know the only difference is that it's offset this has been Evan Abrams talking about math not sine in after-effects if you've enjoyed this tutorial please subscribe to this channel this is a great place to learn about After Effects motion design all that great stuff new tutorials go up pretty regularly around here so you should subscribe and turn on notifications so you know when that happens if you've had any trouble understanding this stuff please let me know in the comments ask questions and I'll try to answer them as best I can if you'd like to get your hands on the project files these examples that we worked on here head on over to Evan Abrams comm or check out the links in the cards in the description to pick those up if you're intimidated by expressions can be helpful II just dissect someone else's rather than starting fresh if you have a question about After Effects in general or motion design anything at all hit me up on Twitter at ICI Abrams give me a follow on there and we will hang out on the Internet thank you so much for watching and if you're subscribed I'll see you around the internet thanks again and have a nice day [Music]

Channel: ECAbrams

Views: 126,583

Keywords: adobe after effects, after effects, adobe, after, effects, fx, mograph, motion graphics, motion, graphics, vfx, visual effects, instruction, tutorial, tut, how to, how, to, help, tips, tricks, after effects tutorial, motion graphics tutorial, vfx tutorial, math.sin, expression, math, sine, cosine, wave, script, javescript, jave script

Id: Oiiq4wmbuPo

Length: 13min 28sec (808 seconds)

Published: Fri Jun 08 2018