View source for Java Programming/Graphics/Drawing shapes

<noinclude>{{Displaytitle|title=Drawing shapes}}
{{Nav}}
{{Java Programming/UserInterfaceTopics/Nav}}
__NOTOC__</noinclude>

==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 <code style="border-bottom:dashed red 1px;">Graphics</code> class. If you take a closer look at the method that we used in theIdentifying the acquisition of the <code>Graphics</code> class in our code

{{XCode|1='''Code listing 9.3: A basic canvas'''
<syntaxhighlight lang="Java">
import java.awt.*;
import javax.swing.*;
public class MyCanvas extends Canvas {
    public MyCanvas() {
    }

    public void paint(Graphics graphics) {
        /* We would be using this method only for the sake
         * of brevity throughout the current section. Note
         * that the Graphics class has been acquired along
         * with the method that we overrode. */
    }

    public static void main(String[] args) {
        MyCanvas canvas = new MyCanvas();
        JFrame frame = new JFrame();
        frame.setSize(400, 400);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(canvas);
        frame.setVisible(true);
    }
}
</syntaxhighlight>}}
To view the contents of the <code style="border-bottom:dashed red 1px;">Graphics</code> class, please check the [[#External Links|external links]] at the bottom of the page for links to the online API.

==Etching a line on the canvas==
===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 [[w:Cartesian coordinate system|Cartesian coordinate system]]. A plane expressed by an x- and a y-axis. The origin point or <math>(0,0)</math> 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 <math>(10,20)</math> would be 10 pixels away from the left and 20 pixels away from the top, hence the format <math>(x,y)</math>.
{{Clr}}
[[Image:Java programming graphics 09 02.PNG|thumb|right|420px|Figure 9.2: A simple line form displayed across the canvas from Code section 9.4]]

===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 <math>(x1,y1)</math> and the other is at <math>(x2,y2)</math>, 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.

{{XExample|1='''Code section 9.4: Drawing a simple line form'''
<syntaxhighlight lang="java">
...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.black);
        graphics.drawLine(40, 30, 330, 380);
        
    }
    ...
}
</syntaxhighlight>}}
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 <code style="border-bottom:dashed green 1px;">drawLine(int,int,int,int)</code> 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.
{{Clr}}

[[Image:Java programming graphics 09 03.PNG|thumb|right|420px|Figure 9.3: A simple black-outlined rectangle drawn]]

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

{{XExample|1='''Code section 9.5: Drawing a simple rectangle'''
<syntaxhighlight lang="java">
...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.drawRect(10, 10, 100, 100);
    }
    ...
}
</syntaxhighlight>}}
In the above example, you see how easy it is to draw a simple rectangle using the <code style="border-bottom:dashed green 1px;">drawRect(int, int, int, int)</code> method in the <code style="border-bottom:dashed red 1px;">Graphics</code> 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 <s><code style="border-bottom:dashed green 1px;">drawSquare(int, int, int)</code></s>
{{Clr}}

[[Image:Java programming graphics 09 04.PNG|thumb|right|420px|Figure 9.4: Same rectangle drawn with a red outline]]
===Playing around with colors===
You can change the color of the outline by telling the <code style="border-bottom:dashed red 1px;">Graphics</code> instance the color you desire. This can be done as follows:

{{XExample|1='''Code section 9.6: Changing the outline color of the rectangle'''
<syntaxhighlight lang="java">
...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.red);
        graphics.drawRect(100, 100, 500, 500);
    }
    ...
}
</syntaxhighlight>}}

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 <code style="border-bottom:dashed green 1px;">setColor(Color)</code> 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 <code style="border-bottom:dashed red 1px;">Color</code>. Now because you have no idea of how to actually instantiate a <code style="border-bottom:dashed red 1px;">Color</code> class, the class itself has a few built-in colors. Some built-in colors that you can use are mentioned below.
* <code><code style="border-bottom:dashed red 1px;">Color</code>.red</code>
* <code><code style="border-bottom:dashed red 1px;">Color</code>.blue</code>
* <code><code style="border-bottom:dashed red 1px;">Color</code>.green</code>
* <code><code style="border-bottom:dashed red 1px;">Color</code>.yellow</code>
* <code><code style="border-bottom:dashed red 1px;">Color</code>.pink</code>
* <code><code style="border-bottom:dashed red 1px;">Color</code>.black</code>
* <code><code style="border-bottom:dashed red 1px;">Color</code>.white</code>

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|external links]] at the bottom of the page.
{{Clr}}

