Hi. In this video, we're going to introduce the concept of variables. So far, we have drawn our shapes using absolute values. These are fixed numbers that don't change. Now, this has been fine to do our simple drawing, but now we want to start adding animations and interactions to our program. We don't necessarily know what these values will be before we execute our program. For example, the mouse's cursor, its position on the screen. P5.js provides us with useful place holders that we can use in our code, that will be substituted for the actual values when it's run. For the cursor, there's mouseX that provides the mouse's x-coordinate, so across the canvas. The mouseY, the y-coordinate, how far down is the canvas. Now, I'm going to show you an example of mouseX and mouseY working our encode. So, if you download the sketch that is just beneath this video and run it, you will see, hopefully, a black background with a white ellipse in the center. What we want to do is change this, so the circle is going to follow our mouse around the screen. So, if I change the x-coordinate to the mouseX, and it's written like this, with a mouse with a small m and a big X, and the y-coordinate with mouseY. Save that and go back to the live preview window. Hopefully now, yeah, the little white spot is following mouse's cursor. One thing you'll notice in the sketch is that every frame, I am redrawing the background and setting it to 000 or black. If this line wasn't here or if it was in the setup of the sketch, so if I cut it from there and put it in here. So, you think that should be fine because I'm setting the background initially and I don't want that background to change. But if I save and run this, you'll see that we actually get some slightly different behavior and not what we wanted. That's because we're using that background as to in effect clear the screen between each new iteration of draw. These place holders are called variables, and you can think of these as areas in the computer's memory that is saving and storing little pieces of information. Whenever we want to use the mouseX coordinate, if we call that, P5 will know to replace it with the actual value that's at that moment. We're going to go back to our original template and do something different with it and look at another pair of our variables that P5 provides us with, width and height. Sometimes, it might be useful for us to know exactly what the width and the height of the canvas is. So, here, if I wanted to make this spot rather than being just 100 pixels by 100 pixels, I want it to take up the whole canvas, so be across the whole width and the whole height. If I change that 100 to width and the second one to height, then P5 will know to replace those values with 600 and 600. So, if I click Save there, there we go. We now have a circle that's taking up the whole of the canvas area. If I change the size of the canvas to 800 by 800, and we change this middle point to 400 by 400, then, yeah, we can see again that it's taking up the whole of that canvas area, without changing the width and the height values. We can make this a little bit better, and while you haven't seen arithmetic yet properly. If I change this to width divided by 2 and height divided by 2, so the forward slash command in your programs means to divide. So, if we take the width and we divide it by 2, and the height and divide that by 2, then hopefully, this will be in the same place when we rerun the sketch. There we go. Then, if I change the canvas size back to 600. Save it. Then, that circle is still in the same place and filling the whole screen. So, we've seen using the mouseX and the mouseY as a placeholder for the cursor. We've seen the canvas width and height, but the real power of variables comes in when we can make our own
