Java Graphics Programming Tutorial - How To Draw Shapes, Paths, Curves, and Apply Transformations

Welcome to this Introduction to Java Graphics Programming, where we will be learning the basics of creating 2D Graphics in Java. We'll start by learning how to create some basic shapes, and how to combine them to create even more shapes. After that, we'll learn how to create paths and curves, as well as how to apply some basic graphics transformations.

JAVA GRAPHICS TUTORIAL

00:00 Introduction
00:42 Creating a class that extends JComponent
02:11 Overriding the paintComponent method
02:28 What is the Graphics object for?
03:21 How to convert / cast the Graphics object into a Graphics2D object
04:58 How to create a rectangle using the Rectangle2D.Double class
05:26 How does the JComponent coordinate space work? Where is x=0 and y=0?
06:33 How to choose a color for drawing or filling shapes in Java
06:47 The RGB Channels
07:06 Java Color Constants
07:19 How to fill the shape with the chosen color
07:32 How to view the drawing / graphics
08:10 How to add a solid-colored background to a JFrame
09:41 How to create a circle using the Ellipse2D.Double class
10:04 How to set a new color
10:21 How to create a line using the Line2D.Double class
10:46 How to draw the line using the draw method
10:59 The graphics stacking order
11:39 Antialiasing
12:04 How to create a RenderingHints object to apply antialiasing
12:42 The setRenderingHints method
13:05 Decluttering the paintComponent method
13:33 How to draw a cloud using ellipses
14:35 Creating the Cloud class
15:12 Using the Cloud class to create and draw a cloud
16:30 Visualizing the connection between the DrawingCanvas class and the Cloud class
17:19 Making the clouds customizable
21:36 A note on the Override annotation
21:56 Next Topics: Paths, Curves, and Transformations
22:43 How to create a path using the Path2D.Double class
23:24 What is the difference between the moveTo and lineTo methods?
24:37 How to close a path using the closePath method
25:07 How to create curved segments using the curveTo method
25:40 What are Bézier handles?
27:35 Heart-shaped path
28:02 What is graphics translation?
28:35 How to apply graphics translation in Java
29:29 Visualizing how graphics translation works
30:43 Applying additional translations
31:44 How to reset the translation (Method 1 - Hardcoding reset values)
33:29 How to reset the translation (Method 1 - Using an AffineTransform object)
33:36 What is an AffineTransform object?
37:04 Why use translate?
37:33 How to rotate shapes using the rotate method
38:45 Rotation pivot points explained
39:42 How to change the pivot point when rotating shapes in Java
40:28 The effect of calling the rotate method multiple times
41:52 How to reset the rotation using an AffineTransform object
42:46 Thanks for watching!

Let's start by creating a JFrame. Next, we will create a class that extends the abstract class known as JComponent. JComponent is part of the swing package, and one if its uses is for creating graphics in Java. You can think of this class as the canvas where we will draw the artwork.

JComponent is an abstract class so we won't be able to directly instantiate a JComponent object. Instead, we will need to extend it. The next thing we need to do is to override the method of the JComponent class known as paintComponent. It is a protected method with a return type of void and it accepts a Graphics object. You can think of this Graphics object as the object that's responsible for tasks such as setting the color, drawing lines and curves, filling shapes, etc. And then inside the body of this method, this is where we will be placing the code that will draw the graphics in our program. This paintComponent method automatically gets called without us having to explicitly call it anywhere. All we need to do is override this method and set it up properly and Java takes care of the rest. A Graphics object automatically gets created and passed to it as well. As long as we write the code correctly, then Java will do it's thing and render the graphics that we created.

Consider converting the Graphics object into what's called a Graphics2D object. You can think of this as an enhanced version of the Graphics object.

Other topics: setting the color, Rectangle2D.Double, Ellipse2D.double, Line2D.Double, RenderingHints for antialiasing.

In the next part: How to create paths and curves to draw other shapes like triangles. Applying Transformations.Path2D.Double, moveTo, lineTo, curveTo, Bezier handles, translate, rotate, AffineTransform.

Java Graphics Programming for Beginners

#javaprogramming #javagraphics #graphics2D

[tambuko]

He has no business exerting this much effort into his videos and yet time and time again has proven to be a great teacher. You sir are a blessing to not only this community but the world as a whole. More educators should be like you. Keep up God's work Choobtorials.

[CrasyWolfang]

This is the best coding tutorial I've ever seen. Next to zero clutter, very clear demos, and very relevant info. I don't even mind the slow pace. I'll definitely revisit this channel for more tutorials.

[michaellarkins]

Wish I had a teacher like you. Your students are so lucky. Thanks for sharing ur java lessons. Your teaching style and coding style is need and easy to understand. Love ur visuals. I would pay for more java courses.

[ArKa_]

