Skip to content Skip to navigation

Connexions

You are here: Home » Content » GAME 2302-0120: Visualizing Column Matrices

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

GAME 2302-0120: Visualizing Column Matrices

Module by: Richard Baldwin. E-mail the author

Summary: Learn how to display column matrices in a graphical format to make it easier to visualize them.

Preface

This module is one in a collection of modules designed for teaching GAME2302 Mathematical Applications for Game Development at Austin Community College in Austin, TX.

What you have learned

In the previous module, you learned:

  • How to compare column matrices for equality
  • How to compare two points for equality
  • How to compare two vectors for equality
  • How to add one column matrix to another
  • How to subtract one column matrix from another
  • How to get a displacement vector from one point to another.

What you will learn

In this module, you will learn how to display column matrices in a graphical format. This may help you to get a better grasp of the nature of column matrices and the results of adding, subtracting, and comparing them.

Viewing tip

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.

Images

Listings

  • Listing 1 . Beginning of the method named displayColumnMatrices.
  • Listing 2 . Use the slider values to create the two matrices.
  • Listing 3 . Add and subtract the matrices.
  • Listing 4 . Display text information about the matrices.
  • Listing 5 . Create mathematical points.
  • Listing 6 . Create mathematical displacement vectors.
  • Listing 7 . Produce a graphical representation of the displacement vectors.
  • Listing 8 . Source code for the program named ColMatrixVis01.

Preview

Abstract mathematical concepts are often easier to grasp if you can visualize them in graphical format. For example, the nature of the following equation often becomes more apparent once you learn that it is the equation of a straight line.

y = m*x + b

Similarly, the nature of the following equation often becomes more apparent once you learn that it is the equation of a parabola and you learn the general shape of a parabola.

y = x^2 + k

where x^2 indicates x raised to the second power.

As mentioned earlier, in this module, you will learn how to display column matrices in a graphical format. This may help you to get a better grasp of the nature of column matrices and the results of adding, subtracting, and comparing them.

I will present and explain an interactive program that behaves as follows:

Two column matrices are created using values obtained from the sliders shown at the bottom of Image 1 . One matrix is named redMatrix and the other matrix is named greenMatrix .

1
Image 1: Sample graphical program output.
Missing image.

Two additional column matrices are created by adding and subtracting the original matrices. The matrix created by adding the red and green matrices is named blueMatrix . The matrix created by subtracting the green matrix from the red matrix is named orangeMatrix .

Mathematical points are created to represent the values in the four matrices in a 2D reference frame. Then, mathematical displacement vectors are created for each of the points relative to the origin.

Graphical objects are created for each of the four displacement vectors and those objects are drawn along with Cartesian coordinate axes in the 2D reference frame.

The vectors are shown in the top portion of Image 1 . The red and green vectors represent the red and green matrices. The blue and orange vectors represent the sum and the difference of the red and green matrices.

Text output is displayed to show the matrix values as well as whether the two original matrices are equal. The text values corresponding to the vectors in Image 1 are shown in Image 2 .

2
Image 2: Text output from the program. 

redMatrix = 53.0,53.0
greenMatrix = 79.0,-66.0
redMatrix equals greenMatrix: false
blueMatrix = redMatrix + greenMatrix = 132.0,-13.0
orangeMatrix = redMatrix - greenMatrix = -26.0,119.0

If you carefully adjust the sliders so that the two values contained in the redMatrix are the same as the two values contained in the greenMatrix , the red and green vectors will overlay as shown in Image 3 and the third line of output text will show true as shown in Image 4 . In this case, only the green vector and part of the blue (sum) vector are visible. The red vector is covered by the green vector, and the orange (difference) vector has a zero length.

3
Image 3: Graphical output for equal vectors.
Missing image.

.

4
Image 4: Text output for equal vectors. 

redMatrix = 100.0,100.0
greenMatrix = 100.0,100.0
redMatrix equals greenMatrix: true
blueMatrix = redMatrix + greenMatrix = 200.0,200.0
orangeMatrix = redMatrix - greenMatrix = 0.0,0.0

