Summary: Learn how to add two or more vectors. Also learn 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 lengths of the individual vectors in the sum, how to add a vector to a point, how to get the length of a vector, and how to represent an object in different coordinate frames.
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 couple of modules, you learned:
What you will learn
In this module you will learn:
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.
In this module, I will present and explain several updates to the game-math library. In addition, I will present and explain five sample programs that illustrate the use of the new features of the library.
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 was updated and the name was changed to GM2D04 in preparation for this module. Much of the code in the updated library remains unchanged. I explained that code in the previous modules and I won't repeat that explanation in this module. I will concentrate on explaining the modifications that I made to the library in this module.
A complete listing of the library program is provided in Listing 19 near the end of the module.
This update added the following new capabilities to the library:
These three new methods are presented in Listing 1 , Listing 2 , and Listing 3 below. These methods are so simple that no explanation should be required for you to understand them.
| Listing 1: The add method of the GM2D04.Vector class. |
|---|
|
.
| Listing 2: The getLength method of the GM2D04.Vector class. |
|---|
|
.
| Listing 3: The addVectorToPoint method of the GM2D04 class. |
|---|
|
Simple but powerful
Although these new methods are individually very simple, when combined with the other methods in the library, they significantly increase the power of the library. For example, in the next module I will show you that the library in its current form supports translation and animation.
I will illustrate the use of these new methods in the sample programs that follow.
This program illustrates the addition of two and then three vectors. It also illustrates the head-to-tail rule described by Kjell. A complete listing of the program is provided in Listing 20 near the end of the module.
Screen output from the program named VectorAdd01
The screen output from the program is shown in Image 1 .
| Image 1: Screen output from the program named VectorAdd01. |
|---|
![]() |
You will recall that the game-math library represents a Vector object graphically as a straight line with a small circle at the head. Thus, there are five vectors drawn in Image 1 . I will explain the meaning of the output in conjunction with the explanation of the program.
Beginning of the program named VectorAdd01
Listing 4 shows the entire class named VectorAdd01 along with the beginning of the class named GUI including the constructor for the GUI class.
| Listing 4: Beginning of the program named VectorAdd01. |
|---|
|
Very familiar code
The code in Listing 4 is very similar to code that I explained in the earlier module titled GAME 2302-0110: Updating the Math Library for Graphics . Therefore, I won't explain that code again in this module.
This code is mainly needed to get everything set up for graphics.
Note that the code in Listing 4 makes a call to the method named drawOffScreen near the end of the listing. That is where we find the interesting code.
Beginning of the method named drawOffScreen
The beginning of the drawOffScreen method is shown in Listing 5 .
The purpose of this method is to add some Vector objects and to cause visual manifestations of the raw Vector objects and the resultant Vector objects to be drawn onto an off-screen image.
| Listing 5: Beginning of the method named drawOffScreen. |
|---|
|
Listing 5 begins by calling the method named setCoordinateFrame , which is shown in its entirety in Listing 6 . I will put the discussion of the drawOffScreen method on hold while I explain the method named setCoordinateFrame .
The method named setCoordinateFrame
This method sets the origin to a point near the upper-left corner of the off-screen image (see Image 1 ) and draws orthogonal axes on the off-screen image intersecting at the origin.
| Listing 6: The method named setCoordinateFrame. |
|---|
|
There is no intention to perform mathematical operations on the axes, so they are drawn independently of the classes and methods in the game-math library using the simplest method available for drawing a line.
The name of that simple method is drawLine , and it is a method of the standard Java Graphics class. The translate method is also a method of the Graphics class. Given that information, the code in Listing 6 is straightforward and should not require further explanation.
Adding two vectors
Returning to the method named drawOffScreen , Listing 7 begins by instantiating two objects of the GM2D04.Vector class.
| Listing 7: Adding two vectors. |
|---|
|
Then Listing 7 calls the new add method (see Listing 1 ) on one of the vectors, passing the other vector as a parameter to the method. The add method returns a third vector that is the sum of the other two vectors. The new vector is referred to as sumOf2 in Listing 7 .
Draw vecA in RED with its tail at the origin
Recall that a vector has only two properties: length and direction. It does not have a position property. Therefore, if you decide to draw a vector, you can draw it anywhere in space, and one position is equally as valid as any other position.
Listing 8 sets the drawing color to RED and calls the draw method on vecA producing the red visual manifestation of the Vector object shown in Image 1 .
(Note that there is also a magenta vector in Image 1 , and it may be difficult to distinguish from the red vector, depending on the quality of the color on your monitor. The magenta vector is longer than the red vector.)
| Listing 8: Draw vecA in RED with its tail at the origin. |
|---|
|
Note that I elected to draw the vector with its tail at the origin, but that was an arbitrary decision that I will discuss in more detail later.
Draw vecB in GREEN head-to-tail with vecA
While it's legal to draw a vector anywhere in space, certain positions may have advantages over other positions in some cases. You will see what I mean shortly. In the meantime, Listing 9 creates a visual manifestation of the vecB object with its tail at the head of the vecA object as shown by the green vector in Image 1 .
| Listing 9: Draw vecB in GREEN head-to-tail with vecA. |
|---|
|
Draw sumOf2 in MAGENTA with its tail at the origin
Listing 10 creates a visual manifestation of the sumOf2 object with its tail at the origin as shown by the magenta vector in Image 1 .
(In case you don't recognize the name of the color magenta, it looks similar to violet or purple. As mentioned earlier, it is somewhat longer than the red vector)
More correctly, Listing 10 draws the sumOf2 object with its tail coinciding with the tail of vecA . I elected to position the tails of the two vectors at the origin to keep the code a little simpler.
| Listing 10: Draw sumOf2 in MAGENTA with its tail at the origin. |
|---|
|
The head-to-tail rule
We have just illustrated a very important rule that can make it much easier to visualize the results of vector addition. It is often called the head-to-tail rule.
If you add two or more vectors to produce a sum vector, and then draw the vectors that were included in the sum with the tail of one vector coinciding with the head of another vector, (as illustrated by the red and green vectors in Image 1 ) , the head of the last vector that you draw will be positioned at some particular point in space.
If you then draw the vector that represents the sum vector with its tail coinciding with the tail of the first vector that you drew, its head will coincide with the head of the last vector that you drew as shown by the magenta vector in Image 1 .
The tail of the magenta vector coincides with the tail of the red vector, and the head of the magenta vector coincides with the head of the green vector.
(It doesn't matter whether or not the coinciding tails are drawn at the origin.)
Furthermore, this rule will hold regardless of the number of vectors included in the sum.
Extending the example to three vectors
Listing 11 extends this example to three vectors.
| Listing 11: Extending the example to three vectors. |
|---|
|
You should understand this code
By now, you should have no difficulty understanding the code in Listing 11 . The only tricky thing that I would call your attention to is the syntax of the code that adds the three vectors shown below for emphasis.
GM2D04.Vector sumOf3 = (vecA.add(vecB)).add(vecC);
You should make certain that you understand this syntax.
It is at times like this when I wish that Java supported overloaded operators in a manner similar to C++. Overloading the + operator would make the syntax much more intuitive than that shown by the code in Listing 11 .
Back to the drawing
Now turn your attention back to the drawing in Image 1 . The red, green, and blue vectors are drawn in a head-to-tail manner as described earlier. The sumOf3 (black) vector is drawn with its tail coinciding with the tail of the first (red) vector. Note that the head of the black vector coincides with the head of the last (blue) vector in the sum. Although not a definitive proof, this is at least a strong indication that the head-to-tail rule works for adding any number of vectors.
An overridden paint method
The MyCanvas class also includes an overridden paint method. However, the code in that method is very similar to code that I explained in the earlier module titled GAME 2302-0110: Updating the Math Library for Graphics . Therefore, I won't explain that code again in this module. You can view the overridden paint method in Listing 20 .
That concludes the discussion of the program named VectorAdd01 .
A complete listing of this program is provided in Listing 21 near the end of the module. This program illustrates the relationship between the coordinate frame and a geometric object described in that coordinate frame.
A GUI allows the user to move the origin of the coordinate frame. Proper mathematical corrections are made such that a geometric object described in that coordinate frame maintains its position relative to world coordinates even when the coordinate frame is changed. This causes its position relative to the coordinate frame to change.
Screen output at startup
Image 2 shows the screen output of the program at startup.
| Image 2: Screen output from CoordinateFrame01 at startup. |
|---|
![]() |
The axes are difficult to see
At this point, the origin is at the upper-left corner of the canvas. Although orthogonal axes are drawn intersecting at the origin, they are at the very edge of the canvas and are only barely visible. I will later refer to this coordinate frame with the origin in the upper-left corner as world coordinates .
A point has been defined (but not drawn) at a location specified by X equal to 196 and Y equal to 165. Even though the point is not drawn, a red vector has been drawn with its tail located at that point. A green vector has been drawn with its tail at the head of the red vector. A blue vector has been computed as the sum of the red and green vectors and it has been drawn with its tail at the tail of the red vector. As you learned in the previous program, this results in a closed polygon that is drawn at the point defined above.
Modify the coordinate frame
Image 3 shows the result of modifying the coordinate frame and then causing everything to be re-drawn. The coordinate frame is modified by entering values into the two user input fields and clicking the Replot button at the bottom of the GUI.
| Image 3: Screen output from CoordinateFrame01 after changes to the coordinate frame. |
|---|
![]() |
The new location of the origin
In Image 3 , the origin of the coordinate frame has been moved to the right by an amount that is equal to 40-percent of the width of the off-screen image, and has been moved down by an amount that is 60-percent of the height of the off-screen image. Then a pair of orthogonal axes was drawn, intersecting at the new location of the origin.
A point is simply a location in space
Although a vector doesn't have a location property and therefore is immune to changes in the coordinate frame, a point does have a location property. In fact that is the only property that a point does have, because a point is simply a location in space. Furthermore, that location is always specified relative to some coordinate frame. In order to cause the point to remain in the same location relative to world coordinates, (which was the objective here) , its values relative to the current coordinate frame must be modified each time the coordinate frame is modified.
After the values representing the point were modified appropriately, the three vectors were drawn in Image 3 with the tails of the red and blue vectors located at the point. This caused the geometric object described by the three vectors to remain in the same location relative to world coordinates. However, when the current coordinate frame no longer matched the world coordinate frame, the location of the geometric object changed relative to the current coordinate frame. The geometric object is closer to the origin of the current coordinate frame in Image 3 than was the case in Image 2 .
More complicated code
The code in this program is somewhat more complicated than the code in the previous program, mainly due to the inclusion of an interactive GUI in the program. I have published many previous tutorials that explain how to write interactive programs in Java, and I won't repeat that explanation here. Instead, I will concentrate on the use of the game-math library in my explanation of this program. What this really means is that I am only going to explain the following three methods in this program:
You can view the remaining program code in Listing 21 near the end of the module.
The actionPerformed method
This method must be defined in the class named GUI because the GUI class implements the ActionListener interface. Because an object of the GUI class is registered as a listener on the Replot button shown in Image 2 , the actionPerformed method is called each time the user clicks the button.
| Listing 12: The actionPerformed method. |
|---|
|
What does the actionPerformed method do?
There is nothing complicated about the code in Listing 12 . This code performs the following actions as indicated by the embedded comments:
The setCoordinateFrame method
This method, which is shown in Listing 13 , is used to set the coordinate frame of the off-screen image by setting the origin to the specified offset values relative to origin of the world coordinate frame.
| Listing 13: The setCoordinateFrame method. |
|---|
|
What does the setCoordinateFrame method do?
As mentioned earlier, the origin of the world coordinate frame is the upper-left corner of the off-screen image. The setCoordinateFrame method assumes that the current coordinate frame coincides with the world coordinate frame when the method is called. This is because the method changes the coordinate frame relative to the current coordinate frame.
The method begins by painting the background white erasing anything already there. (Note that this step erases the entire image only when the coordinate frame coincides with the world coordinate frame when the method is called.)
Then the method establishes the new coordinate frame by translating the origin of the off-screen image using the X and Y offset values received as incoming parameters.
Finally, the method draws black orthogonal axes intersecting at the origin of the new coordinate frame on the off-screen image.
Beginning of the drawOffScreen method
The code for the method named drawOffScreen begins in Listing 14 . This method is called once in the constructor for the GUI class (see Listing 21 ) , and again each time the user clicks the Replot button shown in Image 2 .
The purpose of this method is to create some Vector objects and to cause visual manifestations of the Vector objects to be drawn onto an off-screen image.
| Listing 14: Beginning of the drawOffScreen method. |
|---|
|
The drawOffScreen method begins by calling the setCoordinateFrame method to establish a new coordinate frame using offset values entered by the user, (or default offset values of 0.0 at startup) .
Define a point to position the vectors
Listing 15 instantiates a new GM2D04.Point object that will be used to locate the three vectors that form the closed polygon shown in Image 2 . The location of the polygon relative to the world coordinate frame will remain the same regardless of how the current coordinate frame is changed.
| Listing 15: Define a point to position the vectors. |
|---|
|
The code in Listing 15 is probably the most important code in the entire program relative to the objective of the program. As I mentioned earlier, if you want the location of a point to remain the same relative to the world coordinate frame when you change the current coordinate frame, you must modify the values that represent that point whenever you cause the current coordinate frame to be different from the world coordinate frame. The code in Listing 15 makes that modification.
Remaining code in the drawOffScreen method
The remaining code in the drawOffScreen method is shown in Listing 16 .
| Listing 16: Remaining code in the drawOffScreen method. |
|---|
|
With one exception, there is nothing in Listing 16 that I haven't already explained in earlier programs in this or previous modules. Therefore, I won't repeat those explanations here.
The one exception
Recall from Image 2 that we need to draw the green vector with its tail located at the head of the red vector. In order to do that, we must be able to determine the location of the head of the red vector relative to the current coordinate frame.
The getData method of the Vector class knows nothing about position. That method simply returns the X and Y coordinate values that describe the length of the vector relative to its tail.
(For the special case where the tail is located at the origin, the getData method returns the X and Y coordinates of the head of the vector.)
However, because the tail of the red vector in this case is not necessarily located at the origin, we must calculate the position of the head of the red vector taking the position of its tail ( startPoint ) into account. The code in Listing 16 does just that.
That concludes the discussion of the program named CoordinateFrame01 .
Hopefully, you have been studying the Kjell tutorial as instructed in the section titled Homework assignment . This program illustrates the addition of two vectors using two different approaches that result in the parallelogram described by Kjell. That parallelogram is shown in the screen output in Image 4 .
| Image 4: Screen output from the program named VectorAdd02. |
|---|
![]() |
The method named drawOffScreen
A complete listing of this program is provided in Listing 22 near the end of the module. Most of the new material is contained in the method named drawOffScreen . Therefore, I will limit my explanation to the method named drawOffScreen , which begins in Listing 17 .
| Listing 17: Beginning of the method named drawOffScreen of the program named VectorAdd02. |
|---|
|
There is nothing new in Listing 17 . The code in Listing 17 produces the black vector in Image 4 plus the red and green vectors that appear above the black vector.
Do the same operations in a different order
Listing 18 begins by drawing the red and green vectors again. However, this time the green vector is drawn with its tail at the origin, and the red vector is drawn with its tail at the head of the green vector as shown by the green and red vectors below the black vector in Image 4 . This is perfectly legal because a vector has no location property. We can draw a vector anywhere we please provided we draw it with the correct length and direction.
| Listing 18: Do the same operations in a different order. |
|---|
|
Then Listing 18 creates another vector by adding the red and green vectors and refers to the new vector as sumB . In the case of Listing 17, vecB is added to vecA to produce sumA . In Listing 18, vecA is added to vecB to produce sumB . In other words, the two addition operations are performed in reverse order in the two listings. As I have mentioned before, the order in which you add vectors doesn't matter. The result will be the same no matter the order in which you add them.
This is demonstrated in Listing 18 by drawing the vector referred to by sumB in black. As you can see in Image 4 , the drawing of sumB overlays the earlier drawing of sumA and you can't tell one from the other.
(You know that the length of the two vectors is the same because the little circles at the heads of the two vectors overlay one another. You know that the directions are the same because sumB completely covers sumA .)
That concludes the discussion of the program named VectorAdd02 .
This program illustrates the fact that the length of the sum of two vectors is not necessarily equal to the sum of the lengths of the two vectors.
Two vectors are added by the program. The length of the sum is much smaller than the length of either of the original vectors. This is shown in Image 5 where the red vector is added to the green vector producing the shorter black vector.
| Image 5: Graphic screen output from the program named VectorAdd03. |
|---|
![]() |
Command-line output
In addition to the graphic output shown in Image 5 , this program also produces three lines of text on the command-line screen as shown in Image 6 .
| Image 6: Command-line output from the program named VectorAdd03. |
|---|
|
The text output on the command-line screen shows the length of each vector. As you can see in Image 6 , the length of the black vector is much less than the length of either the red vector or the blue vector.
Not much that is new
The only thing that is new in this program is the call to the new getLength method of the GM2D04.Vector class to compute and display the length of each vector in Image 6 .
The source code for the getLength method is shown in Listing 2 . This code computes the length of the vector as the square root of the sum of the squares of the X and Y components of the vector. Other than that code, there is no code in this program that warrants further explanation.
You can view a complete listing of the program in Listing 23 near the end of the module.
This program illustrates the addition of a Vector object to a Point object producing a new Point object. Both points and the vector are drawn on the screen as shown in Image 7 .
| Image 7: Screen output from the program named VectorAdd04. |
|---|
![]() |
The only thing that is new in this program is the call to the new addVectorToPoint method of the GM2D04.Point class to add the vector to the point producing a new point.
The source code for the addVectorToPoint method is shown in Listing 3 . You can view a complete listing of the program in Listing 24 near the end of the module.
A very powerful capability
Don't be fooled by the apparent simplicity of the addVectorToPoint method. The ability to add a vector to a point provides a powerful new capability to the game-math library. As you will see in the next module, this capability makes it possible not only to translate geometrical objects from one location in space to another, but also makes it possible to animate geometrical objects.
Click here to download a zip file containing standard javadoc documentation for the library named GM2D04 . Extract the contents of the zip file into an empty folder and open the file named index.html in your browser to view the documentation.
Although the documentation doesn't provide much in the way of explanatory text (see Listing 19 and the explanations given above) , the documentation does provide a good overview of the organization and structure of the library. You may find it helpful in that regard.
The homework assignment for this module was to study the Kjell tutorial through Chapter 3 - Vector Addition.
The homework assignment for the next module is to study the Kjell tutorial through Chapter 5 - Vector Direction .
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 19 through Listing 24 . Compile the code and execute it in conjunction with the game-math library provided in Listing 19 . 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
In the next module you will learn how to use the game-math library for translation and animation in two dimensions.
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 19 through Listing 24 below.
| Listing 19: Source code for the game-math library named GM2D04. |
|---|
|
.
| Listing 20: Source code for the program named VectorAdd01. |
|---|
|
.
| Listing 21: Source code for the program named CoordinateFrame01. |
|---|
|
.
| Listing 22: Source code for the program named VectorAdd02. |
|---|
|
.
| Listing 23: Source code for the program named VectorAdd03. |
|---|
|
.
| Listing 24: Source code for the program named VectorAdd04. |
|---|
|
Using Java and the game-math library named GM2D04 , or using a different programming environment of your choice, write a program that creates twelve random values in the approximate range from -64 to +63. Use those values in pairs to define six mathematical vectors.
Draw the six vectors in a head-to-tail arrangement in alternating colors of green and blue with the tail of the first vector at the origin as shown in Image 8 .
Compute and draw the sum of the six vectors in red with the tail of the sum vector at the origin.
Cause the origin of your reference frame to be at the center of your drawing and draw the axes for a Cartesian coordinate system in the reference frame in black.
Cause the positive x direction to be to the right.
Cause the positive y direction be either up or down according to your choice.
Use a symbol of your choice to indicate the head of each vector.
Cause the program to display your name in some manner.
| Image 8: Screen output from Exercise 1. |
|---|
![]() |
Using Java and the game-math library named GM2D04 , or using a different programming environment of your choice, write a program that creates four random values in the approximate range from -128 to +127. Use those values in pairs to define two mathematical vectors.
Create a third vector as the sum of the first two vectors.
Using red, green, and blue, draw the three vectors in a way that illustrates the parallelogram rule for vector addition as shown in Image 9 .
Cause the origin of your reference frame to be at the center of your drawing and draw the axes for a Cartesian coordinate system in the reference frame in black.
Cause the positive x direction to be to the right. Cause the positive y direction be either up or down according to your choice.
Use a symbol of your choice to indicate the head of each vector.
Cause the program to display your name in some manner.
Because of the random nature of the vectors, you may need to run your program more than once to open up the vector diagram and get a clear picture of the parallelogram rule for vector addition.
| Image 9: Screen output from Exercise 2. |
|---|
![]() |
-end-