 Welcome to code.org app lab simple bouncing ball tutorial with me Tokyo Ed Tech So today we're going to show you how to make a ball that bounces on the screen to do that We need to know a few concepts This is a kind of coding concepts, but also a little bit of physics concepts So we have a location of the ball and that's going to be our X and Y coordinates We have the movement of the ball Represented by DX and DY D is Greek for Delta and it means change So if you're moving to the right your X is changing by a certain amount. That's your DX if you're moving To the left your DX is moving your X is changing by DX in a negative direction Which we'll see in a little bit and then border checking What happens when we get to the bottom of the screen or the right side of the screen the left side of The screen actually I forgot one there. We also got to deal with gravity So we'll go ahead and Yeah, let's get started. So here I am on code.org now If you haven't done anything with code.org this may not be the right tutorial to start with But what I'm gonna do is I'm gonna go to create and you'll see a bunch of different choices Again, I'm assuming you already have an account and all that sort of thing now I'm gonna be using app lab because that's what my students are using there is also one called game lab But we're gonna do app lab because we're working on app program and some apps Of course our games. So there we go. So now it will create a blank project for you I'm gonna take a little bit of time. So I'm gonna go ahead and give it a name and I'm gonna call this Bouncing ball tutorial very very original Tutorial with Tokyo Eddeck Always got to get my branding in there and save that it's always good to give it a name So you don't have a bunch of projects called untitled project Now what I'm gonna do is I'm gonna start with design And when you start code or you're given a screen I don't like calling it stuff screen once. I'm gonna call us SCR. I guess I can call it main or I call it game Yeah, call it main for now, and I want to change the background color. I want it to be black So I'm gonna do zero zero and zero. Okay, you can see how it's already done that. So if I hit run Okay, I have a blank screen. Yay. Okay not very useful at this point. So I'm gonna go ahead and hit reset now for me to do Graphics there is an HTML element called the canvas and as you can guess that is where we're going to draw stuff So you can see over here. We have a canvas. I'm just gonna drag that into my screen and put that into the top left Okay, now while you're looking at you see all those numbers are you've got But zero zero why is five? It's hard to get that right, but long story short the top left corner is zero zero I'm gonna go ahead and drag this out now. I could drag it all the way to the bottom But I'm just gonna go ahead and do this leave it about right here Oops, my computer's not letting go. Why is that? Enter does that help and it's locking up, which is lovely escape that into it I'm just gonna hit reset and Reboot or reload refresh and do it again. It does get stuck sometimes, you know go back to design And again, I know I could edit things like that out But I think it's important to see that this process does not always go smoothly and what do you do? So I've got a canvas and I'm gonna call this Canvas Probably was a game. I would probably call it game, but I'll just call it main as well And what I want you to see is that we've got SCR main and we've got canvas main So I know SCR main is a screen. I know canvas is our CNV is a canvas I didn't have to do CNV. It's just what I chose to use and you'll see it's 320 pixels wide and 385 pixels tall. It's at 0x it starts up here and 0y So that means across we're looking at 320 down. We are looking at 385 Now notice as X goes to the right it increases it goes to the left it decreases as Y goes down It increases as it goes up it decreases So Y is backwards to probably what you're used to say from math class So at this point, we've created all of the Design elements that we need now this was a game We'd have some buttons down here and we could do some different things with the keyboard But for this we're just learning the basic concepts. So I'm gonna go over to my code Okay, now if I go back to coding concepts Okay, I said that we're gonna need a location In X and Y we're gonna need movement So how is the ball moving and then we're gonna check for borders and again I forgot to put gravity on here, but we'll leave it like that because mistakes are made from time to time So I'm gonna go to variables What I'm gonna do is I'm gonna go ahead and start creating the variables I need now notice this starts with var the var keyword. I Only do this once. This is when I initially create the variable So what I'm doing is I'm gonna call my first variable ball X And I'm gonna start the ball somewhere around here. So So maybe make that 160 And I make a ball Y I'm gonna make that Let's see here about we'll say 40 with that and then I'm gonna make ball DX And that's gonna be zero I'm gonna make ball D y and that's also gonna be zero so What I need to do is I'm gonna go back to my canvas and I have to do something called set active canvas. I have to tell the program This is the canvas that I'm using. This is again. This is why I use proper names Now I could clearly I could have other canvases, but for this project I'm only gonna have one and then the next thing I'm gonna do is I want to pick a color and that is where it's That fill color there it is And I'm gonna go ahead and make my ball green I don't know why I always I usually choose green It's a color I like and then my circle I'm gonna use a circle obviously for my ball and I'm gonna put in here ball X and I'm gonna put ball Y and I don't think I'm gonna make this 20. Let's try 20 for now Now you notice these little yellow triangles this says ball DX is defined, but it's not called in your program So I've created it, but I haven't used it anywhere and we'll get to that later But ball X and ball Y I have used. Okay, so I'm gonna go ahead and hit run Hopefully if everything goes well, we'll see a ball right here in the middle of the screen fantastic so This is how we're gonna get started and you know as a beginning programmer Yeah, you just kind of being programs tend to just like throw everything in and hope it works But you'll see how I do a little bit test it make sure it works And I do a little bit test it make sure it works if you do that It'll be a lot easier to find the problems in your program. Okay, so the next thing we want to do is We want to make the ball go down So the the movement of the ball up and down is controlled by ball D. Y Okay, so right now it's zero. I'm gonna set it to five And then what that will do is that is a downward direction and so what's supposed to happen is every Frame I'll get that in a second is gonna go plus five plus five plus five plus five plus five plus five Now let's go ahead and run this because this is again This is one of those things beginners you have these weird ideas that things just happen They don't just happen. We got a program. So I hit run Nothing happens Now notice I still got this little yellow triangle And it says I've defined it, but I haven't called it. So what I need to do is the following I Need to go back to my variable section. I'm not going to choose this. I'm going to choose this one So what I'm gonna do is I'm gonna say ball Y equals ball Y plus ball D y Now the capitalization has to be the same notice I capitalized DN x here capitalized DN y So what this does is it takes ball Y which starts at 160 Takes 160 plus ball D y which is five. So this is 165 and it changes ball Y to 165 So let's go ahead and reset that now. Look where that's at and I'm gonna run it again And I don't know if you could tell Nothing happened Partly there's two reasons one is the program ended here. Okay, so if I move this down here Okay, watch where it's at Reset I don't know if you could see it move down just a tiny tiny tiny little bit Okay, but then it stopped Okay, again, this is because this is how we programmed it So probably in previous programs if one of my students we did things where you push a button you enter some text And then things happen. So in this program, we need to do something new Which is called a timed loop You'll see it down here You'll see where it says timed loop MS means milliseconds and callback So I'm gonna pull this out You'll see where it says timed loop one thousand what that means is every one second one thousand milliseconds It's gonna do whatever is inside of this loop now. There's nothing there but what we want to happen is We want to set the color to green We want to Move the ball and Draw the ball Actually, maybe we should put this there maybe makes a little more sense. Okay, so here we update the ball. Why? We set the color again just in case to make sure because if we're gonna draw different things They might have different colors and we're gonna draw the circle So now this is gonna repeat every second. So let's go ahead and hit reset and run Okay, one second two seconds three seconds four seconds five seconds So the ball is falling now not obviously not as fast as we would like but it is falling Okay, so we hit reset on that So what I want to do is I want to change this to 50 milliseconds So 50 milliseconds that means 20 frames per second which for our purposes should be enough So now watch what happens Okay, so you can see the ball is falling And it falls right off the canvas now it's still going you just can't see it Okay, so we got another problem to fix okay the the ball. There's still pieces of the ball there so to fix that we're gonna go back to canvas and There's a command called clear canvas so inside our loop Okay, we need to clear the canvas Update the ball why coordinate? Set the color and draw the ball. We hit run and this is what we have now Okay, very very exciting Now you notice again, I'm doing some stuff. I'm testing it. There's a problem. I'm fixing it I'm not going ahead and just doing stuff that you know, I haven't done yet Yeah, for some weird reason again beginners they think well, okay, that's not working I'll just go do something else and that's just like the worst thing you can do. Okay, so stop fix where you're at Okay, now the next thing I could I could start looking at the DX at this point, but I want the ball to bounce Okay, so The ball comes down if I run it again the ball comes down when it gets to about here It should bounce in the other direction. Okay, it's right about there Okay, so the why coordinate here is about 385 But remember the ball has a diameter of I think this is diameter or I'm sure it's diameter or radius Does it tell us we click that? No See your circle. It's a radius. So that means from here to the center of the ball is 20 So what I'm gonna do is I'm gonna check I'm gonna say if It doesn't matter if I do it here up there. It's not a big deal ball y is greater than 365 and 365 is 385 minus 20 the radius What I'm gonna do is I'm gonna set ball y to 365 and I'm going to reverse Ball dy to do that. I multiply which is an asterisk by negative one. I click out of here. It turns into You know block code So one more time. So if the ball y goes out of the screen Or out of the canvas, I'm gonna put the ball y back to 365 And then I'm gonna reverse dy so it goes up. So let's go ahead and run that see what happens It's coming down to remember the line is down here somewhere And you saw how it bounced Now yeah, it's not a perfect bounce, but you get the idea now notice It goes up and off the screen because we have not accounted for gravity So that's our next step is gravity So I'm gonna go ahead and create a variable for gravity And I'm just gonna set it to one. I don't know if that's a good number, but we'll try it Notice I capitalized the G because gravity doesn't change But what I need to do is down here is the following ball dy equals ball dy plus G for gravity This is because gravity affects the speed of fall the speed of falling so The ball is falling at five then it's falling at six then it's falling at seven and it's falling at eight Then it's falling at nine gravity affects Ball dy it doesn't affect ball y Okay, ball y is affected by ball dy Ball dy is affected by gravity This is physics stuff if you haven't said that yet. Don't worry. Just trust me on this So now watch what happens Okay, see how it's falling faster faster faster slowing slowing slowing Faster faster faster faster slowing slowing slowing pretty cool Looks just like a real ball bouncing now due to some like mathematical stuff It may just eventually slow down and stop. Don't stress about that So we hit reset now What I want to do is the same thing for left and right Remember gravity doesn't affect left and right. Okay, gravity affects up and down So I'm falling in and get to use my DX. So I'm just gonna follow this pattern here and I'm gonna say that Ball x equals ball x plus ball dx Again, if you don't understand the physics of it You know, just you can just copy you just you don't have to understand exactly how it works We need to understand you do need to understand that ball dy affects ball y and ball dx affects ball dx and Then I need to set ball dx to some value. Let's I'll do five again. Why not and I hit run Let's see what happens. Okay, now notice how it bounces right off the screen. Okay, so I have to do the border checking So that was you know, make sure the border is dealt with so it's about 320 So I'm gonna do the same thing I did here I'm gonna go to control I'm gonna do if again. This again has to be inside this loop Ball x is greater than I think it's 360. That's 360. So minus 20 is 340 You might have to play with the numbers I do I play with them all the time till I get what I want Sorry, I know my voice is a little raspy. It's a little dry and cold today Ball x equals 340 and then I'm gonna do the same thing. I'm gonna reverse it So ball x equals ball oops ball dx. Sorry about that Very easy to get wrong ball dx equals ball DX times negative one And again, I'm going to test this make sure it works. Okay, boom Okay, well, maybe So still went off the screen. So this is 320. So I should make this 300. That's why I went the wrong way Okay, let's run that Okay, you see how it bounced off the wall now again, it's gonna go off the screen all the way off here reset But I'm gonna do basically the same thing but watch carefully because this is something again beginners mess up every single time I'm going to the left this time. So it's gonna be ball x is less than Notice on the right side. It's greater than on the left side. It's less than this is zero The balls diameter is 20. So I'm gonna use 20 as my number Okay, back up the variables Notice again, I'm not using var x here. I'm just using x So ball x equals 20 and again ball dx. I need to reverse Now we want to go back the other way. So ball dx equals ball dx times negative one Okay, and I'm gonna run it and Now we have a functioning bouncing ball Now, it'll probably be a little faster on your computer because I'm recording the screen everything slow down a bit but you can see how it gets to the edge of the canvas and bounces and Voila, we have a bouncing ball with realistic physics. We're using gravity. We're using dx and dy We're using x and y and we're checking for the borders So let me go ahead and just run through that again Our ball has four values associated with it an x-coordinate a y-coordinate, which is where it is on the screen a dx and a dy which is the speed of motion We have gravity which we've set to one and you can play with the numbers. It doesn't really matter And it's positive because it's in this particular system. Positive is down We've set our active canvas to canvas main and our time loop every 50 milliseconds. That's once that's 20 times a second We clear the canvas We update ball dy with gravity. We update ball y with ball dy. Yep a date ball x with ball dx We draw our ball now again. I could have put the drawing part down here It's not gonna affect anything because it's a loop I could just I could set it down here if that makes more sense to you. That's fine Actually kind of makes more sense to me and hit reset and test it Okay, I made a change still working Now if the ball goes off the screen he also off the screen here We put it back to this that point and then reverse Y So it goes up if it goes off the screen to the right You set it back and reverse dx and if it goes off to the left We set it back to that point and reverse dx So it's just gonna bounce and bounce and bounce and bounce now You can play with the numbers and make it bounce faster and you know kind of see what happens but that's the gist of Basic like physics animation. So going back to our coding concepts We have our x y our dx dy border-checking and I forgot gravity, but I could have also added a few things about You know looping and just different coding things that maybe you haven't done before but overall I think it's pretty straightforward. So yeah, that's it Keep on going take care