There are many other interesting combinations that I could show. However, I will leave it as an exercise for the student to copy, compile, and run the program and use the sliders to experiment with different matrix values.

I will also provide an exercise for you to complete on your own at the end of the module. The exercise will concentrate on the material that you have learned in this module and previous modules.

Discussion and sample code

Because of its interactive nature, much of the code in this program is at a complexity level that is beyond the scope of this course. However, most of the interesting work is done in the method named displayColumnMatrices and I will concentrate on explaining that method.

You can view a complete listing of the program named ColMatrixVis01 in Listing 8 near the end of the module.

Note that the program requires access to the game library named GM2D03 . The source code for that library was provided in the earlier module titled GAME2302-0115: Working with Column Matrices, Points, and Vectors and you can copy it from there.

The method named displayColumnMatrices

The purpose of this method is to:

  1. Create two column matrices named redMatrix and greenMatrix using values obtained from sliders.
  2. Create two more column matrices named blueMatrix and orangeMatrix by adding and subtracting the red and green matrices.
  3. Display text information about the matrices including whether or not the red and green matrices are equal.
  4. Create mathematical points in a 2D coordinate frame that represent the values in the matrices.
  5. Create mathematical displacement vectors that represent the displacements of each of the points relative to the origin.
  6. Create and draw graphics objects that represent each of the mathematical displacement vectors along with Cartesian coordinate axes for the 2D reference frame.

Beginning of the method named displayColumnMatrices

I will explain the method named displayColumnMatrices in fragments. You can view the entire method in Listing 8 . The first fragment is shown in Listing 1 .