[[Image:Java programming graphics 09 05.PNG|thumb|right|420px|Figure 9.5: Same rectangle drawn with a red outline and a yellow fill]]

===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 <code style="border-bottom:dashed green 1px;">drawXxxx(...)</code> only draws the outline. To paint the area within the outline, we use the <code style="border-bottom:dashed green 1px;">fillXxxx(...)</code> 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.

{{XExample|1='''Code section 9.7: Drawing a yellow rectangle with a red outline'''
<syntaxhighlight lang="java">
...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.yellow);
        graphics.fillRect(10, 10, 100, 100);
        graphics.setColor(Color.red);
        graphics.drawRect(10, 10, 100, 100);
    }
    ...
}
</syntaxhighlight>}}
{{Clr}}

[[Image:Java programming graphics 09 06.PNG|thumb|right|420px|Figure 9.6: A white circle drawn with a blue outline]]

==What about a circle?==
Drawing a circle is ever so easy? It is the same process as the syntax above only that the word <code>Rect</code> is changed to the word <code>Oval</code>. And don't ask me why oval? You simply don't have the method <s><code style="border-bottom:dashed green 1px;">drawCircle(int, int, int)</code></s> as you don't have <s><code style="border-bottom:dashed green 1px;">drawSquare(int, int, int)</code></s>. Following is the application of Graphics code to draw a circle just to whet your appetite.

{{XExample|1='''Code section 9.8: Drawing a white circle with a blue outline'''
<syntaxhighlight lang="java">
...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(new Color(0,0,255));
        graphics.drawOval(50, 50, 100, 100);
    }
    ...
}
</syntaxhighlight>}}
{{Clr}}

==A new form of a rectangle==
[[Image:Java programming graphics 09 07.PNG|thumb|right|420px|Figure 9.7: A pink rounded rectangle with a red outline. Amazing!]]
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 (<code>RoundRect</code>).

{{XExample|1='''Code section 9.9: Drawing a pink rounded rectangle with a red outline'''
<syntaxhighlight lang="java">
...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.pink);
        graphics.fillRoundRect(10, 10, 100, 100, 5, 5);
        graphics.setColor(Color.red);
        graphics.drawRoundRect(10, 10, 100, 100, 5, 5);
    }
    ...
}
</syntaxhighlight>}}
Notice that the syntax of the <code style="border-bottom:dashed green 1px;">drawRoundRect(int, int, int, int, int, int)</code> method is a bit different than the syntax for the simple rectangle drawing routine <code style="border-bottom:dashed green 1px;">drawRect(int, int, int, int)</code>. 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 <code style="border-bottom:dashed red 1px;">Graphics</code> 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 <code style="border-bottom:dashed red 1px;">Graphics</code> 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 <code style="border-bottom:dashed green 1px;">setColor(Color)</code> 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 [[Geometry|wikibook on Geometry]]?

{{Java/Hidden begin|title=Test your knowledge}}
'''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.
<syntaxhighlight lang="java">
...
public void paint(Graphics graphics) {
    graphics.setColor(Color.red);
    graphics.drawRect(10, 10, 100, 100);
    graphics.setColor(Color.yellow);
    graphics.fillRect(10, 10, 100, 100);
}
...
</syntaxhighlight>
# The left and the top outlines disappear.
# The right and the bottom outlines disappear.
# The color for the outline becomes the color for the fill area.
# All the outlines disappear.
{{Java/Hidden begin|title=Answer}}
All the outlines disappear.
{{Hidden end}}

'''Question 9.4: What would <code style="border-bottom:dashed green 1px;">drawLine(10, 100, 100, 100)</code> give you?'''
# A horizontal line.
# A vertical line.
# A diagonal line.
{{Java/Hidden begin|title=Answer}}
A horizontal line.
{{Hidden end}}
{{Hidden end}}

If you have any questions regarding the content provided here, please feel free to comment in this page's [[Talk:Java_Programming/Graphics/Drawing shapes|discussion]].

==External Links==
* [http://java.sun.com/j2se/1.4.2/docs/api/java/awt/Graphics.html Locate the Graphics class in the online Java API documentation]
* [http://java.sun.com/j2se/1.4.2/docs/api/java/awt/Color.html Locate the Color class in the online Java API documentation]

<noinclude>
{{Nav}}
{{Status|100%}}
{{BookCat|filing=deep}}</noinclude>