Animations

[00:00] Right now we're calling the method render from the instance renderer only once and nothing really moves in our scene So in order to animate our cube We need something called a render loop Which is basically a function that runs on every frame to do that we're gonna create a function called tick and we are gonna pass recursively to the request animation frame and we're gonna pass the same method. So below that, we're gonna call that method and to see if it's working let's open the developer tools here and we're gonna use a console log or count maybe frame Now that the scene renders on every frame, we want to animate the cube in the scene. So we're gonna call the cube here on the thick method just before the render method of the scene. We're gonna call rotation and then we're gonna modify the y-axis to rotate it like it was a carousel. So to do that we need to do plus equal so we're gonna accumulate a value of 0.01.

[01:19] Why such a small value? Because if I put a bigger one you're gonna see that it's really fast because it's increasing the rotation in these big numbers every frame per second So you need to adapt it to a certain value to achieve the correct speed. But we have a problem with this. Is that, remember when I mentioned that some devices will run at 100 frames per second, while, for example, I don't know, the MacBook screen is gonna run at 60 frames per second. So if we keep a hard-coded value that is equal in both, it means that at 60 frames per second it's gonna have this value, but in 100 frames per second it's going to run twice as fast.

[02:07] So in order to maintain the same speed, no matter the device of the user, we're going to use an instance that comes built in, in 3DS, which is called the clock. To use the clock, we are gonna create a variable called clock and we're gonna set new clock and call the method. We need to import it from tree. We need to import it from Trigius and then inside of here we're gonna get a value that will tell us the time since the last frame. That value is called delta and we can get it from clock.getDelta.

[02:49] So this is the time since the last frame. If we console log it, we say delta Delta here and We open our developer tools. We're gonna see several barriers. So I'm going to pause one and this Is the time since the last frame you will notice that it's not necessarily the same every time because it's compensated by the refresh rate on on the on the browser or the device that you're using, but it's gonna give you a really really close number. We can use that number if you see it's pretty close to what we have here.

[03:33] So we're going to replace this with the delta. And then hit save. And refresh this. And now we can see that our cube is rotating at the same speed that before. We can modify the speed by just multiplying the delta by a value and achieve even like faster times or maybe slower times.

[03:57] There is another really useful variable that we can get from the clock is called elapsed and elapsed is really good for things that are driving by a continuous time value. What I mean by that? Let's create a variable called elapsed and we are gonna use clock get elapsed time. This is gonna give us the total time since we call it tick for the first time. Let's see what it shows in the console.

[04:31] So we're gonna do console log and then elapsed, then elapsed here. And we can see that the number accumulates and continue growing over time. So that's really useful for a lot of different approaches and animation but let's for now just animate the cube on maybe the zeta axis and we're gonna do rotation zeta and instead of using the plus equal we're just gonna do equal to elapsed time and now you can see that the cube is rotating in both the y and the zeta axis and we are using two different ways of accumulating with the Delta or using a Lapsed directly. A Lapsed is really easy to use whenever you want to change the position by using a sine wave. So we're gonna do position in the y-axis as well and we're gonna equal to math sine and then we're gonna pass the elapsed time here and see what happens.

[05:44] So now our cube is oscillating from plus one to minus one and we use elapsed to avoid having to accumulate the values here so this is perfect when we're dealing with time-based animations.