I recommend that you open another copy of this module in a separate browser window and use the following links to easily find and view the Images and Listings while you are reading about them.

A complete listing of the modified game-programming library named GM2D02 is provided in Listing 26 .

This library is an update of the earlier game-math library named GM2D01 . This update added the following new capabilities:

Constructors were updated to ensure that existing points, vectors, and lines are not corrupted by using the new set methods to change the values in the ColMatrix and/or Point objects originally used to construct the points, vectors, and lines. The updated constructors create and save clones of the ColMatrix and/or Point objects originally used to define the Point , Vector , and/or Line objects.

I will explain the new code in the library in conjunction with the explanations of the programs named PointLine03 and PointLine04 .

A complete listing of the program named PointLine03 is provided in Listing 27 .

This program illustrates the use of draw methods that were added to the GM2D02 game-math library to produce visual manifestations of Point , Line , and Vector objects instantiated from classes in the game-math library. The program also illustrates drawing on off-screen images and then copying those images to a Canvas object in an overridden paint method.

As mentioned earlier, this program produces the screen output shown in Image 1 .

Beginning of the class named PointLine03 and the class named GUI

Listing 1 shows the beginning of the class named PointLine03 (including the main method) and the beginning of the class named GUI .

class PointLine03{
  public static void main(String[] args){
    GUI guiObj = new GUI();
  }//end main
}//end controlling class PointLine03
//======================================================//

class GUI extends JFrame{
  //Specify the horizontal and vertical size of a JFrame
  // object.
  int hSize = 400;
  int vSize = 200;
  Image osiA;//one off-screen image
  Image osiB;//another off-screen image
  int osiWidth;//off-screen image width
  int osiHeight;//off-screen image height
  MyCanvas myCanvas;//a subclass of Canvas

The code in the main method instantiates an object of the GUI class. The code showing in the GUI class definition declares several instance variables, initializing some of them.

Beginning of the constructor for the GUI class

Listing 2 shows the beginning of the constructor for the GUI class.

  GUI(){//constructor
    //Set JFrame size, title, and close operation.
    setSize(hSize,vSize);
    setTitle("Copyright 2008,R.G.Baldwin");
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
    //Create a new drawing canvas and add it to the
    // center of the JFrame.
    myCanvas = new MyCanvas();
    this.getContentPane().add(myCanvas);
    
    //This object must be visible before you can get an
    // off-screen image.  It must also be visible before
    // you can compute the size of the canvas.
    setVisible(true);
    osiWidth = myCanvas.getWidth()/2;
    osiHeight = myCanvas.getHeight();

The code in Listing 2 is straightforward and shouldn't require an explanation beyond the embedded comments.

Create two off-screen images

Here is where things begin to get interesting. Listing 3 creates two off-screen images and gets a graphics context on each of them.

    osiA = createImage(osiWidth,osiHeight);
    Graphics2D g2Da = (Graphics2D)(osiA.getGraphics());
    
    osiB = createImage(osiWidth,osiHeight);
    Graphics2D g2Db = (Graphics2D)(osiB.getGraphics());

Java programs are not constrained to simply draw on the screen. It is possible to create an off-screen image, get a graphics context on it, and use methods of the Graphics and/or Graphics2D classes to draw on the off-screen image.

The off-screen image can then be used for a variety of purposes including:

Will copy off-screen images to the screen

In this program, we will copy each of the off-screen images to a Canvas object in a side-by-side format (see Image 1 ) and display the Canvas object on the content pane in a JFrame object.

While animation is not the purpose of using off-screen images in this program, such off-screen images are often used to produce clean animation. Code is executed to produce an off-screen image and then the entire image is copied to the screen in a single blast. This prevents the user from seeing the development of the image that might otherwise be visible if the code was executed to produce the image directly onto the screen.

The createImage method

There are seven different versions of the createImage method in the JDK 1.7 standard library. The version of the method used in this program is defined in the Component class and inherited into the JFrame class. According to the Sun documentation, this method creates an off-screen drawable image to be used for double buffering.

The two required parameters are width and height. If the image is later displayed on the screen, the units of width and height are measured in pixels. The values contained in the width and height parameters in Listing 3 were computed in Listing 2 . The width of each off-screen image is set to half the width of the canvas. The height of each off-screen image is set to the height of the canvas. This facilitates the display of the two images in the side-by-side format shown in Image 1 .

Also, according to the Sun documentation, the method returns "an off-screen drawable image, which can be used for double buffering. The return value may be null if the component is not displayable." The returned value is type Image .

The getGraphics method

There are eleven different versions of the getGraphics method in the JDK 1.7 standard library. The version of the method used in this program is defined in the Image class. This method is called on the Image object returned by the createImage method in Listing 3 .

According to the Sun documentation, this method creates a graphics context for drawing to an off-screen image. You will note that the reference to the graphics context was cast to type Graphics2D and saved in a reference variable of the type Graphics2D . I explained the relationship between the Graphics class and the Graphics2D class in an earlier module.

At this point, we have two off-screen image objects of type Image and we have a graphics context on each of them. This makes it possible to use the methods of the Graphics class and/or the methods of the Graphics2D class to draw on either of the off-screen images.

Remaining code in the constructor

Listing 4 shows the remainder of the constructor for the GUI class.

    drawOffscreen(g2Da,g2Db);

    myCanvas.repaint();

  }//end constructor

Listing 4 begins by calling the method named drawOffscreen to draw some points, lines, and vectors on the two off-screen images. Note that references to each of the two graphics contexts are passed as parameters to the drawOffscreen method.

Then Listing 4 calls the repaint method belonging to the MyCanvas object to cause the overridden paint method belonging to that object to be executed. Later, we will see that the overridden paint method copies the two off-screen images to the canvas in the side-by-side format shown in Image 1 causing the contents of those off-screen images to be displayed in a JFrame object.

Beginning of the drawOffscreen method

The beginning of the drawOffscreen method is shown in Listing 5 . The purpose of this method is to define points, lines, and vectors as underlying data objects and then to cause a visual manifestation of some of the points, lines, and vectors to be drawn onto the two off-screen images.