5
Listing 1: Beginning of the method named displayColumnMatrices. 


  void displayColumnMatrices(Graphics2D g2D){
    
    //Get two values for each matrix from the sliders.
    red0 = redSlider0.getValue();
    red1 = redSlider1.getValue();
    green0 = greenSlider0.getValue();
    green1 = greenSlider1.getValue();

Get two values for each matrix from the sliders

The little things with the pointed bottoms on the sliders in Image 1 are often called the thumbs of the sliders. Each thumb points down to a numeric scale that ranges from -100 on the left to +100 on the right.

Each time you move a thumb on a slider, the method named displayColumnMatrices , including the code in Listing 1 , is executed. The code in Listing 1 gets the value corresponding to the position of each thumb and saves those four values in the variables named red0 , red1 , green0 , and green1 .

The two sliders in the top row represent red. The two sliders in the bottom row represent green.

The values of the two sliders on the left correspond to red0 and green0 . The two on the right correspond to red1 and green1 .

Use the slider values to create the two matrices

Listing 2 uses the slider values to create the two matrices named redMatrix and greenMatrix .

(More properly, the code uses the values to create two ColMatrix objects and to store references to those objects in the variables named redMatrix and greenMatrix .)

6
Listing 2: Use the slider values to create the two matrices. 

    //Use the slider values to create the two matrices
    // named redMatrix and greenMatrix.
    GM2D03.ColMatrix redMatrix = 
                          new GM2D03.ColMatrix(red0,red1);
    GM2D03.ColMatrix greenMatrix = 
                      new GM2D03.ColMatrix(green0,green1);

There is nothing new in Listing 2 that you haven't seen before so further explanation should not be necessary.

Add and subtract the matrices

Listing 3 creates two additional matrices by adding and subtracting the red and green matrices. References to the new matrices are stored in the variables named blueMatrix and orangeMatrix .

7
Listing 3: Add and subtract the matrices. 

    //Create two additional matrices by adding and
    // subtracting the red and green matrices.
    GM2D03.ColMatrix blueMatrix = 
                               redMatrix.add(greenMatrix);
    GM2D03.ColMatrix orangeMatrix = 
                          redMatrix.subtract(greenMatrix);

Once again, there is nothing new in Listing 3 , so further explanation should not be necessary.

Display text information about the matrices

Listing 4 displays text information about the four matrices, including whether or not the red and green matrices are equal.

8
Listing 4: Display text information about the matrices. 

    //Display text information about the matrices.
    System.out.println();//blank line
    System.out.println("redMatrix = " + redMatrix);
    System.out.println("greenMatrix = " + greenMatrix);
    System.out.println("redMatrix equals greenMatrix: " +
                           redMatrix.equals(greenMatrix));
    System.out.println(
              "blueMatrix = redMatrix + greenMatrix = " + 
                                              blueMatrix);
    System.out.println(
            "orangeMatrix = redMatrix - greenMatrix = " +
                                            orangeMatrix);

The code in Listing 4 produced the text in Image 2 and Image 4 .

Displaying information about the matrices

There are many ways to display information about matrices, including the simple text displays shown in Image 2 and Image 4 . The problem with text displays is that you have to study the numbers in detail to get a feel for an individual matrix and a feel for the relationships among two or more matrices.

A graphical display can often convey that sort of information at first glance. Then you are faced with a decision as to how you should construct the graphical display.

For the case of a column matrix with two elements, a good approach is to let the two matrix values represent the x and y coordinate values of a mathematical point in a 2D reference frame and then to display information about the point. That is the approach taken by this program.

Create mathematical points

Listing 5 creates mathematical points in a 2D coordinate frame that represent the values in the matrices. Listing 5 also creates a point that represents the origin.

9
Listing 5: Create mathematical points. 

    //Create mathematical points in a 2D coordinate
    // frame that represent the values in the matrices.
    // Also create a point that represents the origin.
    GM2D03.Point origin = 
              new GM2D03.Point(new GM2D03.ColMatrix(0,0));
    GM2D03.Point redPoint = 
                              new GM2D03.Point(redMatrix);
    GM2D03.Point greenPoint = 
                            new GM2D03.Point(greenMatrix);
    GM2D03.Point bluePoint = new GM2D03.Point(blueMatrix);
    GM2D03.Point orangePoint = 
                           new GM2D03.Point(orangeMatrix);

Displaying the points

Once you have the points, you then need to decide what might be the best format in which to display them. One obvious approach would simply be to draw small symbols in the 2D coordinate frame that represent the locations of the points.

However, in most real-world situations, we tend to evaluate the value of something relative to a value of zero.

(There are, however, exceptions to this rule. For example, when considering the temperature in Celsius, we tend to evaluate the temperature relative to zero degrees Celsius, which is the freezing point of water. On a Fahrenheit scale, however, we tend to evaluate temperature relative to 32-degrees F, which is the freezing point of water. )

Displacement vectors

A good way to get a feel for the location of a mathematical point in a 2D reference frame is to compare the location of that point with the location of a different point through the use of a displacement vector. That is the approach taken by this program with the anchor point being the point at the origin against which all other points are compared.

Listing 6 creates mathematical displacement vectors that represent the displacements of each of the four points created earlier relative to the origin.

10
Listing 6: Create mathematical displacement vectors. 

    //Create mathematical displacement vectors that
    // represent the displacements of each of the points
    // relative to the origin.
    GM2D03.Vector redVec = 
                   origin.getDisplacementVector(redPoint);
    GM2D03.Vector greenVec = 
                 origin.getDisplacementVector(greenPoint);
    GM2D03.Vector blueVec = 
                  origin.getDisplacementVector(bluePoint);
    GM2D03.Vector orangeVec = 
                origin.getDisplacementVector(orangePoint);

Produce a graphical representation of the displacement vectors

Listing 7 produces and displays a graphical representation of each of the four displacement vectors as shown in Image 1 .

11
Listing 7: Produce a graphical representation of the displacement vectors. 

    //The remaining code is used to create and draw
    // graphical objects.
    //Erase the off-screen image
    g2D.setColor(Color.WHITE);
    g2D.fill(rect);
   
    //Set the line thickness so that the vectors will be
    // drawn with a heavy line.
    g2D.setStroke(new BasicStroke(3));
    
    //Draw the four vectors with their tails at the
    // origin.
    g2D.setColor(Color.BLUE);
    blueVec.draw(g2D,origin);
    
    g2D.setColor(Color.ORANGE);
    orangeVec.draw(g2D,origin);
    
    g2D.setColor(Color.RED);
    redVec.draw(g2D,origin);
    
    g2D.setColor(Color.GREEN);
    greenVec.draw(g2D,origin);

    //Draw the axes with thinner lines.
    g2D.setStroke(new BasicStroke(1));
    g2D.setColor(Color.BLACK);
    drawAxes(g2D);
    
  }//end displayColumnMatrices

