 And everybody welcome to moving with the keyboard using processing JavaScript with me Tokyo ed tech So before we begin let me give a quick shout out to my members Thank you so much for supporting the channel directly. I really appreciate it today What we're looking at is we're be moving something on the screen using the keyboard And so we need to learn a little bit about the coordinate system, which is like x and y It's a little different probably to what you're used to we're learn a little bit about movement physics Like how things move and we're going to take a look of course at how do we read input from the keyboard move things left Move things right. What do we do when a key is pressed and also of course? This is going to require some use of conditionals, which are if statements, so let's go ahead and get started So there'll be a link down below, but basically I'm on this website called editor dot p5js.org and And This is the default code that comes up now You can go ahead and sign up and create a free account if you don't already have one But you can just play around with it not have to do that. So if I go ahead and hit the run icon here And you'll see how this is what we get so we've created a canvas. That's 400 by 400 now I don't really like that size. I want to change just the 300 and That's important if you don't do that the numbers are going to match up later Let's go ahead and run that again now We have like a little bit wider than it is taller and then this background changes the background color now This is this can be done in like RGB style. So let's say we wanted No red say a little bit of green and let's say a lot of blue So we got RGB and we run that I got this nice little background okay, so what I want to do is I want to put a circle in the middle of the screen and When I press the W button, it's gonna go up when I press the S button It's gonna go down when I press a it's gonna go left and when I press D It's going to go right. So that's our job today. So let's get started So the first thing we need to look at and this is you know, what I was talking about under coding concepts Is the coordinate system of this particular program? So if I go back to this screen up here, this is 0 0 and you see here We said this is 400 wide. So over here is 400 0 Now this is where it differs a little bit from what you're probably used to Typically when we go down in what's called a Cartesian plane y becomes a negative But for some reason this doesn't work that way Why actually becomes positive? So if I go down from here my x is still 0, but my y is now 300 now 300 comes from Here so 400 0 and then down here would be 400 x 300 y so keep that in mind when you're programming. We're trying to move things around X is positive to the right negative Like you if you move the left net x gets lower If you go up y gets lower if you move down y gets higher So what I'm gonna do is I'll be creating a ball and the ball is gonna have an x and we're gonna start it in the middle Of the screen. So the screen is 400 wide. So 0 400. So the middle of course is gonna be 200 And I'm gonna say ball y equals same thing 0 down here is 300. So the middle is 150 now at this point, I'm gonna go ahead and run it and see what happens and Basically, you see nothing happens. This is to be expected Just because we said there's an x and a y We're keeping track of doesn't mean we actually created any type of object like that. So what we have to do is Inside this function now don't type down here Okay, a lot of my students do this this function starts here and ends here So what I gotta do is add a few lines. Let's say draw the ball and to draw the ball I'm gonna use the circle command and I'm gonna draw it at ball x ball y And I'm gonna make the diameter 20 pixels So if I go ahead and run that Now I've got a ball and it's 20 pixels wide the center is at 200 and In X and 150 in Y Yes, so far so good now The next part is here in the coding concepts is movement physics DX and DY now DX stands for change in X DY stands for change in Y so Right now It's not moving. Okay. It's stationary. So what I need to do is I need to create some variables here So I'm gonna say ball DX equals 0 ball dy equals 0 Zero means no change. Okay, so Keep that in mind. Why should you tell me what let's go ahead and do it this way. Let's go ahead and do one DX enough I run this Nothing's happening. Okay. Again a lot of beginning programmers assume. Oh, well DX is one. Why isn't it moving? It's not automatic. You have to tell it what to do with that So down here. I'm gonna go ahead and add some more code to say move the ball So to do this, I'm gonna say ball X plus equals ball DX and Ball Y plus equals ball D Y And what this will do so in this particular case Ball X is 200 So this draw function is actually repeated constantly over and over and over and over again so Ball X is 200 We add D X to it, which is one so it becomes 201 Comes back around 202 203 204 205 206 207 etc etc So what'll happen is the ball should start moving to the right? Let's go ahead and run that Okay, you see it does move to the right and it moves right off the screen. Okay now if we go ahead and did dy equals 1 and reran it see now it's moving diagonally and down Okay, if we do negative one For DX it's gonna move to the left, but still down because dy is positive And if we want it to move up into the left Negative X negative Y and of course like I said it moves right off the screen so This is the kind of this is the basics of how things move At least in the real world to a certain extent of course Friction and gravity and things but we'll ignore that in this particular case So what we want to do next is The keyboard portion So if we go back we're looking at inputting keys So as I mentioned before it's gonna be w for up s for down a for left and D for right if we play games This is no surprise so As a programming approach What a lot of beginners do is they just copy all the code and then it doesn't work Okay, what you need to do is to do this step by step Okay, if you've gotten to this point and you've like say change DX you change dy And you run it and nothing happens. Don't keep going. It's not just gonna magically fix itself So that's just one of my my little coding pet peeves. I don't understand why you would think it would fix itself if it's not working at this stage so I'm gonna deal now with the keyboard inputs Now this is a feature or this is a feature of processing JS So they have these certain built-in variables that we can use So first I want to do is I'm gonna do if key is pressed Okay, so you see how that turned pink as soon as I finished it that tells you it's something that Processing recognized it's one of the processing variables that's built in So this tells us if a key is pressed or not So I'm gonna say so up Let's do let's tell the game we do love doesn't matter. So if the key equals W Now w is up So in this case if we want to go up dy is gonna have to become negative So what we'll do down here is we'll say ball dy equals negative one now this is where I'm gonna run it Okay, the ball is stationary you might have to click over here to make sure it has what's called focus now I'm gonna press w and see what happens Okay, so now the ball floats up and off the screen So I know now that this is working if it's not working. Don't keep typing code It's not gonna fix itself. You got to get this working first so Now that I've got one working what I'm gonna do is I'm gonna go ahead and copy this And I'm gonna paste it. So w a Snd so Do w? Let's do w s first so down and that's gonna be s and So in this case dy is positive So it's gonna give us one Then we'll do left which is a And in this case, it's not dy that's changing. We're not going up and down. We're going left and right So it's dx. So left is dx is negative one because x gets lower and lower each time And then let's go ahead and do right And that is D and again same thing This is dx and this is gonna be positive. So now when I go and test this so I can do a is a is left D is right Watch what happens when I push w Okay, and then I'm gonna push s so up and down is working left and right is working but you can see how It moves diagonally now and if you want that that's fine and that's not a big deal We can we could do that But if we wanted something it was a little bit more just vertical because what's happening is if x is positive And y is positive it moves right up right up right up right up or actually sorry dy is negative So right up right up right up right up Okay, so what we can do is when we go up we set ball dx to zero So ball dx equals zero, so we're only moving one direction at a time now in this case gonna be ball dy equals zero And then in this case it'll be ball dy equals zero Okay, so go ahead and test that and as there's a w up s down a left d right So now we have a bit more around if you know Pac-Man, but it's kind of moving up down left and right Okay, so that is pretty much how that goes That's about what I wanted to cover in this I want to cover one more thing since we're here What I want to happen is let me run that again what I want to happen is when it goes off the screen I want it to jump over here and just keep going Okay, so it's just kind of going around and around and around when it goes up here. It's going to jump back down to here Okay, so let's deal with that So We'll call it check the borders here So if we're moving right, so if the ball x Is greater than let's say 400 Okay, so if it's greater than 400 that means it's out here somewhere We want the x to come back to zero. Let me say ball x equals zero Let's go ahead and run that It's out boom and it pops over now notice 400 this is the center of the ball. So when it gets about halfway off the screen it jumps right back to there So by the same token we could do the same thing On the left side of the screen but watch this one carefully because this is where students often mess up So if I put zero here and 400 here And I run this it's not going to work right Okay, so let's go ahead and watch this it basically gets stuck at the border Okay, I can still move up and down, but if I try to move right it does this little flashy thing Okay, so it's the reason is that this is greater all of this is greater than zero So I need to reverse the sign here. So it's less than zero which is going off the screen Then I jump it over to 400 So I rerun that And x zero zero boom and then Boom so I can go back and forth often on the screen Now by the same token I could just do the same thing with Y Y in this case, it's 300 because it's only 300 tall Don't forget to change that to y And zero All y is 300 Okay, because remember we did 400 by 300 Let's go ahead and do that again So I'm going to test it make sure nothing broke So I just want to make sure this still works as as it did before Then now I want to add the extra test Does up and down work Okay, so you can see it works pretty well And there you have it So that is the basics of how you do kind of smooth motion with JavaScript and processing so just to recap We created x and y variables for our ball We created dx and dy which controls the x speed and the y speed respectively We've got a canvas. It's 400 pixels y by 300 pixels tall We chose a background color in this case was a kind of bluish color We moved the ball by adding dx to x And dy to y and we talked about you know positive is right positive is down Negative is left negative is up. We talked about why that's the case We checked to see if a key was pressed And if that key is pressed and if a key is pressed then we check if it's a w We're going to go up. So dy is negative one dx is zero if it's down dy is positive So that's the dx is zero. So we use s now note s and I think capital s would be different So if you have caps lock on it might not work So make sure you're using big and small there and then left is dx negative one And dy is zero and right is one and zero Uh, we just talked about the border. So I won't repeat that But I think you get the idea there and then at the end of all this we just go ahead and draw the ball That is it. Thanks for watching. Uh, keep on coding. Take care