  void drawOffscreen(Graphics2D g2Da,Graphics2D g2Db){
    
    //Draw a label on each off-screen image.
    g2Da.drawString("Off-screen image A",
                    osiWidth/8,
                    osiHeight/8);
    g2Db.drawString("Off-screen image B",
                    osiWidth/8,
                    osiHeight/8);

Before getting into the underlying data objects, however, Listing 5 calls the drawString method belonging to the Graphics class to draw the two text strings shown in Image 1 on the two off-screen images.

Instantiate four Line objects that will be used to draw borders

Listing 6 instantiates four GM2D02.Line objects that will ultimately be used to draw the borders around the left and right images shown in Image 1 .

    //First define four points that will be used to define
    // the ends of the four lines.
    GM2D02.Point upperLeftPoint = new GM2D02.Point(
                           new GM2D02.ColMatrix(1.0,1.0));
    GM2D02.Point upperRightPoint = new GM2D02.Point(
                    new GM2D02.ColMatrix(osiWidth-1,1.0));
    GM2D02.Point lowerRightPoint = new GM2D02.Point(
            new GM2D02.ColMatrix(osiWidth-1,osiHeight-1));
    GM2D02.Point lowerLeftPoint = new GM2D02.Point(
                   new GM2D02.ColMatrix(1.0,osiHeight-1));
    
    //Now define the four lines based on the endpoints.
    GM2D02.Line top = new GM2D02.Line(upperLeftPoint,
                                      upperRightPoint);
    GM2D02.Line rightSide = new GM2D02.Line(
                                         upperRightPoint,
                                         lowerRightPoint);
    GM2D02.Line bottom = new GM2D02.Line(lowerLeftPoint,
                                         lowerRightPoint);
    GM2D02.Line leftSide = new GM2D02.Line(upperLeftPoint,
                                          lowerLeftPoint);

Nothing new here

There is nothing in Listing 6 that is new relative to what you learned in the previous module. Listing 6 starts by defining four GM2D02.Point objects that will be used to define the ends of the line segments. References to these Point objects are passed to the constructor for the GM2D02.Line class to instantiate the four Line objects.

Note that the locations of the points, and hence the positions of the lines were one pixel away from the edges of the canvas towards the center of the canvas. These locations were chosen to ensure that the resulting visual manifestations of the lines would be visible on the canvas.

It is also extremely important to understand that the GM2D02.Point and GM2D02.Line objects instantiated in Listing 6 are not graphical objects. Rather, they are underlying data objects, which are suitable for use in mathematical operations.

Draw a visual manifestation of each line

Listing 7 calls the draw method of the GM2D02.Line class four times in succession for each off-screen image. Note that a reference to the off-screen image is passed as a parameter to the draw method each time the method is called on one of the GM2D02.Line objects.

    //Now draw a visual manifestation of each line
    // on g2Da.
    top.draw(g2Da);
    rightSide.draw(g2Da);
    bottom.draw(g2Da);
    leftSide.draw(g2Da);
    
    //Now draw a visual manifestation of each of the same
    // four lines on g2Db
    top.draw(g2Db);
    rightSide.draw(g2Db);
    bottom.draw(g2Db);
    leftSide.draw(g2Db);

As you will see shortly, each of these calls to the draw method causes an object of the standard Java Line2D.Double class to be rendered onto the specified off-screen image. When the off-screen image is ultimately copied to the canvas object by the overridden paint method, this produces a visual manifestation of the GM2D02.Line object.

Once again, however, it is very important to understand that the Line2D.Double object is a graphical object and the GM2D02.Line is an underlying data object. They are completely independent objects.

Also, it is important to understand that the Line2D.Double class is a member of the standard Java library, whereas the GM2D02.Line class is a member of my special game math library named GM2D02 .

The draw method of the GM2D02.Line class

Now it's time to explain one of the methods that was added to the original game-math library named GM2D01 to produce the new library named GM2D02 . At this point, I will start switching back and forth between code in the GM2D02 library and code in the program named PointLine03 .

Listing 8 shows the draw method that was called repeatedly on the GM2D02.Line objects in Listing 7 . This code belongs to the GM2D02 library.

    public void draw(Graphics2D g2D){
      Line2D.Double line = new Line2D.Double(
                                    getTail().getData(0),
                                    getTail().getData(1),
                                    getHead().getData(0),
                                    getHead().getData(1));
      g2D.draw(line);
    }//end draw

Construct and render a Line2D.Double object on the graphics context

Listing 8 calls the getTail and getHead methods to get the x and y coordinate values (relative to the current coordinate frame) that define the ends of the line segment represented by the GM2D02.Line object on which the draw method was called.

These four values are passed as parameters to the constructor for the Java standard Line2D.Double class to define the endpoints of a Line2D.Double object.

Then the draw method of the Graphics2D class is called on the reference to the incoming graphics context parameter to cause the Line2D.Double object to be rendered onto that graphics context.

In this case, that graphics context is an off-screen graphics context. However, it could just as easily be an on-screen graphics context such as the graphics context that is received as a parameter to an overridden paint method.

Hallmarks of object-oriented programming

An object of the GM2D02.Line class knows how to produce a visual manifestation of itself onto a specified graphics context as illustrated by the borders surrounding the left and right images in Image 1 .

This is one of the hallmarks of object-oriented programming. Objects know how to do useful things for themselves. Later on, we will see other hallmarks such as the ability of an object of the GM2D02.Vector class to add itself to another object of the same class and return a new vector object that is the sum of the two vectors.

Draw a visual manifestation of a GM2D02.Point object

Returning to the drawOffScreen method of the program named PointLine03 , Listing 9 begins by calling the translate method of the Graphics class on the off-screen image shown in the left side of Image 1 for the purpose of changing the origin from the upper-left corner of the graphics context to the center of the graphics context.

    g2Da.translate(osiWidth/2.0,osiHeight/2.0);
    
    GM2D02.Point origin = new GM2D02.Point(
                           new GM2D02.ColMatrix(0.0,0.0));
    origin.draw(g2Da);

This is equivalent to changing the coordinate frame described by Kjell and discussed in the previous module.

Then the code in Listing 9 defines a GM2D02.Point object located at the origin of the new coordinate frame and calls the draw method on that object to produce the visual manifestation of the object in the center of the left image in Image 1 .

Once again, the GM2D02.Point object is an underlying data object. The visual manifestation will be produced by an object of the Java standard class named Ellipse2D.Double , which will be a completely independent object.

The draw method of the GM2D02.Point class

Listing 10 shows the draw method that was added to the GM2D02.Point class to produce the updated game-math library. This method draws a small circle around the location of the point on the specified graphics context.

    public void draw(Graphics2D g2D){
      Ellipse2D.Double circle = 
                        new Ellipse2D.Double(getData(0)-3,
                                             getData(1)-3,
                                             6,
                                             6);
      g2D.draw(circle);
    }//end draw

The logic behind this method is very similar to the logic that I explained relative to Listing 8 . The constructor for the Java standard Ellipse2D.Double class requires four incoming parameters that specify the coordinates of the upper-left corner of a rectangle followed by the width and the height of the rectangle. The new object of type Ellipse2D.Double represents an ellipse that is bounded by the four sides of the rectangle. If the rectangle is square, the ellipse becomes a circle.

(In this case, the rectangle is a 6x6 square, thus producing a circle with a diameter of six pixels.)

Listing 10 calls the draw method of the Graphics2D class to render the ellipse (circle) at the specified location on the graphics context specified by the incoming parameter. Thus the code in Listing 9 produces a visual manifestation of a point at the origin of the current coordinate frame. The visual manifestation consists of a small circle centered on the location of the point, resulting in the small circle at the center of the left image in Image 1 .

Draw the vertices of a hexagon

Returning once more to the drawOffScreen method of the program named PointLine03 , Listing 11 instantiates six GM2D02.Point objects that represent the vertices of a hexagon that is symmetrically located relative to the origin in the current coordinate frame

    //First define three constants to make it easier to
    // write the code.
    final double aVal = osiWidth/4.0*0.5;
    final double bVal = osiWidth/4.0*0.866;
    final double cVal = osiWidth/4.0;
    //Now define the points.
    GM2D02.Point point0 = new GM2D02.Point(
                          new GM2D02.ColMatrix(cVal,0.0));
    GM2D02.Point point1 = new GM2D02.Point(
                         new GM2D02.ColMatrix(aVal,bVal));
    GM2D02.Point point2 = new GM2D02.Point(
                        new GM2D02.ColMatrix(-aVal,bVal));
    GM2D02.Point point3 = new GM2D02.Point(
                         new GM2D02.ColMatrix(-cVal,0.0));
    GM2D02.Point point4 = new GM2D02.Point(
                       new GM2D02.ColMatrix(-aVal,-bVal));
    GM2D02.Point point5 = new GM2D02.Point(
                        new GM2D02.ColMatrix(aVal,-bVal));
    
    //Now draw a visual manifestation of each of the six
    // points on g2Da.
    point0.draw(g2Da);
    point1.draw(g2Da);
    point2.draw(g2Da);
    point3.draw(g2Da);
    point4.draw(g2Da);
    point5.draw(g2Da);

Then Listing 11 calls the draw method of the GM2D02.Point class six times in succession to cause small circles that represent the six points to be rendered on the specified off-screen image. You can see those six circles in the left image in Image 1 .

Draw six lines connecting the vertices of the hexagon

Listing 12 instantiates six objects of the GM2D02.Line class whose endpoints are specified by the six GM2D02.Point objects from Listing 11 , taken in pairs.

    GM2D02.Line line01 = new GM2D02.Line(point0,point1);
    GM2D02.Line line12 = new GM2D02.Line(point1,point2);
    GM2D02.Line line23 = new GM2D02.Line(point2,point3);
    GM2D02.Line line34 = new GM2D02.Line(point3,point4);
    GM2D02.Line line45 = new GM2D02.Line(point4,point5);
    GM2D02.Line line50 = new GM2D02.Line(point5,point0);

    //Now draw a visual manifestation of each line
    // on g2Da.
    line01.draw(g2Da);
    line12.draw(g2Da);
    line23.draw(g2Da);
    line34.draw(g2Da);
    line45.draw(g2Da);
    line50.draw(g2Da);

Then Listing 12 calls the draw method belonging to the GM2D02.Line class six times in succession to cause visible lines to be rendered on the specified off-screen image. You can see those six lines in the left image in Image 1 .

That completes the drawing that is performed on the off-screen image shown in the left image in Image 1 . Next I will explain the drawing that is performed on the off-screen image that is shown as the right image in Image 1 .

Instantiate three objects of type GM2D02.Vector

According to Kjell, "A vector is a geometrical object that has two properties: length and direction ." He also tells us, "A vector does not have a position."

The right image in Image 1 shows visual manifestations of three different objects of the GM2D02.Vector class. One vector is represented as a red line with a small red circle at its head. A second vector is represented as a blue line with a small blue circle at its head. The third vector is shown in three different positions represented by green lines with small green circles at their heads.

Listing 13 instantiates three objects of the GM2D02.Vector class, which are visually represented by the red, green, and blue lines in Image 1 . References to these three objects are saved in the variables named vecA , vecB , and vecC in Listing 13 .

    GM2D02.Vector vecA = new GM2D02.Vector(
                            new GM2D02.ColMatrix(50,100));
    GM2D02.Vector vecB = new GM2D02.Vector(
                             new GM2D02.ColMatrix(75,25));
    GM2D02.Vector vecC = new GM2D02.Vector(
                           new GM2D02.ColMatrix(125,125));

Note that each vector is described by two values in a GM2D02.ColMatrix object.

Call the draw method to draw the vector

Listing 14 begins by setting the drawing color to red for the off-screen image on which the visual manifestation of the first Vector object will be drawn. Then Listing 14 calls the draw method of the GM2D02.Vector class to cause the object referred to by vecA to be represented as a (red) line with its tail at the origin. (Unlike the image on the left side of Image 1 , the origin for the image on the right was not translated to the center.)

    g2Db.setColor(Color.RED);
      
    vecA.draw(g2Db,new GM2D02.Point(
                              new GM2D02.ColMatrix(0,0)));

Note that two parameter are passed to the draw method in Listing 14:

Remember that according to Kjell, a vector doesn't have a position. Hence, there is nothing in the underlying data for a GM2D02.Vector object that specifies a position. In other words, the visual manifestation of a vector can be placed anywhere in space, and one placement is just as correct as the next. However, if you become heavily involved in the use of vectors, you will learn that certain placements may be preferable to others in some cases so as to better represent the problem being modeled by the use of vectors.

The draw method of the GM2D02.Vector class

Switching once again to the GM2D02 library, Listing 15 shows the draw method that was added to the GM2D02.Vector class. This method is a little longer than the draw methods that I explained earlier for points and lines. This is mainly because:

This method renders a visual manifestation of a GM2D02.Vector on the specified graphics context, with the tail of the vector located at a point specified by the contents of a GM2D02.Point object. A small circle is drawn to visually identify the head of the vector.

    public void draw(Graphics2D g2D,GM2D02.Point tail){
      Line2D.Double line = new Line2D.Double(
                       tail.getData(0),
                       tail.getData(1),
                       tail.getData(0)+vector.getData(0),
                       tail.getData(1)+vector.getData(1));

    //Draw a small circle to identify the head.
      Ellipse2D.Double circle = new Ellipse2D.Double(
                      tail.getData(0)+vector.getData(0)-2,
                      tail.getData(1)+vector.getData(1)-2,
                      4,
                      4);
      g2D.draw(circle);
      g2D.draw(line);
    }//end draw

Why a circle and not an arrowhead?

When we draw vectors, (particularly when drawing by hand) , we often draw a small arrowhead at the head of the vector. Remember, a vector has only two properties: length and direction . The arrowhead normally points in the direction indicated by the direction property. However, there is nothing magic about an arrowhead. Circles are much easier to draw with a computer than arrowheads. As long as you can identify the head of the vector, you can always determine the direction. Although I didn't give a lot of thought to optimization when developing this library, this is one case where I took the approach that is likely to consume the minimum amount of computational resources.

In Image 1 , the length of each of the lines in the right image indicates the length property of the respective vector, and the small circle indicates the head. The orientation relative to the current coordinate frame represents the direction .

Beyond that, further explanation of the code in Listing 15 should not be required.

Three visual manifestations of the same vector

Returning again to the drawOffScreen method of the program named PointLine03 , Listing 16 produces three visual manifestations at three different positions for the same Vector object referred to by the reference variable named vecB . All three of the visual manifestations are colored green in Image 1 .

    g2Db.setColor(Color.GREEN);
    vecB.draw(g2Db,new GM2D02.Point(new GM2D02.ColMatrix(
                       vecA.getData(0),vecA.getData(1))));
    vecB.draw(g2Db,new GM2D02.Point(new GM2D02.ColMatrix(
                 vecA.getData(0)-10,vecA.getData(1)+15)));
    vecB.draw(g2Db,new GM2D02.Point(new GM2D02.ColMatrix(
                 vecA.getData(0)+10,vecA.getData(1)-60)));

This is a perfectly legitimate thing to do since the underlying data encapsulated in the Vector object does not contain any information relating to the position of the visual manifestation.

In one visual manifestation, Listing 16 causes the tail of vecB to coincide with the head of vecA . This is one of those cases where drawing the vector in one position is preferable to drawing it in a different position. Later on when we get into the topic of vector addition, I will explain that one way to perform graphical addition of vectors is to position the vectors in a tail-to-head relationship as indicated by the red and green vectors in Image 1 . The sum of the vectors can then be determined graphically by drawing a line from the tail of the first vector to the head of the last vector as indicated by the blue line in Image 1 . The length of the sum (or resultant) vector is indicated by the length of that line, and the direction of the resultant vector is indicated by the orientation of that line.

A practical example

This is the solution to a classical problem in a freshman engineering class. Assume that a boat is traveling diagonally across a river with a strong current. Assume that the green vector in Image 1 represents the speed and direction of the current in the river. Assume that the red vector represents the speed and direction that the boat would travel if there were no current. Because of the effect of the current on the boat, the actual speed and direction of the boat will be given by the blue vector, which is different from the speed and direction indicated by the red vector. If the blue vector is pointing at the desired landing point on the other side of the river, everything is okay. Otherwise, the captain needs to change the speed and/or the direction of the boat to compensate for the effect of the current on the boat.

Draw the blue vector

Listing 17 produces the blue visual manifestation of the Vector object referred to by vecC as shown in Image 1 .

    g2Db.setColor(Color.BLUE);
    vecC.draw(g2Db,new GM2D02.Point(
                              new GM2D02.ColMatrix(0,0)));

  }//end drawOffscreen

Listing 17 also signals the end of the method named drawOffscreen .

The MyCanvas class and the overridden paint method

Listing 18 shows the entire inner class named MyCanvas including the overridden paint method belonging to that class.