There is very little new code in Listing 7 , and the new code that is there should be easy to understand.

Analysis of results

The head of the red vector in Image 1 represents the two values in the column matrix known as redMatrix . The length and direction of that vector shows how it relates to a column vector having two elements, each with a value of zero.

Similarly, the head of the green vector in Image 1 represents the two values in the column matrix known as greenMatrix .

The head of the blue vector represents the two values in the column matrix known as blueMatrix , which was created by adding the red and green matrices. In case you haven't noticed, a line drawn from the head of the red vector to the head of the blue vector would have the same length and direction as the green vector. This will come up again in a future module when we discuss the vector addition parallelogram.

The head of the orange vector represents the two values in the column matrix know as orangeMatrix , which was created by subtracting the green matrix from the red matrix. Again, a line drawn from the head of the red vector to the head of the orange vector would have the same length and opposite direction as the green vector.

Homework assignment

The homework assignment for this module was to study the Kjell tutorial through Chapter 3 - Vector Addition . That is also the homework assignment for the next module.

In addition to studying the Kjell material, you should read at least the next two modules in this collection and bring your questions about that material to the next classroom session.

Finally, you should have begun studying the physics material at the beginning of the semester and you should continue studying one physics module per week thereafter. You should also feel free to bring your questions about that material to the classroom for discussion.

Run the program

I encourage you to copy the code from Listing 8 . Compile the code and execute it in conjunction with the game-math library named GM2D03 . The source code for that library was provided in the earlier module titled GAME2302-0115: Working with Column Matrices, Points, and Vectors and you can copy it from there.. Experiment with the code, making changes, and observing the results of your changes. Make certain that you can explain why your changes behave as they do.

Summary

In this module, you learned how to create column matrices using values obtained from sliders. You learned how to create additional column matrices by adding and subtracting the original matrices.

You learned how to display text information about the matrices including whether or not they are equal.

You learned how to display the matrices in a graphical format where each matrix is represented by a displacement vector in a 2D reference frame.

What's next?

In the next module, you will learn:

  • How to add two or more vectors.
  • About the head-to-tail rule in vector addition.
  • About the vector addition parallelogram.
  • About the relationship between the length of the sum of vectors and the sum of the lengths of vectors.
  • How to add a vector to a point.
  • How to get the length of a vector.
  • How to represent an object in different coordinate frames.

Miscellaneous

This section contains a variety of miscellaneous information.

Note:

Housekeeping material
  • Module name: GAME2302-0120: Visualizing Column Matrices
  • File: Game0120.htm
  • Published: 10/15/12
  • Revised: 12/31/12

Note:

Disclaimers:

Financial : Although the Connexions site makes it possible for you to download a PDF file for this module at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should be aware that some of the HTML elements in this module may not translate well into PDF.

I also want you to know that, I receive no financial compensation from the Connexions website even if you purchase the PDF version of the module.

In the past, unknown individuals have copied my modules from cnx.org, converted them to Kindle books, and placed them for sale on Amazon.com showing me as the author. I neither receive compensation for those sales nor do I know who does receive compensation. If you purchase such a book, please be aware that it is a copy of a module that is freely available on cnx.org and that it was made and published without my prior knowledge.

Affiliation :: I am a professor of Computer Information Technology at Austin Community College in Austin, TX.

Complete program listing

A complete listing of the program named ColMatrixVis01 is provided in Listing 8 . The game library named GM2D03 , which is required for compiling and executing this program, was provided in the earlier module titled GAME2302-0115: Working with Column Matrices, Points, and Vectors . You can copy it from there.

