Summary: Learn how to use the dot product to compute nine different angles of interest that a vector makes with various elements in 3D space. Also learn how to use the dot product to find six of the infinite set of vectors that are perpendicular to a given vector, and how to use the dot product to perform back-face culling of an image.
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, which was the first part of a two-part miniseries on the vector dot product, you learned the fundamentals of the vector dot product in both 2D and 3D. You learned how to update the game-math library to support various aspects of the vector dot product, and you learned how to write 2D and 3D programs that use the vector dot product methods in the game-math library.
What you will learn
In this module, you will learn how to apply the vector dot product to three different applications. You will learn
| Image 1: A 3D image before back-face culling. |
|---|
![]() |
.
| Image 2: The 3D image after back-face culling. |
|---|
![]() |
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.
This module will build on what you learned about the vector dot product in the earlier module titled GAME 2302-0145: Getting Started with the Vector Dot Product . In that module, you learned some of the theory behind the dot product. In this module, you will learn how to use the dot-product methods of the game-math library to write several applications. I will present and explain the following four programs:
I will also provide exercises for you to complete on your own at the end of the module. The exercises will concentrate on the material that you have learned in this module and previous modules.
The game-math library has not been modified since the previous module. Therefore, there is nothing new to discuss and explain insofar as the library is concerned. For your convenience, a complete listing of the source code for the library is provided in Listing 9 near the end of the module.
A link to a zip file containing documentation for the library is provided in the earlier module titled GAME 2302-0145: Getting Started with the Vector Dot Product .
In order to understand this and the following programs, you need to understand the material in the Kjell tutorial through Chapter 10, Angle between 3D Vectors .
Game programming frequently requires the determination of angles of various types. The purpose of this program is to demonstrate how the dot product can be used to compute nine different angles of interest that a vector makes with various elements in 3Dspace.
Image 3 shows a screen shot of the graphical user interface provided by this program.
| Image 3: Screen shot of the output from the program named DotProd3D05. |
|---|
![]() |
Angles relative to the axes
First, the program computes and displays the angle between a user-specified vector (drawn in black in Image 3 ) and each of the X, Y, and Z axes. These values are displayed with the labels Angle X , Angle Y , and Angle Z in Image 3 .
Angles relative to the XY, YZ, and ZX planes
Then the program computes and displays the angle between the vector and each of the XY , YZ , and ZX planes. In this case, the program computes the smallest possible angle by projecting the vector onto the plane and then computing the angle between the vector and its projection. These values are displayed with the labels Angle XY , Angle YZ , and Angle ZX .
Angles of projections relatives to the axes
Finally, the program computes and displays the angle between the projection of the vector on each of the three planes and one of the axes that defines each plane. The angle between the projection and the other axis that defines the plane is 90 degrees minus the computed angle. Specifically the values that are computed and displayed are:
The graphical user interface
All angles are reported as positive angles in degrees. As you can see in Image 3 , a GUI is provided that allows the user to enter three double values that define a GM02.Vector3D object. The GUI also provides an OK button as well as nine text fields that are used to display the computed results described above. In addition, the GUI provides a 3D drawing area.
When the user clicks the OK button, the program draws the user-specified vector in black with the tail located at the origin in 3D space. It also draws the projection of that vector in magenta on each of the XY , YZ , AND ZX planes.
Very similar to previously-explained code
Much of the code in this program is very similar to code that I have explained in previous modules. I won't repeat those explanations here. Most of the new code is contained in the method named actionPerformed , so I will explain the code in that method. A complete listing of this program is provided in Listing 10 near the end of the module.
Beginning of the actionPerformed method in the program named DotProd3D05
Listing 1 shows the beginning of the actionPerformed method. This method is called to respond to a click on the OK button shown in Image 3 .
| Listing 1: Beginning of the actionPerformed method in the program named DotProd3D05. |
|---|
|
You have seen code similar to that in Listing 1 many times before. Therefore, this code should not require further explanation beyond the embedded comments.
Create ColMatrix3D objects that represent projections
Listing 2 creates ColMatrix3D objects that represent the projection of the user-specified vector onto each of the three planes.
| Listing 2: Create ColMatrix3D objects that represent projections. |
|---|
|
Although the actual code in Listing 2 should be familiar to you, the application may be new. The important thing to note is that the projection onto each of the three planes in Listing 2 is accomplished by setting one of the coordinate values to zero for each projection. For example, in order to project the vector onto the XY plane, the value for the z-axis coordinate is set to zero as shown in Listing 2 .
Create and draw vectors
Listing 3 uses the ColMatrix3D objects created in Listing 1 and Listing 2 to create and draw vectors based on those ColMatrix3D objects.
| Listing 3: Create and draw vectors. |
|---|
|
Once the ColMatrix3D objects have been created to serve each specific purpose, there is nothing new in Listing 3 . Therefore, no explanation of the code beyond the embedded comments should be necessary.
Compute and display the nine angles
Listing 4 calls the angle method of the GM02.Vector3D class nine times in succession, using references to the vectors created in Listing 3 , to compute and display the nine angle values shown in Image 3 .
| Listing 4: Compute and display the nine angles. |
|---|
|
Once the required vectors had been created in Listing 3 , there is nothing new in the code in Listing 4 . Therefore, no explanation of Listing 4 should be required beyond the comments embedded in the code.
The bottom line on the program named DotProd3D05
The bottom line is that because the methods in the game-math library named GM02 were designed to do most of the hard work, writing application programs such as DotProd3D05 using the game-math library is not difficult at all. You simply need to understand how to organize your code to accomplish the things that you need to accomplish.
That concludes the explanation of the program named DotProd3D05 .
This program demonstrates how the dot product can be used to find vectors that are perpendicular to a given vector.
An infinite number of possibilities
Recall that you learned in the previous module that there are an infinite number of vectors that are perpendicular to a given vector in 3D. This program computes and displays normalized and scaled versions of six somewhat unique vectors of the infinite set of vectors that are perpendicular to a user specified vector.
The graphic output
The screen output from this program is shown in Image 4 .
| Image 4: Six (magenta) vectors that are perpendicular to a given (black) vector. |
|---|
![]() |
Output on the command-line screen
In addition to the graphic output shown in Image 4 , the program also displays the values of three of the perpendicular vectors on the command-line screen along with the angle between the perpendicular vector and the user-specified vector. The angle should always be 90 degrees or very close to 90 degrees if the program is working properly. The other three of the six perpendicular vectors are simply negated versions of the three for which the values are displayed.
Special case of one zero coordinate value
If the user specifies one of the coordinate values to be zero (or close to zero) , the program only computes and displays four of the possible vectors in order to avoid performing division by a near-zero value. In this case, the orientation of two of the vectors will overlay the orientation of the other two. Because the vectors are normalized to the same length and occupy the same space, you will only see two vectors instead of four. This is illustrated in Image 5 where the value of the z-axis coordinate value was set to zero relative to the value used in Image 4 .
| Image 5: Screen output when one coordinate has a value of zero. |
|---|
![]() |
Special case of two coordinates with a value of zero
If the user specifies two of the coordinate values to be zero or close to zero, the program doesn't produce a valid result. Instead, it draws a perpendicular vector where all of the coordinate values are zero resulting in a magenta vector head at the origin. It also displays NaN (Not a Number) for the angle on the command line screen.
The graphical user interface
The GUI shown in Image 4 is provided to allow the user to enter three double values that define a GM02.Vector3D object. The GUI also provides an OK button in addition to a 3D drawing area.
When the user clicks the OK button, the program draws the user-specified vector in black with the tail located at the origin in 3D space. It draws normalized versions of the perpendicular vectors in magenta with their tails also located at the origin. Each normalized vector is scaled by a factor of 50 before it is drawn to cause it to be long enough to be seen.
A short review
Before getting into the programming details, we need to review some material from the previous module. Recall that I did some algebraic manipulations in the previous module and produced the equations shown in Image 6 .
| Image 6: A general formulation of 3D vector perpendicularity. |
|---|
|
An infinite set of perpendicular vectors
The equations in Image 6 describe an infinite set of vectors that are all perpendicular to a given vector. Given these equations, and given the coordinates (x1, y1, and z1) of a vector for which we need to produce perpendicular vectors, we can assume values for any two of x2, y2, and z2. We can then determine the value for the other coordinate that will cause the new vector to be perpendicular to the given vector.
That is the procedure that is used by this program to produce three of the perpendicular vectors shown in Image 4 . The remaining three perpendicular vectors shown in Image 4 are produced by negating the three vectors that are created using the procedure described above.
Beginning of the actionPerformed method
The only code in this program that is new to this module is contained in the actionPerformed method. This method is called to respond to a click on the OK button in Image 5 . Therefore, I will confine my explanation to portions of the actionPerformed method. You can view a complete listing of this program in Listing 11 near the end of the module.
The actionPerformed method begins in Listing 5 . Note that I deleted some of the code early in the method because it is very similar to code that I have explained before.
| Listing 5: Beginning of the actionPerformed method for the program named DotProd3D06. |
|---|
|
Behavior of the actionPerformed method
The actionPerformed method contains three sections of code, each of which implements one of the equations in Image 6 , to compute and draw one of the perpendicular vectors shown in Image 4 . In addition, the code in the actionPerformed method draws the negative of those three vectors to produce the other three perpendicular vectors shown in Image 4 .
Implement the last equation
Listing 5 implements the last equation from Image 6 , provided that the z-axis coordinate value for the given vector is greater than 0.001. As mentioned earlier, if the z-axis coordinate value is not greater than 0.001, the code in Listing 5 is skipped and no effort is made to create and draw that particular vector. This is done to prevent an attempt to divide by a zero or near-zero value.
A new ColMatrix3D object
Listing 5 creates a new ColMatrix3D object with the x and y-axes coordinate values matching the corresponding values for the user specified vector. It executes the expression shown in Listing 5 to compute the value of the z-axis coordinate that will cause the new vector to be perpendicular to the user-specified vector. (The expression in Listing 5 matches the last equation in Image 6 .)
A new Vector3D object
Then it uses the ColMatrix3D object described above to create, normalize, scale, and draw the first perpendicular vector. Following that, the code negates the perpendicular vector to create another perpendicular vector that points in the opposite direction.
Along the way, some information is displayed on the command-line screen.
The most important code
The most important code in Listing 5 , insofar as the objective of the program is concerned, is the expression that computes the z-axis coordinate value that will cause the new vector to be perpendicular to the user-specified vector.
Remainder of the actionPerformed method
Listing 6 does essentially the same thing two more times to implement the other two equations shown in Image 6 , creating and drawing four more perpendicular vectors in the process.
| Listing 6: Remainder of the actionPerformed method. |
|---|
|
Listing 6 also causes the off-screen image to be displayed on the canvas.
That concludes the explanation of the program named DotProd3D06 .
The purpose of this program is to serve as a counterpoint to the program named Prob3D03 , which demonstrates backface culling. (I will explain the program named Prob3D03 shortly.)
This program draws the 3D object shown in Image 1 , while the program named DotProd3D03 draws the 3D object shown in Image 2 . The difference between the two is that the object drawn by this program ( Image 1 ) does not incorporate backface culling to hide the lines on the back of the object. The object in Image 2 does incorporate backface culling. The difference is easy to see.
This program draws a 3D circular cylinder by stacking 20 circular disks on the x-z plane as shown in Image 1 . The disks are centered on the y-axis and are parallel to the x-z plane. The thickness of each disk is 5 vertical units. As mentioned above, there is no backface culling in this program, so all of the lines that should be hidden show through.
Will discuss in fragments
A complete listing of this program is provided in Listing 12 near the end of the module. I will explain portions of the program using code fragments. However, I won't repeat explanations of code that I have already explained in this or in earlier modules.
The method named drawTheCylinder
All of the interesting code in this program is contained in the method named drawTheCylinder , which is shown in Listing 7 . (Note that some of the code was deleted from Listing 7 for brevity.) This method is used to set the axes to the center of the off-screen image and to draw a 3D cylinder that is centered on the y-axis.
| Listing 7: The method named drawTheCylinder in DotProd3D04. |
|---|
|
Behavior of the code
Basically, the code in Listing 7 draws 21 circles, one above the other to represent the edges of the 20 circular disks. If you understand the trigonometry involved in drawing a circle, you should find the code in Listing 7 to be straightforward and no explanation beyond the embedded comments should be required. If you don't understand the trigonometry, you will simply have to take my word for it that the expressions in Listing 7 are correct for drawing circles. A study of trigonometry is beyond the scope of this module.
The purpose of this program is to demonstrate a practical use of the vector dot product -- backface culling. As before, the program draws a 3D circular cylinder by stacking 20 circular disks on the x-z plane. The disks are centered on the y-axis and are parallel to the x-z plane. The thickness of each disk is 5 vertical units.
Backface culling is incorporated using the dot product between a vector that is parallel to the viewpoint of the viewer and a vector that is perpendicular to the line being drawn to form the outline of a circle. The results are shown in Image 2 .
Will discuss in fragments
A complete listing of this program is provided in Listing 13 near the end of the module. I will explain portions of the program using code fragments. However, I won't repeat explanations of code that I have already explained in this or in earlier modules.
The method named drawTheCylinder
As before, all of the interesting code in this program is contained in the method named drawTheCylinder , which is shown in Listing 8 . (Note that some of the code was deleted from Listing 8 for brevity.) This method is used to set the axes to the center of the off-screen image and to draw a 3D cylinder that is centered on the y-axis.
| Listing 8: The method named drawTheCylinder in DotProd3D03. |
|---|
|
The new code and an exercise for the student
The new code in Listing 8 is highlighted by a long explanatory comment near the middle of Listing 8 . I will leave it as an exercise for the student to think about the rationale that was used to decide which lines to draw and which lines to suppress depending on the algebraic sign of the dot product between the two vectors.
Otherwise, no explanation of the code should be necessary beyond the embedded comments.
The homework assignment for this module was to study the Kjell tutorial through Chapter 10, Angle between 3D Vectors.
The homework assignment for the next module is to study the Kjell tutorial through Chapter 11, Projections.
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 9 through Listing 13 . Compile the code and execute it in conjunction with the game-math library named GM02 in Listing 9 . 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 apply the vector dot product to three different applications. You learned:
In the next module, you will learn about first-person computer games in general, and how to use the game-math library to write a first-person game in a 3D world using the game math library.
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 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 listings of the programs discussed in this module are shown in Listing 9 through Listing 13 below.
| Listing 9: Source code for the game-math library named GM02. |
|---|
|
.
| Listing 10: Source code for the program named DotProd3D05. |
|---|
|
.
| Listing 11: Source code for the program named DotProd3D06. |
|---|
|
.
| Listing 12: Source code for the program named DotProb3D04. |
|---|
|
.
| Listing 13: Source code for the program named DotProb3D03. |
|---|
|
Using Java and the game-math library named GM02 , or using a different programming environment of your choice, write a program that creates the drawing of half of a 3D sphere protruding upward from the x-z plane as shown in Image 7 . The north and south poles of the sphere lie on the y-axis, but only the northern hemisphere is visible.
Cause your name to appear in the screen output in some manner.
| Image 7: Output from Exercise 1. |
|---|
![]() |
Beginning with a program similar to the one that you wrote in Exercise 1 , create a drawing of a 3D sphere as shown in Image 8 . The north and south poles of the sphere lie on the y-axis.
| Image 8: Output from Exercise 2. |
|---|
![]() |
-end-