So far we've stored values and variables and objects. But the values in those variables have been static whilst the program is running. So if we want to change something, then we had to actually change the code. In this video, we'll look how to change variables values whilst the program is running, and how we can use this to animate things on our screens. You might have realized by now that amongst other things, JavaScript is a calculator. We can do any arithmetic that we want to. So, I'm going to show you this now. So, I'm using here the text command. If you haven't seen the text command before, the way it works is the first argument is what we want to print to the screen and we can see this here. And then we have a second and third argument for X and Y position. So let's replace this text with a sum. So, I'm going to put 2 + 2. Now it's not going to print 2 + 2 to the screen. It's actually going to print the output of 2 + 2, so the answer. And there we can see that one gets replaced with 4. Let's try another one there. We'll try, let's say 5- 2, and we get the answer 3. Let's try another one. We'll do a multiplication, so let's do 2 x 2 and we get 4. And let's try one more. And well, let's try something with some really big numbers. So I'm just going to type a random big number and divide it by another random big number. And now we can see we get a decimal output there. Okay, so we've been calling this arithmetic, but actually programmers call these symbols here that do the arithmetic operators. And in our previous sketches we actually combined operators and variables to do some drawing. So I've got an example here, we could have our variable yPos and we can use that to draw an ellipse, like so. And then what we did was some arithmetic to draw another ellipse relative to that first one. So just 20 pixels further down. And we can keep applying that process like so and get a column of ellipses. But there's an important thing here. The value of yPos hasn't actually changed. So if I now print, after running this code, print yPos to the screen, you can see that it starts at 120, and it ends at 120. So these sums that we're doing with these operators aren't actually changing the value. What we need to do to change the value is use what's called the assignment operator, which you might normally know as equals. So I'm going to change this now so that yPos actually changes. The way I'm going to do this is, instead of using all of these different commands, I'm going to just repeat this command four times. So currently that means we only see one ellipse. But now what I'm going to do is I'm going to say. Here that yPos now = 120 + 20. And we get one further down. And then I could say in between here yPos = 120+ 40 and we'll get another ellipse in our column. And I could go yPos = 120 + 60. And we'll get the fourth one in our column. Actually you can see here that the text that we're printing has now jumped further down. And that's because we've changed the value of yPos. You can see it's 180. So maybe we could just modify this code as well and just use the variable yPos. And then we'll need to change yPos again. So yPos = 120. I think I'm going to make it + 100, and there we go. So we can see that we've now managed to change the value of yPos. But the thing is that this isn't a really very useful way of manipulating a variable. We've actually ended up making a lot more code than we have before. But there is a much better way, and I'm going to show you this now. Okay, so we're going to use this formula. We're going to say yPos = yPos + 20. Now, that might seem a little bit strange to you when you first look at it. What we're really saying is make a new yPos and make that new yPos equal to the old yPos plus an extra 20. So if I put that into values, if yPos was 120, then we say the new yPos now has to equal 140. And then the next time we run this command if yPos was 140, well now it's got to equal 160 and we can repeat so on. Okay, so let's try this in our code. I'm going to replace this line, yPos = 120 + 20 with yPos = yPos + 20. So, so far, we can see everything is the same. And now what I could do is instead of putting these different lines here, I can just replace each one with this formula. And you can see, the ellipses are now still in a column. So this has worked really well. Now, this gets a little bit more exciting when we start to put things into the draw function, so I'm going to show you how that works now. I'm going to take just two of these lines and put them in the draw function. And I'm going to comment out all of this drawing code up here so that we've got a clear screen. Okay, can you predict what's going to happen when I do this? I just need to make sure that I've set yPos here. Okay, let's give it a go. So I end up with a whole line of ellipses, and that's because the draw function, if you remember, runs in a loop. It runs over and over and over again. And your program remembers the value of yPos. So each time the draw loop runs, it says, let's add 20 to the yPos. And you draw another ellipse, and so they go down the screen. Now, I'm going to get us to doing some animation. So what I'm going to do to do this is, first of all, change the amounts by what I'm adding to yPos. So I'm adding 20 each time. I think now I'm just going to add one each time and we'll notice the difference when I save this. So now we get this this very smooth line of ellipses. And that's because they're only moving by one pixel each time. So I'm going to do one more stage and this will start to become an animation. I'm going to use the background command to clear the background each time the draw loop runs. And now we can see an animated ball moving down the screen. Now I might want to extend this. I maybe want to also manipulate the X position of the ball in the same way. So I can declare another variable, var xPos, and I can initialize it here. And then I can use it In my code here. And finally, I take this little formula and I repeat it, and instead of using yPos, I use xPos. And can you predict what's going to happen at this point? Well the ball is going to move in a diagonal line, because now it's moving equals amount in the X direction and the Y direction each time. So now I can start experimenting with how this ball moves around the screen. For example, maybe I want it just to move faster. Well I can add larger amounts on each frame. And the ball will move faster. Or maybe I want to move it at a slightly different angle, so I could make it move more on one axis than the other axis, and I'll get a different angle. Or maybe I want it to move in the opposite direction. So, I could use negative values instead of positive values. At this point you might want to try manipulating other things yourself. So you could try making variables to change the size of the ball as it moves across the screen, or perhaps even experiment with changing the colors. Have a go yourself.
