 Okay, once again, as always, this is part of a series. There should be an annotation on the screen to the full playlist. If you get to a video on the playlist that is marked private, it's because it hasn't been published yet. Wait till next week a new video will be published. It should be a new one every Friday. So, we've been working with, and I do recommend watching the previous videos because you may have missed something. We're starting with scripts that we've already created. So, let's bring up the web browser. Last week we worked on using some math to rotate a cube and the camera to certain degrees. But that's on page load. Today we're going to get into some basic animations. So, we're going to create some variables with different numbers and then create a function that calls itself and basically continues to rotate. So, I took our last week's project and I moved it into a new script, a new file, although it's the same exact script called cubeRotate.html. So, that's once again this right here. So, let's go in and start creating some variables here. So, we're going to create a variable called angular speed and we're going to set that to 0.2. This number is going to be the rotations per second. So, if it does 0.2 rotations per second, it's going to take five seconds for the cube to spin completely around. Now, we're also going to create a variable called last time and set equal to 0. And do remember that since we are creating these, we can call these whatever we'd like. But these are case sensitive once you create them. So, since I created this with a capital S and this with a capital T, when we call them later on, we have to call them that way as well. So, now let's create our function. So, function and we'll call it function animate and we will open and close its curly brackets, curly braces, whatever you want to call them. And now we're going to create a time. So, every time this function is called, it's going to replace this variable for itself called time. And the time will be a new date function. So, basically it's getting the date function. And from the date function, which is built into JavaScript, we're going to get the time. So, we don't want the whole date, we just want the time. And then, we're going to create another variable and we're going to call it time diff. So, basically it's going to look at what time it is now. That's what we grabbed here. And we're going to subtract what the last time was. So, now the first time this runs, the last time is going to be zero. But that's going to change here in a moment. So, we're going to say time diff and there should not be a space there. Time diff, again, time diff is what we're calling it. You can call it something else if you'd like. And we'll say time minus last time. And remember, capital T because we create with a capital T. So, it's getting the difference in time. Then we're going to say our variable. And before we create the angular speed, this time we're going to create the angular change. So, how much the angle is going to change. And that will be calculated by angular speed, which is 0.02, or one rotation every five seconds. And we're going to multiply that time to the time difference. We're going to multiply that by two. And times that by pi. So, math, pi, capital P, capital I. We're going to divide that by a thousand. Now, I'm going to try to explain some of this here in a moment. And some of it I think I'll explain well. In other parts, I may not. But plane dot, oh sorry, working with a cube here. Cube, sorry, cube object dot rotation. And we're going to rotate it on the z-axis just as we did before. That'll make it spin around in place. But you can rotate it on the x and y-axis as well. And we're going to take whatever it is already at. And we're going to add the angular change to it. So it's not setting a strict number. It's taking what it is and moving it a little bit more. And then we're going to take last time, which when we originally created is 0, but we want it to equal whatever time is now so that next time around it finds the difference in time from the last time. So now that we've done that, let's take from down here, so we don't need it in two places. We have our renderer render the scene in camera. Well, every time we change something, we're going to have to re-render the scene. So instead of doing it there, whoops, I'm just going to cut that and paste it right here in our function. So every time we move the cube, it is going to re-render the scene. And of course, we also need it to continue with the animation. So we want to request a new frame. So we're going to say a function. We're going to say request animation frame. And we're going to call function. And so when that runs, open and close those brackets. And then we're going to basically call the same function we're in. I'm going to explain all this again momentarily. But now it's important. This function is not going to run by itself. We need to tell it to run our animation function the first time. I'm sorry, and that shouldn't say animation. It should say animate. But down here, last thing we do after we create everything, we're going to say animate. So it calls that function. So what's going to happen when our script loads? Well, first off, let's make sure I typed everything right. We will save that, hit a five, and there's our cube rotating. So let's look at our script here. We've got variables we're creating, angular speed, which will be the rotations per second. So higher this number, the slower, right? So if it's 0.2, it means it rotates five times a second. I'm sorry, one time every five seconds. But that's the revolutions per second. So no, if I put it up to one, it should rotate once every second. We'll play with that in a moment. So we got our speed there. And time, we're just saying it to a default zero now. Once we run our animate function, it will be changed. So we have this here, but it's going to basically load this function in the memory, but it's not going to run it just yet. It's going to jump down here. It's going to create our renderer, set its size, add it to our web page, create a camera, set its positions, create our scene, create our cube, set a default rotation for the cube, which we don't even really need. It's going to start off at 0.5. But if we delete that, which I will, just to keep this code simple, it's going to be a default of zero, so it's going to be direct on. And we're going to add that cube to the scene. Once all that is done, we're going to call our animate function. So we come up here to animate, and it will start our animation function, which we'll do the animation as we saw, but it's going to create a new variable. See, we had to, we could create this in here, and it's reassigning it each time, and it's not changing. Last time, we needed to create it outside of the function because it is used before it's called in the function, but if we called it in the function beforehand, it would cause problems. If we didn't create it up here, we would get an error here because it doesn't exist. But if we create it up here, every time the function runs, it's going to set it back to that default value, which we don't want. It doesn't make sense if you've done any type of programming before. It should. The order of things makes a big difference sometimes. So we're going to create a time variable, which contains our current time. And the first time around, we're going to subtract last time from it, which is zero. So it's just going to be whatever the time is. But next time around, it's going to change because we reset last time here. Hope that all makes sense to you. So now that we have the difference in time between this time and last time, again, that allows us to be consistent with the rotation of the cube. If the computer runs slow, it's not going to cause the cube to rotate slower. It'll just cause it to jump to where it's supposed to be. Because if we didn't do this, the cube would basically on the slower machine rotate slow and as faster computers got faster, it would spin faster and faster depending on the speed of the machine. And we don't want the rotation to be based on the speed of the machine. We want the rotation to be based on how much time has elapsed. So that's what we have our current time and last time. So our angular change, which will be how much we add to our rotation down here, we are going to take our angular speed, which we created up here, which is 0.02, but you can always change if you want it to be faster or slower. We're going to multiply that by our difference in time and then multiply that by 2 and multiply that by pi and then divide it by 1000. Because we're going to get a big number here. Remember when we're working with the rotations here and we do our math down here that says, oh, I guess this doesn't have the math that we did last week. This is an older file. I have 0.7 here, which is approximately, 0.78 is approximately 45 degrees. So we don't want a big number. We want a fraction here. So that's why we're dividing it by 1000, basically just moving the decimal point over three spots, giving us a very small fraction. But depending on how much time has elapsed, if the computer ran slow, the time difference would be larger, allowing the cube to catch up. Hope that all makes sense. It's basic math, but you've got to wrap your head around it if you haven't been in school for a while. And again, we don't just want to set our rotation to that because it's going to be approximately the same number each time. Theoretically, we could skip all this and just put in a number but then again the speed of the computer would cause it to rotate at a different speed and we want a consistent speed. So instead of setting the value of z to it, we're taking the value of z and adding to it whatever the change is. At this point, we take our last time, set it to the new time so that next time around we get a difference here. If we didn't do that, the cube wouldn't rotate so that's very important to have. And then we're going to render our scene. Now that we've done that, we're going to do it all again. So that is it for this code. Again, let me save that. We didn't really change anything here other than setting it to start at zero. And of course if you want to rotate the other way, we could, lots of different ways you could do it playing with these numbers but the easiest way would be to change this from a plus to a minus. So each time we're taking the value of z and subtracting that number and that should allow us to rotate the other way around. And of course we're rotating on the z-axis which is the up and down which makes it rotate around like that. But we can also rotate it on the x-axis. Oops. So now it's rotating this way. And of course, we're working with three dimensions so we also have a y-axis and now we'll rotate this way. All depending on which way you want it to rotate. So that is it for this tutorial. Play with it. Here I'm going to post this code on my webpage. There should be a link in the description to all the codes we're working on here in this series. You should go look at it. Play with the numbers. Download the code. Play with the code. Just change the numbers. See what happens if you change this point to two. See what happens if you change this 1,000 to 10,000. I'll tell you right now it's going to rotate slower. Make it 100, it's going to rotate faster. Make this number bigger. But they all change the speed in different ways. So have fun. Play with these numbers. And I hope that you have fun. And I hope that you have a great day. Oh, also before I finish I've got to say this every time. I think I said it at the beginning of the video because someone will send me a message asking me this. This is part of a series. There should be an annotation on the screen to the playlist. If you're watching the playlist and you get to a video that's Mark Private that's because that video hasn't been published publicly yet. It will be in a week because every Friday there will be a new video in this series for as long as I'm doing this series which will be for a couple of months. So don't ask me why videos are Mark Private. I thank you for watching and again I hope you visit my site filmsbychrist.com Check out the description of this video for a link to my website and a link to all these scripts. And I hope that you have a great day.