Summary: Learn how to display column matrices in a graphical format to make it easier to visualize them.
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:
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.
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.
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 .
Image 1: Sample graphical program output. 

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 .
Image 2: Text output from the program. 


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.
Image 3: Graphical output for equal vectors. 

.
Image 4: Text output for equal vectors. 


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.
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 GAME23020115: 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:
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 .
Listing 1: Beginning of the method named displayColumnMatrices. 


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 .)
Listing 2: Use the slider values to create the two matrices. 


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 .
Listing 3: Add and subtract the matrices. 


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.
Listing 4: Display text information about the matrices. 


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.
Listing 5: Create mathematical points. 


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 realworld 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 32degrees 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.
Listing 6: Create mathematical displacement vectors. 


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 .
Listing 7: Produce a graphical representation of the displacement vectors. 


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.
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.
I encourage you to copy the code from Listing 8 . Compile the code and execute it in conjunction with the gamemath library named GM2D03 . The source code for that library was provided in the earlier module titled GAME23020115: 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.
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.
In the next module, you will learn:
This section contains a variety of miscellaneous information.
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 preprinted 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.
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 GAME23020115: Working with Column Matrices, Points, and Vectors . You can copy it from there.
Listing 8: Source code for the program named ColMatrixVis01. 


Using Java and the gamemath 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 .
Image 5: Graphic output from Exercise 01. 

end