  //This is an inner class of the GUI class.
  class MyCanvas extends Canvas{
    public void paint(Graphics g){
      g.drawImage(osiA,0,0,this);
      g.drawImage(osiB,this.getWidth()/2,0,this);
    }//end overridden paint()
    
  }//end inner class MyCanvas
    
}//end class GUI

The overridden paint method will be called when the JFrame and the Canvas appear on the screen or when the repaint method is called on the Canvas object.

The method is also called when some screen activity requires the JFrame to be redrawn (such as minimizing and then restoring the JFrame ) .

The purpose of the paint method in this program is to call the drawImage method twice in succession to draw the two off-screen images on the screen in the side-by-side format shown in Image 1 .

The first parameter to the drawImage method is the off-screen image that is to be drawn on the canvas. The second and third parameters specify the location where the upper-left corner of the image will be drawn.

The fourth parameter is a reference to an ImageObserver object, which is essentially a dummy image observer in this case, because an actual image observer isn't needed. (To learn more about image observers, see The AWT Package, Graphics- Introduction to Images .)

End of the program

Listing 18 also signals the end of the GUI class and the end of the program named PointLine03 ..

A complete listing of this program is provided in Listing 28 . Just like the previous program named PointLine03 , this program produces the screen output shown in Image 1 . However, it produces that output in a significantly different way.

This program emphasizes the differences between graphics objects and underlying data objects. It also illustrates the use of the new setData methods of the Point class and the Vector class, along with the new setTail and setHead methods of the Line class. These methods were added to the game-math library when it was updated to the GM2D02 version.

Dealing with some vulnerabilities

The addition of the new set methods exposed some vulnerabilities in the original version of the game-math library. I will explain how the code in the library was modified to deal with that issue. In particular, constructors were updated to ensure that existing points, vectors, and lines are not corrupted by using the new set methods to change the values in the ColMatrix and/or Point objects originally used to construct the points, vectors, and lines. The updated constructors create and save clones of the ColMatrix and/or Point objects originally used to define the Point , Vector , and/or Line objects.

Will explain the code in fragments

As before, I will explain the code in fragments. Some of the code in this program is identical to or very similar to code that I have already explained in the program named PointLine03 . I won't repeat that explanation. Instead, I will concentrate on the differences between the two programs.

The setData method of the ColMatrix class

The new setData method of the ColMatrix class is shown in Listing 19 . Note that this code is part of the GM2D02 library. At this point, I will begin switching back and forth between the library and the program named PointLine04 .

    public void setData(int index,double data){
      if((index < 0) || (index > 1)){ 
        throw new IndexOutOfBoundsException();
      }else{
        this.data[index] = data;
      }//end else
    }//end setData method

This is a very simple method, which should not require further explanation. I am presenting it here mainly for the purpose of leading into a discussion of the vulnerabilities that this method could expose on Point and Vector objects instantiated from the original math class named GM2D01 ,

You may recall from the module titled Getting Started that the constructor for the Point class in the original library received and saved a reference to an object of the ColMatrix class that contained the two values required to define the Point . Now that it is possible to change the values stored in an object of the ColMatrix class, if such an object is used to instantiate an object of the Point class and then the values stored in the ColMatrix object are changed, the values that define the Point object will change accordingly. That is not good.

Updated constructor for the Point class in GM2D02

Continuing with code in the GM2D02 library, Listing 20 shows the updated constructor in the new version of the library.

  public static class Point{
    GM2D02.ColMatrix point;
    
    Point(GM2D02.ColMatrix point){//constructor
      this.point = 
         new ColMatrix(point.getData(0),point.getData(1));
    }//end constructor

The new version of the constructor for the Point class creates and saves a clone of the ColMatrix object used to define the point to prevent the point from being corrupted by a later change in the values stored in the original ColMatrix object through the use of its new setData method.

Updated constructor for the Vector class in GM2D02

Because the constructor for the Vector class in the original library was essentially the same as the constructor for the Point class, the addition of the setData method to the ColMatrix class created the same vulnerability for objects instantiated from the Vector class. Essentially the same correction was made for the constructor for the Vector class. You can view the new code in Listing 26 .

Additional changes to the library

In addition to the changes described above, the following changes were made to the game-math library to update it from version GM2D01 to GM2D02 . All of the changes were straightforward and shouldn't require an explanation beyond the embedded comments. You can view the new code for all of these changes in Listing 26 .

The drawOffscreen method of the program named PointLine04

Most of the differences between the programs named PointLine03 and PointLine04 occur in the method named drawOffscreen . I will concentrate my discussion there.

Switching now to code in the program named PointLine04 , the drawOffscreen method begins in Listing 21 .

  void drawOffscreen(Graphics2D g2Da,Graphics2D g2Db){

    //Draw a label on each off-screen image.
    g2Da.drawString("Off-screen image A",
                    osiWidth/8,
                    osiHeight/8);
    g2Db.drawString("Off-screen image B",
                    osiWidth/8,
                    osiHeight/8);

As before, the purpose of the drawOffscreen method is to define points, lines, and vectors and then to cause a visual manifestation of some of the points, lines, and vectors to be drawn onto two separate off-screen images. Unlike before, however, this version of the method uses a minimum number of underlying data objects to produce the output, thereby emphasizing the differences between graphics objects and underlying data objects.

The code in Listing 21 is essentially the same as before and doesn't require any explanation.

Borders

As before, and as shown in Image 1 , this method draws borders on each of the off-screen images by drawing lines parallel to the edges of the off-screen images. Each line is offset by one pixel toward the center of the off-screen image.

Instantiate a point at the upper-left corner

Listing 22 instantiates and saves an underlying data object of type Point containing coordinate values for the upper left corner. This object will be used as one endpoint for a moveable Line object from which the top and left borders will be drawn.

    GM2D02.Point upperLeftPoint = new GM2D02.Point(
                           new GM2D02.ColMatrix(1.0,1.0));

Instantiate a moveable Point object

Listing 23 instantiates a Point object that will be used as an endpoint for a moveable line in all four locations.

    GM2D02.Point aPoint = new GM2D02.Point(
         new GM2D02.ColMatrix(osiWidth-1,
                              upperLeftPoint.getData(1)));

The location of this point will be modified several times during the drawing of the border by calling the setData method on the point. The initial location of this point is the upper-right corner. (Recall that the origin is at the upper-left corner of both off-screen images at this point in the program.) The call to the Point constructor causes the y-coordinate to be the same as the y-coordinate for the Point object instantiated in Listing 22 .

Instantiate a moveable Line object

Listing 24 instantiates a Line object that will be modified several times in succession by calling its setHead and setTail methods to place it in four different locations.

    GM2D02.Line theLine = new GM2D02.Line(
                                   upperLeftPoint,aPoint);
    theLine.draw(g2Da);
    theLine.draw(g2Db);

This Line object will be used to draw the top, right, bottom, and left lines that make up the border. It is used in Listing 24 to cause a graphical Line2D.Double object to be instantiated and rendered as the line at the top of both of the off-screen images.

Relocate the Line to three more locations

Listing 25 calls various methods of the Point and Line classes (including setData , setTail , and setHead ) to relocate the GM2D02.Line object to three more locations, each parallel to an edge of an off-screen image.

    //Draw right border.
    //Save the previous head as the new tail.
    theLine.setTail(theLine.getHead());
    //Modify the location of aPoint. There's no need to
    // change the x-coordinate. Just change the
    // y-coordinate to move the point down the screen in
    // the positive y direction to the lower-right corner.
    aPoint.setData(1,osiHeight-1);
    //Use the new location of aPoint as the new head.
    theLine.setHead(aPoint);
    theLine.draw(g2Da);
    theLine.draw(g2Db);
    
    //Draw bottom border. There's no need to change the
    // y-coordinate in the new point, which is located
    // at the lower-left corner.
    theLine.setTail(theLine.getHead());
    aPoint.setData(0,1.0);
    theLine.setHead(aPoint);
    theLine.draw(g2Da);
    theLine.draw(g2Db);

    //Draw left border to close the rectangular border.
    theLine.setTail(theLine.getHead());
    theLine.setHead(upperLeftPoint);
    theLine.draw(g2Da);
    theLine.draw(g2Db);

Draw the border

While the single GM2D02.Line object is at each location, draw methods are called to cause a Line2D.Double object to be instantiated and rendered on each of the off-screen images. This results in four different visual manifestations of the single GM2D02.Line object, producing visible lines at the edges of each off-screen image. Although this code is not particularly straightforward, the embedded comments should suffice to explain it.

Draw the hexagon

Essentially the same process is used to draw the hexagon shown in the left image in Image 1 . You can view the code that does that in Listing 28 . Once you understand the code that I explained above, you should have no difficulty understanding the code that draws the hexagon.

Draw the vectors

A very similar process is used to draw the vectors shown in the right image in Image 1 . You can view the code in Listing 28 . Once again, if you understand the code that I explained above, you should have no difficulty understanding the code that draws the vectors.

That ends the explanation of the program named PointLine04 .

Using Java and the game-math library named GM2D02 , or using a different programming environment of your choice, write a program that draws a horizontal line segment and a vertical line segment representing the x and y axes in a 2D Cartesian coordinate system as shown in Image 2 .

Cause the origin of your reference frame be at the center of your drawing.

Cause the positive x direction be to the right.

Cause the positive y direction be either up or down according to your choice.

Cause the program to display your name in some manner.

30

Image 2: Graphic output from Exercise 1.

Using Java and the game-math library named GM2D02 , or using a different programming environment of your choice, write a program that draws x and y axes in a 2D Cartesian coordinate system as shown in Image 3 .

Cause the origin of your reference frame be at the center of your drawing.

Cause the positive x direction be to the right.

Cause the positive y direction be either up or down according to your choice.

Then draw small circles that represent the locations of points at the following coordinates in the reference frame as shown in Image 3 .

Cause the program to display your name in some manner.

31

Image 3: Graphic output from Exercise 2.

Using Java and the game-math library named GM2D02 , or using a different programming environment of your choice, write a program that draws x and y axes in a 2D Cartesian coordinate system as shown in Image 4 .

Cause the origin of your reference frame be at the center of your drawing.

Cause the positive x direction be to the right.

Cause the positive y direction be either up or down according to your choice.

Create six random values in the range from -128 to +127. Use those values as the x and y coordinates for three points in the 2D reference frame. (The code fragment in Listing 29 shows how to generate random values in the required range in Java.)

Display the six values on a text screen labeled in such a way that it is possible to associate the values with the points as shown in Image 5 .

Draw three small circles that represent the locations of the points.

Draw three line segments that connect the three points in pairs creating the shape of a triangle.

Cause the program to display your name in some manner.

32

Image 4: Graphic output from Exercise 3.

.

point0X: -55
point0Y: 17
point1X: 9
point1Y: -37
point2X: 14
point2Y: 62

.

    //Define three randomly located points.
    Random generator = new Random(new Date().getTime());
    point0X = (byte)generator.nextInt();
    point0Y = (byte)generator.nextInt();
    point1X = (byte)generator.nextInt();
    point1Y = (byte)generator.nextInt();
    point2X = (byte)generator.nextInt();
    point2Y = (byte)generator.nextInt();

Using Java and the game-math library named GM2D02 , or using a different programming environment of your choice, write a program that draws three small circles that represent the locations of points at the following coordinates in a 2D reference frame.

Then draw three line segments that extend from edge-to-edge of your drawing and intersect the three points in pairs as shown in Image 6 .

Cause the origin of your reference frame be at the center of your drawing.

Cause the positive x direction to be to the right.

Cause the positive y direction be either up or down according to your choice.

Cause the program to display your name in some manner.

35

Image 6: Graphic output from Exercise 4.

Using Java and the game-math library named GM2D02 , or using a different programming environment of your choice, write a program that draws 24 vectors tail-to-tail in alternating colors of red, green, and blue as shown in Image 7 .

The first vector is red.

The length of each vector is 100 pixels.

The direction of the first vector is +7.5 degrees relative to the horizontal.

The direction of each successive vector is increased by 15 degrees.

For example, the directions of the first four vectors are:

Draw the symbol of your choice to identify the head of each vector.

Draw the axes for a Cartesian coordinate system in the reference frame.

Cause the positive x direction to be to the right.

Cause the positive y direction be either up or down according to your choice.

Cause positive angles to be either clockwise or counter-clockwise according to your choice.

Cause the program to display your name in some manner.

36

Image 7: Graphic output from Exercise 5.

Using Java and the game-math library named GM2D02 , or using a different programming environment of your choice, write a program that draws 24 vectors tail-to-head in alternating colors of red, green, and blue as shown in Image 8 .

The first vector is red.

The length of each vector is approximately 17 pixels.

Draw the symbol of your choice to identify the head of each vector.

Draw the axes for a Cartesian coordinate system in the reference frame.

Cause the positive x direction to be to the right.

Cause the positive y direction be either up or down according to your choice.

Cause positive angles to be either clockwise or counter-clockwise according to your choice.

Cause the program to display your name in some manner.

37

Image 8: Graphic output from Exercise 6.

Using Java and the game-math library named GM2D02 , or using a different programming environment of your choice, write a program that draws 24 vectors tail-to-head in alternating colors of red, green, and blue as shown in Image 9 .

The first vector is red.

Begin with a length of 24 pixels for the first vector and reduce the length of each successive vector by one pixel.

Draw the symbol of your choice to identify the head of each vector.

Draw the axes for a Cartesian coordinate system in the reference frame.

Cause the positive x direction to be to the right.

Cause the positive y direction be either up or down according to your choice.

Cause positive angles to be either clockwise or counter-clockwise according to your choice.

Cause the program to display your name in some manner.

38

Image 9: Graphic output from Exercise 7.

-end-