Java Student Project         

Fireworks
Ability Level: Intermediate
Estimated Time: 45 minutes
Objectives: · Learn how to draw arcs and polygons.

· Learn how to draw three dimensional rectangles.

· Learn more about fonts and their methods.

· Learn how to copy an area.

· Create simple animation.

· Learn to use the Microsoft MSDN on line Library
http://msdn.microsoft.com/library/devprods/vs6/visualj/vjcore/vjstartpage.htm

Materials & Resources:
  • Java Software
  • Textbook
Overview:

Class java.awt.Graphics

java.lang.Object
   |
   +----java.awt.Graphics

public
abstract class Graphics
extends Object

The
Graphics class is the abstract base class for all graphics contexts
that
 allow an application to draw onto components that are realized on various 
devices, as well as onto off-screen images.

A Graphics object encapsulates state information needed for the basic rendering operations that Java supports. This state information includes the following properties:

  • The Component object on which to draw.
  • A translation origin for rendering and clipping coordinates.
  • The current clip.
  • The current color.
  • The current font.
  • The current logical pixel operation function (XOR or Paint).
  • The current XOR alternation color (see setXORMode).

Coordinates are infinitely thin and lie between the pixels of the output device. Operations which draw the outline of a figure operate by traversing an infinitely thin path between pixels with a pixel-sized pen that hangs down and to the right of the anchor point on the path. Operations which fill a figure operate by filling the interior of that infinitely thin path. Operations which render horizontal text render the ascending portion of character glyphs entirely above the baseline coordinate.

The graphics pen hangs down and to the right from the path it traverses. This has the following implications:

  • If you draw a figure that covers a given rectangle, that figure occupies one extra row of pixels on the right and bottom edges as compared to filling a figure that is bounded by that same rectangle.
  • If you draw a horizontal line along the same y coordinate as the baseline of a line of text, that line is drawn entirely below the text, except for any descenders.

All coordinates which appear as arguments to the methods of this Graphics object are considered relative to the translation origin of this Graphics object prior to the invocation of the method. All rendering operations modify only pixels which lie within the area bounded by both the current clip of the graphics context and the extents of the component used to create the Graphics object. All drawing or writing is done in the current color, using the current paint mode, and in the current font.

For simple applets, the default paint() method actually paints the canvas with all of the objects (buttons, text boxes, and so on) which were created in the init() method. The programmer is allowed to write their own paint() method which will paint using all of the objects created, but which will also allow the programmer to paint additional graphical objects. Remind students that they are able to use variables in the paint method which allows them to change the position and/or size of an object.

A simple arc is just a portion of an ellipse, where a filled arc is a pie-shaped wedge of an ellipse. Use graph paper to reinforce the concepts of the degree positions and the rotation. It is counter-intuitive to think of positive rotation as counter-clockwise. 3 o’clock is 0 degrees and 12 o’clock is 90 degrees.

The best way to reinforce the concept of polygons is to draw several of them on graph paper, note the list of coordinates and create those shapes in an applet.

Review the concepts of the font measurement (points = 1/72 of an inch) and pixels (screen measurement). Note the difference between these types of measurements.

Review the different sets of fonts on different machines.
Instructions: A. Use polygons and lines to create a graphics image that looks like a fireworks display. Write an applet that displays the fireworks.

B. Add a Button to the Fireworks applet. Do not show the fireworks until the user clicks the Button.
Hints: Some important points to keep in mind in doing this project:

I. Creating arcs

      A. An arc is a portion of a circle. In the Graphics package, an arc is any portion of an oval figure, and ovals are defined by the imaginary rectangle that contains the oval.

      B. You can draw either an outline of an arc or a filled arc (a solid figure). These can be done using the drawArc() and the fillArc() methods, respectively.