12
Listing 8: Source code for the program named ColMatrixVis01. 

/*ColMatrixVis01.java
Copyright 2012, R.G.Baldwin

The purpose of this program is to help the student 
visualize column matrices. Two column matrices are created
using values obtained from sliders.

Two additional column matrices are created by adding and
subtracting the original matrices.

Mathematical points are created to represent the values
in the matrices in a 2D reference frame.

Displacement vectors are created for each of the points
relative to the origin.

The vectors are drawn along with Cartesian coordinate axes
in the 2D reference frame.

Text output is displayed to show the matrix values as well
as whether the two original matrices are equal.

Tested using JDK 1.7 under WinXP and Windows 7
*********************************************************/
import java.awt.*;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.JLabel;
import javax.swing.event.ChangeListener;
import javax.swing.event.ChangeEvent;
import java.lang.Math;
import java.util.*;

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

class GUI extends JFrame{
  //Specify the horizontal and vertical size of a JFrame
  // object.
  int hSize = 450;
  int vSize = 600;
  Image osi;//off-screen image
  int osiWidth;//off-screen image width
  int osiHeight;//off-screen image height
  MyCanvas myCanvas;//a subclass of Canvas
  
  //Panel to contain the sliders and associated labels.
  private JPanel mainPanel = new JPanel();
  
  //Sliders used to produce values for column matrices.
  private JSlider redSlider0 = new JSlider();
  private JSlider redSlider1 = new JSlider();
  private JSlider greenSlider0 = new JSlider();
  private JSlider greenSlider1 = new JSlider();

  //Storage area for values extracted from sliders.
  private int red0 = 100;
  private int red1 = 100;
  private int green0 = 100;
  private int green1 = -100;

  //Object used to erase the off-screen image.
  private Rectangle rect;

  GUI(){//constructor
    //Configure the sliders.
    redSlider0.setMaximum(100);
    redSlider0.setMinimum(-100);
    redSlider0.setMajorTickSpacing(50);
    redSlider0.setMinorTickSpacing(10);
    redSlider0.setPaintTicks(true);
    redSlider0.setPaintLabels(true);
    redSlider0.setValue(red0);
    
    redSlider1.setMaximum(100);
    redSlider1.setMinimum(-100);
    redSlider1.setMajorTickSpacing(50);
    redSlider1.setMinorTickSpacing(10);
    redSlider1.setPaintTicks(true);
    redSlider1.setPaintLabels(true);
    redSlider1.setValue(red1);
    
    greenSlider0.setMaximum(100);
    greenSlider0.setMinimum(-100);
    greenSlider0.setMajorTickSpacing(50);
    greenSlider0.setMinorTickSpacing(10);
    greenSlider0.setPaintTicks(true);
    greenSlider0.setPaintLabels(true);
    greenSlider0.setValue(green0);
    
    greenSlider1.setMaximum(100);
    greenSlider1.setMinimum(-100);
    greenSlider1.setMajorTickSpacing(50);
    greenSlider1.setMinorTickSpacing(10);
    greenSlider1.setPaintTicks(true);
    greenSlider1.setPaintLabels(true);
    greenSlider1.setValue(green1);
    
    //Set the layout manager for the panel that contains
    // the sliders and the associated labels.
    mainPanel.setLayout(new GridLayout(2,3));
    
    //Add the sliders and associated labels to the panel.
    mainPanel.add(new JLabel("   Red matrix values"));
    mainPanel.add(redSlider0);
    mainPanel.add(redSlider1);

    mainPanel.add(new JLabel("   Green matrix values"));
    mainPanel.add(greenSlider0);
    mainPanel.add(greenSlider1);
    
    //Set JFrame size, title, and close operation.
    setSize(hSize,vSize);
    setTitle("Copyright 2012, 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.getContentPane().add(
                            mainPanel,BorderLayout.SOUTH);

    //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();
    osiHeight = myCanvas.getHeight();
    
    //Configure the object that will be used to erase
    // the off-screen image.
    rect = new Rectangle(
             -osiWidth/2,-osiHeight/2,osiWidth,osiHeight);

    //Create an off-screen image and get a graphics
    // context on it.
    osi = createImage(osiWidth,osiHeight);
    final Graphics2D g2D = 
                          (Graphics2D)(osi.getGraphics());

    //Translate the origin to the center of the
    // off-screen image.
    g2D.translate(osiWidth/2.0,osiHeight/2.0);
    
    //Erase the off-screen image.
    g2D.setColor(Color.WHITE);
    g2D.fill(rect);//erase the osi

    //Display the initial values of the column matrices
    displayColumnMatrices(g2D);
    
    //Register a listener on each of the sliders.
    redSlider0.addChangeListener(
      new ChangeListener(){
        public void stateChanged(ChangeEvent e){
          //Re-display the column matrices each time the
          // thumb is moved on the slider.
          displayColumnMatrices(g2D);
        }//end stateChanged
      }//end new ChangeListener
    );//end addChangeListener
    
    redSlider1.addChangeListener(
      new ChangeListener(){
        public void stateChanged(ChangeEvent e){
          displayColumnMatrices(g2D);
        }//end stateChanged
      }//end new ChangeListener
    );//end addChangeListener

    greenSlider0.addChangeListener(
      new ChangeListener(){
        public void stateChanged(ChangeEvent e){
          displayColumnMatrices(g2D);
        }//end stateChanged
      }//end new ChangeListener
    );//end addChangeListener
    
    greenSlider1.addChangeListener(
      new ChangeListener(){
        public void stateChanged(ChangeEvent e){
          displayColumnMatrices(g2D);
        }//end stateChanged
      }//end new ChangeListener
    );//end addChangeListener
  }//end constructor
  //----------------------------------------------------//