I want to call this a high quality tutorial :)
The overlayed graphics which show quiete instantly what would happens are great.
kind regards

[perelium-x]

Your channel is so so underrated, keep up the good work man! You've been a great help

[OldSchoolBoBo]

duuude, 6 mins in and you already clarified several questions which went through my head. Thats some quality teaching here.

[JuliaNeubauer]

Super difficult material that you’ve made graphically understandable. Thank you for your excellent presentation.

[choobtorials]

JAVA GRAPHICS PROGRAMMING
Timestamps:
00:00​ Introduction
00:42​ Creating a class that extends JComponent
02:11​ Overriding the paintComponent method
02:28​ What is the Graphics object for?
03:21​ How to convert / cast the Graphics object into a Graphics2D object
04:23​ The java.awt.geom package
04:58​ How to create a rectangle using the Rectangle2D.Double class
05:26​ How does the JComponent coordinate space work? Where is x=0 and y=0?
06:33​ How to choose a color for drawing or filling shapes in Java
06:47​ The RGB Channels
07:06​ Java Color Constants
07:19​ How to fill the shape with the chosen color
07:32​ How to view the drawing / graphics
08:10​ How to add a solid-colored background to a JFrame
09:41​ How to create a circle using the Ellipse2D.Double class
10:04​ How to set a new color
10:21​ How to create a line using the Line2D.Double class
10:46​ How to draw the line using the draw method
10:59​ The graphics stacking order
11:39​ Antialiasing
12:04​ How to create a RenderingHints object to apply antialiasing
12:42​ The setRenderingHints method
13:05​ Decluttering the paintComponent method
13:33​ How to draw a cloud using ellipses
14:35​ Creating the Cloud class
15:12​ Using the Cloud class to create and draw a cloud
16:30​ Visualizing the connection between the DrawingCanvas class and the Cloud class
17:19​ Making the clouds customizable
21:36​ A note on the Override annotation
21:56​ Next Topics: Paths, Curves, and Transformations
22:43​ How to create a path using the Path2D.Double class
23:24​ What is the difference between the moveTo and lineTo methods?
24:37​ How to close a path using the closePath method
25:07​ How to create curved segments using the curveTo method
25:40​ What are Bézier handles?
27:35​ Heart-shaped path
28:02​ What is graphics translation?
28:35​ How to apply graphics translation in Java
29:29​ Visualizing how graphics translation works
30:43​ Applying additional translations
31:44​ How to reset the translation (Method 1 - Hardcoding reset values)
33:29​ How to reset the translation (Method 1 - Using an AffineTransform object)
33:36​ What is an AffineTransform object?
37:04​ Why use translate?
37:33​ How to rotate shapes using the rotate method
38:08​ How to use the Math.toRadians method to convert degrees to radians
38:45​ Rotation pivot points explained
39:42​ How to change the pivot point when rotating shapes in Java
40:28​ The effect of calling the rotate method multiple times
41:52​ How to reset the rotation using an AffineTransform object
42:46​ Thanks for watching!

[rorymax]

15:00 I’m pretty sure you can combine Shapes into an Area object and render that. You then also have the ability to check if a point lies within your hybrid shape, etc

[DiegoIbarra-dh]

Thank you so much for this video, it helped out a lot! I hope you consider uploading more java graphics tutorials in the near future.

[lingyuanyan]

Thank you for this awesome video. Drawing in Java is something that is very confusing for me and particularly other noobs, as it is a large leap in skill gap, but this tutorial was a great help to me and the best tutorial yet addressing this topic. thank you sincerely, I will definitely revisit this video and other of your tutorials in the future.

[TuanNguyen-iezm]

20:02 your pronunciation & accent is so professional, glad to see this video, thank you very much!

[GODWYNIDRISLOZADA-ow]

Good morning po, Sir Choob, Godwyn here.

For radians, I find it helpful na if one expresses the radian value as "double <angle in degrees>/MATH.PI". That way, it saves us from having to compute in our heads and focus on the code structure.

[gracekaranja]

Finally got to understand graphics, best tutorial ever!

[AAsad-]

This was the best video tutorial I have come across, straightforward and to the point. I was hoping you would show how to rotate the composite shape of heart in your tutorial or another video. It will be greatly appreciated.

[Ragnak_]

The fact I could understand everything you said impresses me. This was such a nice and well explained video on Graphics for java and I have more confidence now to dabble in it.

[codehorror]

Wow, subbed! This was one of the best videos I've seen this year.

[kasper]

Extremely high quality video. Thank you so much :)

[thecodingcanuck]

Fantastic video! Great dynamic visuals and your explanations were extremely comprehensive and easy to understand.

[MrSemIsAwesome]

Seriously: Thank you so much for this awesome tutorial. This is excellent and you should be proud of yourself.