(Optional) GUI and Graphics Case Study: Colors and Filled Shapes

(Optional) GUI and Graphics Case Study Colors and Filled Shapes

Although you can create many interesting designs with just lines and basic shapes, class Graphics provides many more capabilities. The next two features we introduce are colors and filled shapes. Adding color brings another dimension to the drawings a user sees on the computer screen. Filled shapes fill entire regions with solid colors, rather than just drawing outlines.

Colors displayed on computer screens are defined by their red, green, and blue components. These components, called RGB values, have integer values from 0 to 255. The higher the value of a particular component, the brighter the particular shade will be in the final color. Java uses class Color in package java.awt to represent colors using their RGB values. For convenience, the Color object contains 13 predefined static Color objectsColor.BLACK, Color.BLUE, Color.CYAN, Color.DARK_GRAY, Color.GRAY, Color.GREEN, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.RED, Color.WHITE and Color.YELLOW. Class Color also contains a constructor of the form:

 public Color( int r, int g, int b )

so you can create custom colors by specifying values for the individual red, green and blue components of a color.

Filled rectangles and filled ovals are drawn using Graphics methods fillRect and fillOval, respectively. These two methods have the same parameters as their unfilled counterparts drawRect and drawOval; the first two parameters are the coordinates for the upper-left corner of the shape, while the next two parameters determine its width and height. The example in Fig. 6.16 and Fig. 6.17 demonstrates colors and filled shapes by drawing and displaying a yellow smiley face on the screen.

Figure 6.16. Drawing a smiley face using colors and filled shapes.

(This item is displayed on page 262 in the print version)

 1 // Fig. 6.16: DrawSmiley.java
 2 // Demonstrates filled shapes.
 3 import java.awt.Color;
 4 import java.awt.Graphics;
 5 import javax.swing.JPanel;
 6
 7 public class DrawSmiley extends JPanel
 8 {
 9 public void paintComponent( Graphics g )
10 {
11 super.paintComponent( g );
12
13 // draw the face
14 g.setColor( Color.YELLOW ); 
15 g.fillOval( 10, 10, 200, 200 );
16
17 // draw the eyes
18 g.setColor( Color.BLACK ); 
19 g.fillOval( 55, 65, 30, 30 ); 
20 g.fillOval( 135, 65, 30, 30 );
21
22 // draw the mouth
23 g.fillOval( 50, 110, 120, 60 );
24
25 // "touch up" the mouth into a smile
26 g.setColor( Color.YELLOW ); 
27 g.fillRect( 50, 110, 120, 30 );
28 g.fillOval( 50, 120, 120, 40 );
29 } // end method paintComponent
30 } // end class DrawSmiley

Figure 6.17. Creating JFrame to display a smiley face.

(This item is displayed on pages 262 - 263 in the print version)

 1 // Fig. 6.17: DrawSmileyTest.java
 2 // Test application that displays a smiley face.
 3 import javax.swing.JFrame;
 4
 5 public class DrawSmileyTest
 6 {
 7 public static void main( String args[] )
 8 {
 9 DrawSmiley panel = new DrawSmiley();
10 JFrame application = new JFrame();
11
12 application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
13 application.add( panel );
14 application.setSize( 230, 250 );
15 application.setVisible( true );
16 } // end main
17 } // end class DrawSmileyTest

 

The import statements in lines 35 of Fig. 6.16 import Color, Graphics and JPanel. Class DrawSmiley uses class Color to specify drawing colors and class Graphics to draw. Class JPanel again provides the area in which we draw. Line 14 in method paintComponent uses Graphics method setColor to set the current drawing color to Color.YELLOW. Method setColor requires one argument, the Color to set as the drawing color. In this case, we use the predefined object Color.YELLOW. Line 15 draws a circle with diameter 200 to represent the facewhen the width and height arguments are identical, method fillOval draws a circle. Next, line 18 sets the color to Color.Black, and lines 1920 draw the eyes. Line 23 draws the mouth as an oval, but this is not quite what we want. To create a happy face, we will "touch up" the mouth. Line 26 sets the color to Color.YELLOW, so any shapes we draw will blend in with the face. Line 27 draws a rectangle that is half the mouth's height. This "erases" the top half of the mouth, leaving just the bottom half. To create a better smile, line 28 draws another oval to slightly cover the upper portion of the mouth. Class DrawSmileyTest (Fig. 6.17) creates and displays a JFrame containing the drawing, resulting in the system calling method paintComponent to draw the smiley face.

GUI and Graphics Case Study Exercises

6.1

Using method fillOval, draw a bull's-eye that alternates between two random colors, as in Fig. 6.18. Use the constructor Color( int r, int g, int b ) with random arguments to generate random colors. Figure 6.18. A bull's-eye with two alternating, random colors.

6.2

Create a program that draws 10 random filled shapes in random colors and positions (Fig. 6.19). Method paintComponent should contain a loop that iterates 10 times. In each iteration, the loop should determine whether to draw a filled rectangle or an oval, create a random color and choose coordinates and dimensions at random. The coordinates should be chosen based on the panel's width and height. Lengths of sides should be limited to half the width or height of the window. What happens each time paintComponent is called (i.e., the window is resized, uncovered, etc.)? We will resolve this issue in Chapter 8. Figure 6.19. Randomly generated shapes. (This item is displayed on page 264 in the print version)