  //The purpose of this method is to
  // 1. Create two column matrices named redMatrix and 
  //    greenMatrix using values obtained from sliders.
  // 2. Create two more column matrices named blueMatrix
  //    and orangeMatrix by adding and subtracting the red
  //    and green matrices.
  // 3. Display text information about the matrices
  //    including whether the red and green matrices are
  //    equal.
  // 4. Create mathematical points in a 2D coordinate
  //    frame that represents the values in the matrices.
  // 5. Create mathematical displacement vectors that
  //    represent the displacements of each of the points
  //    relative to the origin.
  // 6. Create and draw graphics objects that represent
  //    each of the mathematical displacement vectors
  //    along with Cartesian coordinate axes for the
  //    2D reference frame.
  void displayColumnMatrices(Graphics2D g2D){
    
    //Get two values for each matrix from the sliders.
    red0 = redSlider0.getValue();
    red1 = redSlider1.getValue();
    green0 = greenSlider0.getValue();
    green1 = greenSlider1.getValue();
    
    //Use the slider values to create the two matrices
    // named redMatrix and greenMatrix.
    GM2D03.ColMatrix redMatrix = 
                          new GM2D03.ColMatrix(red0,red1);
    GM2D03.ColMatrix greenMatrix = 
                      new GM2D03.ColMatrix(green0,green1);
    
    //Create two additional matrices by adding and
    // subtracting the red and green matrices.
    GM2D03.ColMatrix blueMatrix = 
                               redMatrix.add(greenMatrix);
    GM2D03.ColMatrix orangeMatrix = 
                          redMatrix.subtract(greenMatrix);
    
    //Display text information about the matrices.
    System.out.println();//blank line
    System.out.println("redMatrix = " + redMatrix);
    System.out.println("greenMatrix = " + greenMatrix);
    System.out.println("redMatrix equals greenMatrix: " +
                           redMatrix.equals(greenMatrix));
    System.out.println(
              "blueMatrix = redMatrix + greenMatrix = " + 
                                              blueMatrix);
    System.out.println(
            "orangeMatrix = redMatrix - greenMatrix = " +
                                            orangeMatrix);
    
    //Create mathematical points in a 2D coordinate
    // frame that represent the values in the matrices.
    // Also create a point that represents the origin.
    GM2D03.Point origin = 
              new GM2D03.Point(new GM2D03.ColMatrix(0,0));
    GM2D03.Point redPoint = 
                              new GM2D03.Point(redMatrix);
    GM2D03.Point greenPoint = 
                            new GM2D03.Point(greenMatrix);
    GM2D03.Point bluePoint = new GM2D03.Point(blueMatrix);
    GM2D03.Point orangePoint = 
                           new GM2D03.Point(orangeMatrix);

    //Create mathematical displacement vectors that
    // represent the displacements of each of the points
    // relative to the origin.
    GM2D03.Vector redVec = 
                   origin.getDisplacementVector(redPoint);
    GM2D03.Vector greenVec = 
                 origin.getDisplacementVector(greenPoint);
    GM2D03.Vector blueVec = 
                  origin.getDisplacementVector(bluePoint);
    GM2D03.Vector orangeVec = 
                origin.getDisplacementVector(orangePoint);
    
    //The remaining code is used to create and draw
    // graphical objects.
    //Erase the off-screen image
    g2D.setColor(Color.WHITE);
    g2D.fill(rect);
   
    //Set the line thickness so that the vectors will be
    // drawn with a heavy line.
    g2D.setStroke(new BasicStroke(3));
    
    //Draw the four vectors with their tails at the
    // origin.
    g2D.setColor(Color.BLUE);
    blueVec.draw(g2D,origin);
    
    g2D.setColor(Color.ORANGE);
    orangeVec.draw(g2D,origin);
    
    g2D.setColor(Color.RED);
    redVec.draw(g2D,origin);
    
    g2D.setColor(Color.GREEN);
    greenVec.draw(g2D,origin);

    //Draw the axes with thinner lines.
    g2D.setStroke(new BasicStroke(1));
    g2D.setColor(Color.BLACK);
    drawAxes(g2D);
    
  }//end displayColumnMatrices
  //----------------------------------------------------//

