Easing & Trigonometry

[00:00:00]
>> Mathew DesLauriers: Just one other quick thing I'll talk about. Cuz right now this is a pretty basic rotation. And maybe it would be kinda interesting to make it swing back and forth. Instead of just having it rotate in a constant way like that. And one thing you can do is use sine and cosine and some sort of trigonomic functions.

[00:00:21]
And so what we're gonna do is wrap this play head value with Math.sign. And I think I closed my canvas sketch so I need to just make sure that I'm running it, just make sure that it's running with the output attempt.
>> Mathew DesLauriers: And now what's happening in our scene is that we're wrapping the play head times pi and then wrapping the n sign.

[00:00:52]
You can play with these values a lot like sometimes just multiplying things by 2, multiplying things by 0.5. You start to get some interesting motion. Really this is where it starts to become like this cool iterative creative coding where you're just tweaking values and having fun. And if you use pi and you use pi times two, if you work with those numbers quite often then you can create seamless loops.

[00:01:14]
If I was to use pi or something multiply it by 1.7, there might be a spot where it jumps. And that's why pi times two is pretty useful for this kind of seamless loops, so. It's just sign keep in mind. One of those things that's really useful to know is around easy.

[00:01:37]
So right now, we have a bit of this like cool swinging motion and it's okay. But maybe what we'll do is, I'll just take this out times two and times two. And what we have here is sign of the play head times pi. And what I want to do is maybe make this maybe I'll do times pi times two just so it's like a nice.

[00:02:08]
Yeah, that's a bit better. And what I want to do because right now it's like rocking like a cradle but in Motion Graphics when you start to see Motion Graphics on the web quite often, they do really sharp and really quick and speedy animations. They'll use what's called easing so that it goes like really fast and then it slows down and vice versa.

[00:02:27]
It goes really slow and then it speeds up. And one way of achieving that is by installing this module called eases. And the first we've acquired, it's gonna give some error because we haven't installed it. So we'll just into our folder, [SOUND] NPM install eases.
>> Mathew DesLauriers: And,
>> Mathew DesLauriers: So once it's installed down here, we can save this value, let's say as t, let's just call it t for now.

[00:03:12]
>> Mathew DesLauriers: And let's try and wrap this t value with an ease. So if you look at eases, I'll just open this up real quick so you can see the module.
>> Mathew DesLauriers: You'll see it has a bunch of different functions. Like cubic-in-out, cubic-in, cubic-out. These are sort of referred to as Robert Penner's easing equations.

[00:03:40]
They look a bit, let's find a nice thing. There's one of these
>> Mathew DesLauriers: Here this is a good one. They look a bit like this. They're just basically a function that takes in a value and it changes the value as it goes over time. And then with these sort of functions you can produce different motion, different animation.

[00:04:04]
So easing in and out. So we're just gonna do eases.quadInOut. Let's try that. And now let's go back to our image. And you should see this kind of weirdness going on, and that's probably because this t value is sometimes -1, sometimes positive, maybe what I'll do is I'll do this.

[00:04:31]
I'll remove this times two, and I'll change instead of quad enum I'm gonna rename this to expo enum. Expo is short for exponential, and exponential is a really sharp ease and so now we have something that's a bit more interesting. It's not, a no longer just like a slow rotating motion, but it's actually like sometimes holding on a position, and then speeding to one rotation or another.

[00:05:01]
>> Mathew DesLauriers: And one last sort of tip in this sort of in this kind of idea of things. Is a tool called cubic bezier curves. And so if you go to cubic-bezier.com.
>> Mathew DesLauriers: Just type it in cubic-bezier.com. There's a pretty handy tool. There's a couple of these different tools on the web.

[00:05:27]
It's just the one I use quite often, and we can start to create our own easing functions. This is really useful when you have a project and you want the animations to be really original and really carefully crafted, carefully designed. This is where you might use a tool like this and you might tweak this graph.

[00:05:47]
And you can play with it, you can click this go button. And see this purple is gonna show us what the actual graph is producing in terms of animation. So maybe I have something like this and I preview it, and now the purple looks nice and smooth, so that's pretty cool.

[00:06:05]
And what we're going to do is we're going to use these values in our code just so that we have like full control over the way that the motion is happening. So I'm going to just hide that for a second. And I'm going to install one more module called bezier easing and it looks like this bezier-easy.

[00:06:29]
So we have to install it in NPM.
>> Mathew DesLauriers: And then you can use this method. So again, if you're ever lost in a module just hit NPM, and then type the name of the module. NPM BezierEasing, usually they have documentation. They show you how to use the module.

[00:06:58]
>> Mathew DesLauriers: And so what we're gonna do is we're going to, once we've acquired it. We can use this capitalization cuz it's actually like a class kind of thing.
>> Mathew DesLauriers: Once we've required it. Somewhere before we return our render, resize functions and stuff like that we're just gonna call this thing called ease fn and we're going create anew bezier-easing function.

[00:07:23]
So when you create, when you call this method bezier-easing with some values. It gives you back an ease function. And so we're gonna give these values that we have in our cubic-bezier tool, so the one I just minimized. So just find an ease that you like, copy these values from the URL, so after the pound sign, or after the hash sign.

[00:07:45]
Just all the rest of the numbers. Go back to our code, and just paste them in. To our constructor there.
>> Mathew DesLauriers: What you should now have is this function, ease function. And if we simply remove this eases.expoInOut, and we replace it with ease function. Now we've actually used our own man made or hand made curve that we sort of designed ourselves rather than using one of the built in curves.

[00:08:18]
And that's a really powerful thing for animation because generally I think when you start to do really complex motion graphics if you're using all the same built in curves. You can start to recognize them sometimes. But when you can actually tweak the curves yourselves, in a tool like cubic-bezier.com, and then maybe tweak it, copy, and paste, and do it again.

[00:08:40]
You can have a bit more flexibility.