Java Programming/Graphics/Drawing shapes

Introduction to Graphics
Throughout this chapter, we will refer to the process of creating Graphical content with code as either drawing or painting. However, Java officially recognizes the latter as the proper word for the process, but we will differentiate between the two later on.

Now, the main class that you would be needing would, without doubt, be the  class. If you take a closer look at the method that we used in theIdentifying the acquisition of the  class in our code

To view the contents of the  class, please check the external links at the bottom of the page for links to the online API.

Understanding coordinates
To start off your drawing experience, consider drawing the most basic shape — a line. A canvas when viewed upon with regards to drawing routines can be expressed as an inverted Cartesian coordinate system. A plane expressed by an x- and a y-axis. The origin point or $$(0,0)$$ being the top-left corner of a canvas and the visible area of the canvas being the Cartesian quadrant I or the positive-positive (+,+) quadrant. The further you go down from the top, the greater the value of y-coordinate on the y-axis, vice-versa for the x-axis as you move toward the right from the left. And unlike the values on a normal graph, the values appear to be positive. So a point at $$(10,20)$$ would be 10 pixels away from the left and 20 pixels away from the top, hence the format $$(x,y)$$.



Drawing a simple line across the screen
Now, we already know that a line is a connection of two discreet points atop a canvas. So, if one point is at $$(x1,y1)$$ and the other is at $$(x2,y2)$$, drawing a line would require you to write a syntax like code below. For the sake of brevity, we will skim out the rest of the method unused in the example.

In the above example, a simple method is used to define precisely where to place the line on the Cartesian scale of the canvas. The  asks you to put four arguments, appearing in order, the x1 coordinate, the y1 coordinate, the x2 coordinate and the y2 coordinate. Running the program will show a simple black line diagonally going across the canvas.



Drawing a simple rectangle
We now proceed on to our second drawing. A simple rectangle would do it justice, see below for code.

In the above example, you see how easy it is to draw a simple rectangle using the  method in the   instance that we obtained. Run the program and you will see a simple black outline of a rectangle appearing where once a blank canvas was.

The four arguments that are being passed into the method are, in order of appearance, the x-coordinate, the y-coordinate, width and the height. Hence, the resultant rectangle would start painting at the point on the screen 10 pixels from the left and 10 from the top and would be a 100 pixel wide and a 100 pixel in height. To save the argument here, the above drawing is that of a square with equal sides but squares are drawn using the same method and there is no such method as



Playing around with colors
You can change the color of the outline by telling the  instance the color you desire. This can be done as follows:

Running the program would render the same rectangle but with a red colored outline.

For the purposes of bringing color to our drawing, we used a method namely the  method. This method comes into force for all the drawing made after its call until another color is set. It asks for an argument of type. Now because you have no idea of how to actually instantiate a  class, the class itself has a few built-in colors. Some built-in colors that you can use are mentioned below.
 * .red
 * .blue
 * .green
 * .yellow
 * .pink
 * .black
 * .white

Try running the program while coding changes to colors for a different colored outline each time. Play around a bit with more colors. Look for the Color class API documentation in the external links at the bottom of the page.



Filling up the area of the rectangle
Up until now, you have been able to draw a simple rectangle for yourself while asking a question silently, "why is the outline of the rectangle being painted rather the area as a whole?" The answer is simple. Any method that starts with  only draws the outline. To paint the area within the outline, we use the  methods. For instance, the code below would fill a rectangle with yellow color while having a red outline. Notice that the arguments remain the same.



What about a circle?
Drawing a circle is ever so easy? It is the same process as the syntax above only that the word  is changed to the word. And don't ask me why oval? You simply don't have the method as you don't have. Following is the application of Graphics code to draw a circle just to whet your appetite.

A new form of a rectangle
Simple so far, isn't it? Of all the shapes out there, these two are the only shapes that you'd need to build for the moment. Complex graphics routines are required to build shapes like a rhombus, triangle, trapezium or a parallelogram. We would be tackling them later on in another section. However, on a last note I would leave you with another interesting shape - a combination of both ovals and rectangle. Think a rectangle with rounded corners, a Rounded Rectangle.

Notice that the syntax of the  method is a bit different than the syntax for the simple rectangle drawing routine. The two new arguments added at the end are the width of the arc in pixels and the height of the arc in pixels. The result is pretty amazing when you run the program. You don't need to squint your eyes to tell that the corners of the rectangle are slightly rounded. The more the values of the width and height of the arcs, the more roundness appears to form around the corner.

Hmm, everything's perfect, but...
Sometimes people ask, after creating simple programs like the ones above, questions like:
 * Why did I have to tell the  instance the color before each drawing routine? Why can't it remember my choice for the outlines and for the fill colors? The answer is simpler than it seems. But, to fully understand it, we need to focus on one little thing called the Graphics Context. The graphics context is the information that adheres to a single instance of the   class. Such an instance remembers only one color at a time and that is why we need to make sure the context knows of the color we need to use by using the   method.
 * Can I manipulate the shapes, like tilt them and crop them? Hold your horses, cowboy! Everything is possible in Java, even tilting and cropping drawings. We will be focusing on these issues in a later section.
 * Is making shapes like triangles, rhombuses and other complex ones tedious? Well, to be honest here, you need to go back to your dusty book cabinet and take out that High School Geometry book because we would be covering some geometry basics while dealing with such shapes. Why not read a wikibook on Geometry?

Question 9.3: Throughout the exercise listings above, we have been filling the shapes first and then drawing their outlines. What happens if we do it the other way around? Consider the code below.
 * 1) The left and the top outlines disappear.
 * 2) The right and the bottom outlines disappear.
 * 3) The color for the outline becomes the color for the fill area.
 * 4) All the outlines disappear.

All the outlines disappear.

Question 9.4: What would  give you?
 * 1) A horizontal line.
 * 2) A vertical line.
 * 3) A diagonal line.

A horizontal line.

If you have any questions regarding the content provided here, please feel free to comment in this page's discussion.