 And welcome everybody to a simple bouncing ball tutorial using a processing the JavaScript version with Tokyo EdTech. That is me. First a quick shout out to my members. Thank you so much for supporting the channel directly. So let's go ahead and get started. Processing is a library for graphics and that kind of thing. You can see here it is focused on making coding accessible for artists, designers, educators, beginners, anybody else. It's pretty nice of them. So we're going to be using the JavaScript version of this today to make a very simple bouncing ball animation. So hopefully you'll learn a little bit about coding, a little bit about processing and maybe even a little bit about physics. Let's get started. Now, what's great about this is you don't have to download anything, you can, but you don't have to. You can just go ahead and start creating with the P5 editor. So I'm going to go ahead and click that. And actually I'm going to go back because I want to keep that open and open up a new tab. And this brings us up to here. To ask you about cookies, you can allow all, allow essential that is up to you. So basically what we have here is a little bit of JavaScript and over here is where we're going to see the action. So I'm going to go ahead and run what is there. And you'll see here we have a very exciting gray box. It is 400 pixels wide by 400 pixels tall. I'm going to change that to 300. And then you can see here in the draw function. It draws a background of 220. Apparently this is 220. What I'm going to do is I'm going to switch this to RG and B. So I'm going to make a nice green background. So let's try 200 and run it and see what we get here. Okay. You know what? I'm happy with that. Let's go with that. So, again, we've got this setup function and this is going to create our canvas and this is where we're going to be drawing for now. We've got a draw function. Now it looks like it just runs once, but what's actually happening is this is continuously running in the background. And that's going to be important for later. So as I mentioned, we're going to be drawing a ball on the screen, in this case a circle. So what I need to do is I need to make a few variables. Okay. So I'm going to say set up our variables here. And what I'm going to do is I'm going to make a ball X and I'm going to start the ball right around here. Okay. So this is 400 Ys. This is 200 and I'm going to make a ball Y. And let's see. It's going to be right about here. Now something interesting, the coordinate system for this is 00 is here. This would be plus 400 on the X and zero Y. And then down here would be zero X and plus 300 Y. And down here would be 400 X, 300 Y. So it is positive going down, not negative like what you might expect. So I'm going to make this, I don't know, we'll make it about 50. So I've created two variables, ball X and ball Y. Now down here in my draw function, I actually have to draw it. So I'm going to say draw the ball. And to do that, I'm going to be using what's called the circle method. So if you look here under reference, you can scroll down, there's all kinds of different things you can do here. And I want the 2D shape of a circle. This basically tells you how to draw a circle. Now it's interesting, we've got the X coordinate, the Y coordinate, and the diameter, it's not the radius. Radius would probably make more sense to me, but in this case it is the diameter. So let's go ahead and draw the ball. And we'll go ahead and say circle, and it's going to be at ball X, ball Y. And we'll go ahead and stick with 20, I'm fine with it. Don't forget your semicolon. Let's go ahead and run it and see what happens. Okay, so we've got a white ball, and it is drawn at 200X, about 50Y. And it is 20 pixels wide and 20 pixels tall because it's a circle. So, next up, we want the ball to move. Okay, so we're going to have this ball bounce down first. So to do that, we need to have some way of representing the movement of the ball. And so what we're going to do is we're going to separate the X movement and the Y movement. So to do that, we're going to use something called ball DX. In this case, we just want that to be zero. We're going to say ball DUI, and we'll just make it one for now. We can change that later if we need to. Let's go ahead and run that. And I just want you to understand that just because we did that, nothing's going to change. It's still not going to do anything. So what we're going to do here is, I'm going to say move the ball. This is where we're going to do all our physics stuff. So what we're going to do is our ball Y is going to have added to it the ball DY. So in this case, the ball Y starts at 50, ball DY is one. So 50 plus one is 51, and then the function runs again. 51 plus one is 52, runs again, et cetera, et cetera. So let's see what happens there. Okay, so you can see our ball is falling at a constant speed, and it is falling right off the screen. All right, so let's stop that, and let's go ahead and fix that. Actually, just real quick, if you want to make a certain color for the ball, you have to do the fill command. So let's go ahead and make it blue. So that's going to be 0, 0, we'll do 200 in here. You can go ahead and play with colors as you wish. Okay, so now we've got like a little blue ball bouncing. Boom, okay, side aura. All right, so now what we want to happen is we want to bounce. And the way we're going to do that, let me run that again, is when the ball gets to here, we're going to reverse DY. So let me show you what happens if we reverse DY and make it negative, it goes up. Okay, so positive DY is down, negative DY is up. So what we do is we're going to check the Y coordinate of the ball. So if ball Y is greater than, so it's 300 tall, the ball is 20 in diameter. So half of that is 10, so we'll say 290. What we're going to do is we'll say ball DY times equals negative 1. And what that does is it takes 1, so let's say 1 times negative 1 is negative 1. So it's going to reverse ball DY. Let's go ahead and see what happens. It's falling, falling, falling, falling. Ball DY hits 290, boom, it reverses. So far so good. Now of course it's flying up off the screen. So now we've got to deal with gravity. Now gravity is the force that pulls things down. It's a constant on Earth. It's 9.8 meters per second squared. In our game or our little world here, it's going to be different. So I'm going to go ahead and make gravity and it's going to be 0.1. It's just a number I found that worked pretty well. Now notice I capitalized gravity. And the reason for that is that gravity doesn't change. Gravity is what we call a constant. So I just capitalize that to represent that. Now gravity works on your DY. So for example, as something's falling, gravity is making it fall faster and faster and faster. It's changing the falling speed. So what we've got to do here is we say ball DY plus equals gravity. So what's going to happen is DY starts at 1. Then it's going to be 1.1, 1.2, 1.3, 1.4, 1.5. So the ball Y is going to start falling faster and faster and faster. Let's see what happens. Okay, so you can see how it is bouncing pretty much like a ball would bounce. So we already have a pretty realistic physics simulation just with that little bit of code and boom. All right, so let's just go back and review that real quick before I move on to the next section, which is making the ball bounce off the walls. So we set up our variables for the ball. We said we want to start at 250. DX is zero, which means it's not moving left or right. Now I didn't make DY1 here. I could make it zero because gravity is gonna make it move. It doesn't really matter what I do with that one. And I set gravity to equal to 0.1. Because if I set it equal to 1, watch what happens, just boom, boom. You might like that speed, I don't know, I don't really care for that. But I'll make it 0.1. And you'll notice how it kind of started slowing down, just ignore that. That just has something to do with the way the numbers work out. But yeah, it's kind of lazy bouncing, it's kind of cool. So next thing you want to do is basically using the same concept is we want to make the ball move left or right, doesn't really matter which one. So what we're gonna do is we're gonna go ahead and make the ball DX1. And then down here, I'm gonna say ball X plus equals ball DX. That's all I gotta do. So I'm gonna go ahead and run it. You can see now it's bouncing to the right and off the screen, okay? So basically, we have to do the same thing. So for example, if ball X is greater than 390, we'll say ball DX times equals negative 1. So that's gonna reverse the direction of the ball. Let's give that a shot and see what happens. And okay, boom, you can see it bounced right off the wall. And then it keeps going and it's gonna bounce off, which we don't want. So we need to deal with both sides. So if ball X is less than 10, we're just gonna do the same thing. Ball DX times equals negative 1. And we're gonna run it and just check it to make sure it's still working. We want it to and there we go. It'll bounce for a while. You can change these numbers around. Let's say you want it to move a little faster. Let's say it was a little too slow for you to just run it. Okay, you can see how it'll just bounce, I think, pretty much forever. Unless the numbers don't work out the way I think they do. And that's pretty much it. It's pretty straightforward. I hope you can see that processing's pretty cool. It uses just a little bit of basic JavaScript but it has all these different really cool drawing commands that we, there's tons of stuff here. I've barely scratched the surface myself. But the basic concepts from any programming language do apply. So one more time, just real quick. We set up our variables outside of the function. And then in the setup, we create our canvas. That's this little drawing area where we're gonna be drawing. Then in the draw function, we set our background color. Now what's interesting is if I disable this, I comment that out. It doesn't delete, you get this, which is kind of cool also. So you can see what's happening. So the background method here does two things. It changes the background color, but it also erases the screen every frame. So you get something that looks a little bit more like that. So we wanna move the ball, and keep in mind that gravity affects dy. So we add gravity to dy each time through the draw function. Then we add dy to the ball y, and that changes the location. We add dx to the ball x, and that changes the left and right location. And to make it bounce, if the ball y gets too far down, and again, I chose 290 because this is 300. The ball is a 20 pixels in diameter. So take that in half, that puts us at the edge of the ball. So we multiply dy by negative one, that reverses it. And then it goes back the way it came. And we do basically the same thing on the x, on the right side of the screen, x on the left side of the screen. And we just let it go and do its thing. And then we just draw it, pretty straightforward. Let me just do one more quick little thing, since I'm thinking about it. I'm gonna go ahead, if I think it's mouse is pressed, cool. Now you see how this has turned to pink. That tells you it knows what it is. So I'm gonna say ball x equals mouse x, and ball y equals mouse y. So I'm gonna go ahead and run that, and then watch what happens. Every time I click the ball, it goes to where the mouse is. Now notice it still has the same dx and dy. So it's going up, it'll go up from there. If it's going down, it'll go down from there. You see, you can get some kind of interesting effects. So you can kind of play around with it, put it in the corner, bounce there, and you just kind of play around with it. So there's a couple little things you can do here, I think, that make it a little bit more interesting for you. And that kind of gives you an idea of how we might start making a simple game out of using what we have learned here. So that's that, thanks for watching, take care.