Java GUI Lesson 11 | Moving a Graphic

Hey, this is Mac Heads 101. My name is Jake, and welcome to your 11th Java GUI tutorial. Now, I know I said in this tutorial I'll be talking about curves and gradient paints and stuff, but I think I'm gonna save that for a couple tutorials down the line because what I want to do now is, in this tutorial and the next few, talk about making graphics move, making them ease to a stop, simulating gravity, collision detection, making them move with the keys, with the mouse, you can drag them, stuff like that. Then I'll come back to lines and gradient paints and things.

So, how we're gonna be doing this is, if you remember in our last tutorial, when we drew an oval, we set x and y coordinates of its top left corner to position it. Now, what we're going to be doing is we're going to be setting those x and y coordinates as variables that are gonna keep changing with the timer.

So, first things first, we have to make a timer: Timer timer = new Timer(5, this), and right now, there's no this because we have not implemented the action listener. All right, so now we need to make some doubles: double x, y, velocityX, velocityY. Just val X, del Y. X and y are gonna be the X&Y location; velocity X and velocity Y are going to be the velocities of each of these and what's going to be added each time.

So, right now, I'll just set these equal initially to zero so it has someone to draw it, and then velocity Y will equal 2, equal to velocity Y. There's a little too. So now what we want to do is make our public void paintComponent(Graphics g). Super paint component, and I went over all of this and lacet Orioles. So yeah, and the same thing we're gonna do is make the graphics 2D.

So now we're gonna make our Ellipse2D circle = new Ellipse2D.Double(x, y, 40, 40). There's two. Yeah, new Ellipse2D that's Apple. Okay, so now we've set its X&Y coordinates, and in here, I'm just gonna start the timer and also fill the circle. So that's drawing the script.

Now we have less to do is public void paintComponent. I mean, what am I talking about? Paint upon. I just made that action performed for the action listener, and it takes the action events e. Okay, so what we have to do in here is the two things I said: one, which is change the x and y coordinates, and two, which is call this method because right now it drew it at 0, 0, and no matter how much I change X and y, it's not gonna move unless I call this method, and it draws it at the new location.

In order to clear the whole thing and then draw it, it's really easy. You just do this: there's a built-in method repaint(). That's all you have to do. So, every 5 milliseconds, it's going to repaint, and all we have to do now is change the x and y coordinates: x += velocityX and y += velocityY. Plus equals just means x equals x plus velocity X.

So what's going to happen is we drew it at x and y, and every five milliseconds, because this timer, x and y are getting increased by 2, and then it's gonna redraw it at the new location. So seems perfect, but there is actually a slight problem that you'll see when I run this.

So, and actually got to do this whole thing: second s = new second(), and then we make a JFrame f. f.setVisible(true), through the set size. I'll make it 600 by 400. All right, and I'll just set title title to moving. All I said. Now, I'm gonna run this, and you'll see what the problem is. There you go; it moved, but it moved off screen because you can set these X&Y coordinates to negative 3, or if this is 600, I can set it to 700. You can actually set the X&Y coordinates to locations that are off-screen.

So here's how you have to keep from off-screen. Every time we call this, we have to put in a little check: if x < 0 or x > 560, and the reason I did 560 instead of 600 is because, if you remember, it's the top-left corner, which means from the top-left corner to the edge, there's still 40 in the way. Um, that's the ball. So if I subtract 40, it will make it so it stops it at 4 in, and it stops the...

I should explain this. Basically, you have the ba...