  //The purpose of this method is to draw a pair of
  // Cartesian coordinate axes onto the
  // off-screen image.
  void drawAxes(Graphics2D g2D){

    //Define four points at the edges of the coordinate
    // frame and the ends of the axes.
    GM2D03.Point point0 = new GM2D03.Point(
                     new GM2D03.ColMatrix(-osiWidth/2,0));
    GM2D03.Point point1 = new GM2D03.Point(
                      new GM2D03.ColMatrix(osiWidth/2,0));
    GM2D03.Point point2 = new GM2D03.Point(
                    new GM2D03.ColMatrix(0,-osiHeight/2));
    GM2D03.Point point3 = new GM2D03.Point(
                     new GM2D03.ColMatrix(0,osiHeight/2));

    //Now define the two lines based on the end points..
    GM2D03.Line xAxis = new GM2D03.Line(point0,point1);
    GM2D03.Line yAxis = new GM2D03.Line(point2,point3);

    //Now draw a visual manifestation of each line
    // on g2D.
    xAxis.draw(g2D);
    yAxis.draw(g2D);
    
    //Repaint the display area
    myCanvas.repaint();

  }//end drawAxes
  //====================================================//

  //This is an inner class of the GUI class.
  class MyCanvas extends Canvas{
    //Override the paint() method. This 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.
    public void paint(Graphics g){
      g.drawImage(osi,0,0,this);
    }//end overridden paint()

  }//end inner class MyCanvas

}//end class GUI
//======================================================//

Exercises

Exercise 1

Using Java and the game-math library named GM2D03 , or using a different programming environment of your choice, write a program that uses random values to generate two column matrix objects.

Generate two more column matrix objects as the sum and difference of the two original column matrix objects.

Display the two original column matrix objects in red and green and display the sum and difference matrix objects in blue and orange as shown in Image 5 .

13
Image 5: Graphic output from Exercise 01.
Missing image

-end-

Content actions

Download module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks