Java GUI Lesson 10 | Drawing Graphics

Hey, this is Mac Heads 101. My name is Jake, and this is your 10th Java GUI tutorial. I know I said I was going to make in this tutorial adding buttons to the animation to play and pause it, but I realized that that'd be really easy. It wouldn't be that long of a tutorial; you could probably figure that on your own anyway.

So, in this tutorial, I'm going to get into drawing graphics. In the last tutorial, we drew images; in this tutorial, we've been drawing lines, rectangles, circles, um, oval stuff like that. We're actually going to be using the same method, that built-in paintComponent method, to do that.

So, public void paintComponent(Graphics G), and if you didn't notice, I extended JPanel. It's important. You need this import: import java.awt.geom.* that has uh, ovals and things like that in it. So, if you remember from the other tutorial, super.paintComponent(G).

Now here's something I didn't go over; we need, in order to draw these 2D graphics, a Graphics2D object. So, Graphics2D G2 and I'll call it G2 because I already called that G equals. All we're going to be doing is, if you remember my tutorial on typecasting, typecasting G to a Graphics2D object.

So, Graphics2D G2. So now we've casted that to a Graphics2D object. Now I'm going to be making some graphics. I'm not going to be drawing them yet; I'm just going to be making them. First one is going to be a line, so to do that, you do Line2D and I'll just call it line equals new Line2D.Double.

And this double, we're going to be putting four doubles in here, which are first an x-coordinate and a y-coordinate, then an x-coordinate and a y-coordinate. Those are going to be two points in a screw, and to draw a line from between those two to connect those two points from point A to point B.

So the first point is going to be, by the way, this is going to be a 600 by 400 window, so 0 and then 30 down. In case you didn't know, um, for in terms of Y, the very top is 0 and it increases as you go down, but the x is still the same; what increases as you go to the right decreases as you go to the left.

But the Y is flipped and I'm not really sure why that is, but it is, so just keep that in mind. So 0 in 30 down to 640 down. So now Rectangle2D uh, rectangle equals new Rectangle2D.Double and here, whoa, slow down there, Rectangle2D.Double.

And it just like imported this; it did all the stuff that I didn't need it to do. Okay, so Rectangle2D.Double and here you put an x and y coordinate of the top left corner of your rectangle and its x and y. I mean, its width and height.

So I'll put this at like 200 over and 120 down and I'll make it 70 by 30. And if I wanted to draw a square, I use the rectangle but I just make it like 30 by 30. And the same goes for the ellipse. To make it a circle, you just would make the width and height equal.

So now Ellipse2D oval and an ellipse is essentially an oval equals new Ellipse2D.Double. And it's the same thing as here, so I'll make that 400 and 200 down, and I'll just make that 40 by 60. And yet again, if I want to make this into a circle, I could just do 40 by 40 or something like that and it would become a circle.

So now I'm going to draw these three things, and to do that I do G2.draw. And the draw is for the line, so I just write line. I made this line, and if I did G2.draw for like the rectangle, it would just draw the outline of it. If I wanted a solid rectangle, I do G2.fillRect.

And I can also change the paint that I'm drawing with, the color that I'm drawing with, by G2.setPaint and then Color.RED. And so then the rectangle will be red, and uh, it's the paint's black by default, so if you don't change it, it's just going to be black.

G2.setPaint(Color.ORANGE) and then I'm just going to fill the oval. Alright, so basically, um, we casted this; we made a Graphics2D object which was just a graphics 2D version of the Graphics G. Then we have our line, Line2D line equals new Line2D.Double and gave it two points to connect.

Then this rectangle, we gave X and Y coordinates of its top left corner as width and height, and same kind of thing for the oval. Then I drew the line, changed the paint to red, so then it's going to draw this red rectangle, changed the paint to orange, so then it's going to draw an orange oval.

Okay, so now in here I have everything already: JFrame s = new JFrame(). There's our JFrame, I added s and I set my size to 600 by 400. So now I'm going to run this.

Voila! Here is what's been drawn on the screen. That's the line that stretches all the way across the screen and goes down about 10 as it goes across. Here is the rectangle, and there's the oval. And just so I can show you that it can actually do squares and circles, I'm just going to um, do this, make the width and height equal, and now you'll see that that's a square, and that is a circle.

So that's the basics of drawing graphics, and in the next tutorial, I'm going to be over curves and gradients. So thank you for watching Mac Heads 101. Subscribe, and goodbye.