These are Graphics methods that require a Graphics object, and they use the current color for the shape.

     C. The arguments of the drawArc() and the fillArc() methods are as follows:

      · the x-coordinate of the upper left corner of the imaginary rectangle that contains the imaginary circle that contains the arc

      · the y-coordinate of the same point

      · the width of that imaginary rectangle.· the height of that imaginary rectangle

      · the beginning arc position

      · the number of degrees of the angle defining the arc

II. Three dimensional rectangles

      A. The draw3DRect() method draws a rectangle which appears to have dimensionality.

gr.draw3Drect(x, y, w, h, boolean);

      B. The argument list includes the x and y coordinates, and the height and width, identical to the drawRect() method. The fifth argument is a boolean (true or false) which has the effect of:

      · true – raised rectangle (darker on the bottom and right)

      · false – lowered rectangle (darker on the top and left)

      C. Three-dimensional rectangles work best with lighter colors.

III. Using the polygon method to create complex figures:

      A. A polygon is a many sided geometric figure. In order to draw figures more complex than rectangles, ovals and arcs, you must use the drawPolygon() or the fillPolygon() methods. As with the other shape methods, these are Graphics methods which must be used with a Graphics object, and the draw creates a figure outline in the current color and the fill creates a solid shape in the current color.

      B. The syntax of the polygon method is:

gr.drawPolygon(x-points, y-points, array_length);

Where the arguments are:

      · x-points: an array of x-coordinates for the points of the polygon.

      · y-points: an array of y-coordinates for the points of the polygon. The nth point in this array is the matching y coordinate for the nth point in the x array.

      · array_length – since all points have an x and a y coordinate, these two arrays must be of the same length. This length represents the number of points.

      C. If the first point of the array is the exact same point as the last point of the array, the figure is a closed figure. The polygon need not be a closed figure. However, if the filled polygon is not a closed figure, a line is drawn from the first point to the last point to close the figure.

      D. A polygon with no points can be created. Points may then be added to this figure by the someFigure.addPoint(x, y); method. This allows interactive drawing of shapes.

IV. Copying an area:

      A. Once a graphics object has been created, that object can be copied to another part of the screen. This can save on coding.

      B. The copyArea() method is a Graphics method, and the syntax is:

gr.copyArea(x, y, w, h, x-displacement, y-displacement)

Where the arguments are:

      · x is the x-coordinate of the area to be copied.

      · y is the y-coordinate of the area to be copied.

      · w is the width of the area to be copied.

      · h is the height of the area to be copied.

      · x-displacement is the horizontal displacement of the area to be copied.

      · y-displacement is the vertical displacement of the area to be copied.

V. Using Font methods:

      A. Each system has a different set of fonts available. The Toolkit class has several helpful methods, including the getFontList() method, which returns an array of type String. The array contains the font name of every font on the current system. The syntax of this method is:

String availableFonts [ ] = Toolkit.getDefaultToolkit().getFontList();

      B. Strings have dimensionality when they are drawn on a canvas. There are three components of the height of the string,:

      · Leading (pronounced "ledding") – The height of white space above a line of text.

      · Ascent – The height of the space from the baseline to the top of an upper case character.

      · Descent – The height of the "hang" below the baseline of letters such as lower case y.

      · Height – The sum of Leading + Ascent + Descent.

These four measurements are done in pixels. This is different than points, which is how you set the font size.

      C. Each of the measurements have a method which will return the actual number of pixels for a particular font and font size. Once a font has been defined and set, the following methods return an integer value for each of the above measurements:.int leading = gr.getFontMetrics().getLeading();

int ascent = gr.getFontMetrics().getAscent ();

int descent = gr.getFontMetrics().getDescent();

int height = gr.getFontMetrics().getHeight ();

      D. The above methods give a measure of height for a particular font. The width of a string depends on the actual string being measured. If the following string is defined:

String myString = new String("This is my string");

To measure the absolute width of the string in the current font:

int width = gr.getFontMetrics().stringWidth(myString);

VI. Simple animation:

      A. Simple animation in Java Applets can be accomplished by creating a series of images that are successively painted on the screen, either through some action or through a loop of some sort.

Extra: