Final edit completed on 01/30/12
Mathematical Applications for Game Development
Vector Addition
Read the "Scientific Notation and Significant Figures" tutorial at http://cnx.org/content/col11294/latest/
The previous chapter discussed addition of column matrices.
The addition of column matrices is an easy, mechanical procedure.
This chapter shows why it is a useful procedure
The following topics will be discussed:
Add the following two column matrices:
a = ( 3, 2 )T
b = (-2, 1 )T
a + b = ( 1, 3 )T
Vectors are geometric objects.
A particular vector can be represented in a variety of ways.
Important to understand the difference between
Figure 1 shows points A, B, and C (in two dimensions).
Figure 1. Vectors in 2D space. |
---|
![]() |
VI Info - Figure 1 shows three vectors. There are three points that form a triangle labeled A, B, and C. A is on the bottom left, C is on the bottom right, and B is above and between A and C, closer to C than to A.
Two vectors labeled u and w have their tails co-located at point A. The vector u, which is colored black has its head at point B. The vector w, which is colored blue, has its head at point C. A third vector labeled v, which is also colored black, has its tail at point B and its head at point C.
A displacement is a distance and a direction.
Vector u in Figure 1 is the displacement from A to B.
Vector v is the displacement from B to C.
The displacement from A to C is the vector w.
The effect of moving through the displacement u and then through the displacement v in Figure 1
In symbols:
where u, v, and w are all vectors.
Does the addition depend on where the vectors are located in space?
No, because vectors have no position.
Vector addition is usually shown as in Figure 1 or Figure 2.
Figure 1 and Figure 2 show that
Figure 2. Another vector diagram. |
---|
![]() |
VI Info - Figure 2 shows the same vector diagram as Figure 1, except in this rendering the points labeled A, B, and C were omitted.
Suppose that you wanted to move all the points of a geometric object
You could do this by moving each point through the single displacement w as shown in Figure 2.
Mentally draw the line in Figure 3 that represents the sum of vector s with vector t.
Figure 3. Vector addition. |
---|
![]() |
VI Info - Figure 3 shows two vectors labeled s and t. Vector s slopes upward from left to right and has its head on the right end. Vector t has its tail at the head of vector s. It slopes upward to the left.
The answer to Question 3 is shown in Figure 4.
Figure 4. The answer to Question 3. |
---|
![]() |
VI Info - Figure 4 shows a similar diagram as Figure 3. However, Figure 4 also shows a blue vector labeled s+t with its tail at the tail of vector s and its head at the head of vector t.
The head-to-tail rule for adding vector v to vector u is:
Figure 5. The head-to-tail rule. |
---|
![]() |
VI Info - Figure 5 shows approximately the same vector diagram as in Question 3. However, the left-to-right vector at the bottom of the triangle is labeled u and the right-to-left vector is labeled v. Vector v has its tail at the head of vector u. Both of those vectors are black and each has its tail and its head labeled as "tail" and "head".
A third blue vector labeled u+v extends from the tail of vector u to the head of vector v with its head at the head of vector v.
Mentally add vector e to vector d in Figure 6.
Figure 6. Question 4 vectors. |
---|
![]() |
VI Info - Figure 6 shows two vectors. The vector labeled d is relatively short and points from north to south. The vector labeled e is about three times as long and points from west to east. The two vectors are not located near one another in the diagram.
Figure 7 shows the vector e sliding up until its tail touches the head of vector d.
The sum is the vector from the tail of vector d to the head of vector e .
Figure 7. Answer 4 vector diagram. |
---|
![]() |
Figure 7 shows the tail of vector e connected to the head of vector d. It also shows a blue vector extending from the tail of vector d to the head of vector e. It forms the hypotenuse of a right triangle and slopes downward toward the right.
Figure 8 shows 3D vectors a and b added to form the resultant vector named c.
(The 3D box is there to aid in visualizing the three dimensions).
Figure 8. Vector addition in 3D. |
---|
![]() |
VI Info - Figure 8 contains a vector diagram that I will describe as follows:
Imagine a cardboard box setting on a table. As you face the box, the bottom front edge represents a vector labeled a pointing from left to right. The bottom right edge represents a vector labeled b pointing from front to back. The vertical edge on the back right represents a vector labeled d pointing straight up.
The text relating to this diagram refers to the sum of the vectors a and b.
If you were to reach down into the box and draw a vector from the bottom left corner to the bottom back right corner, that line would represent a vector named c pointing from front bottom left to back bottom right.
Question 5 refers to all three vectors described above.
The head-to-tail rule works in 3D as well as in 2D.
When two vectors are added in 3D,
Do you think it is it possible to add three vectors together,
If so, describe the result of the addition.
Yes. The result is the total displacement that would result in following each vector in turn.
Figure 9 shows the result of adding the vectors:
(a + b) + d = c + d.
The result is the vector
Figure 9. Associative. |
---|
![]() |
VI Info - Figure 9 shows a picture of the same box with a vector extending from the bottom front left corner to the upper back right corner. This vector is labeled as follows:
(A+B)+D = C+D
Figure 10 shows the result of adding
The result is the same.
This is a demonstration of the associative property of vector addition:
a + (b + c) = (a + b) + c
Figure 10. More associative |
---|
![]() |
VI Info - Figure 10 shows another image of the same box. However, in this case, the summation vector labeled c has been removed and replaced by a summation (resultant) vector that extends from the front bottom right corner to the top right back corner. This vector is labeled
B+D
Figure 10 also shows the resultant vector extending from the bottom front left corner to the top back right corner. However, this time the vector is labeled:
A+(B+D)
An equation on the page reads as follows:
a+(b+c) = (a+b)+c
The rule works in all dimensions.
Mostly the geometric vectors of computer graphics
The associative property means that sums of several vectors can be written without parentheses like
Say that you walk five blocks north, and then three blocks east.
If, instead, you had walked three blocks east and then five blocks north would you arrive at the same place?
Yes.
Vector addition is commutative,
Commutative Property:
a + b = b + a
where a and b are vectors.
If you start from point P in Figure 11
The head-to-tail rule yields vector c
Figure 11. Commutative. |
---|
![]() |
VI Info - Figure 11 shows the same box again. However, in this case, the front and back bottom edges are both labeled A and represent vectors pointing from left to right.
The left and right bottom edges are both labeled B and represent vectors pointing from front to back.
A resultant vector is labeled C and points from the front bottom left corner, which is labeled P to the back bottom right corner, which doesn't have a label.
Does the commutative property hold in all dimensions?
Yes
Points can be represented with column matrices.
You must first decide on a coordinate frame (often simply called a frame).
A coordinate frame consists of
In 2D space there are two axes (X and Y)
In 3D space there are three axes (X, Y, and Z).
We will concentrate on 2D space for now as shown in Figure 12.
Figure 12. 2D space. |
---|
![]() |
VI Info - Figure 12 contains three pictures. The left-most picture shows a vector V extending from A on the left to B on the right. Two short vertical lines of the same length extend upward from A and B and have no label. Short, upward sloping lines extend from the tops of those two lines meeting in the middle. The overall figure resembles an end view of a very simple house with a sloping roof that has its peak in the middle. The entire structure is enclosed near the center of a square border.
The center picture shows the same structure superimposed on a sheet of graph paper with horizontal and vertical grid lines. The structure is in the same location in the square border. Horizontal and vertical axes intersect at an origin near the lower left corner of the square. The origin is labeled (P sub 0). The axes and the resulting grid are parallel to the sides of the square. In this case, the vector V extends from point A at (2,2) to point B at (6,2).
The picture on the right shows the same structure in the same location in the square border superimposed on the same sheet of graph paper. However, in this case, the graph paper has been rotated and possibly moved such that the origin has been moved down and to the right and the axes are no longer parallel to the sides of the square. In this case, the vector V extends from point A at approximately (2,3) to point B, which is at approximately (4.8,1.6).
The left diagram in Figure 12 shows a very simple virtual world in 2D space.
The points and vectors exist in the space independent of any coordinate frame.
The center diagram in Figure 12 shows the same virtual world
In this coordinate frame, the point A
The right diagram in Figure 12 shows the same virtual world,
In the rightmost coordinate frame, the point A
The vital idea is that in a graphics program
Often, each object has its own frame,
You do this all the time with the real world.
For example, say you have a vase set on a table as in Figure 13.
Figure 13. Vase on a table. |
---|
![]() |
VI Info - Figure 13 is a picture of a simple 3D table with a vase containing a flower setting roughly in the center of the table.
Assume that you are talking to a friend and
You might describe the vase in Figure 13 as a sphere
That is describing the vase in its own frame.
You might describe the location of the vase as
That is using another frame to describe a location.
You might talk about how you are viewing the table
That is using yet another frame to describe a viewpoint.
You might walk around the table
This would be another frame.
As you are out walking, a stranger approaches you and asks for directions to the post office.
Which coordinate frame will you use:
Unless the stranger has a GPS receiver,
VI Info - Slides discussing this topic use the same Figure 12 as before.
See Figure 12.
The displacement from point A to point B is the vector v.
The vector does not depend on any coordinate system.
A vector has only length and direction but no location
Using the coordinate system in the middle diagram of Figure 12
In the middle diagram this is (4, 0)T.
Moving 4 units from point A in the direction of the x axis brings us to point B.
See Figure 12.
In the second coordinate system (rightmost diagram)
While the vector will remain constant,
Vectors and points are both represented by column matrices. Is this confusing?
According to Kjell, this can be confusing.
This confusion leads to the use of homogeneous coordinates, another way to represent points and vectors with column matrices. (Google it.)
See Figure 14.
Figure 14. Vector addition. |
---|
![]() |
VI Info - Figure 14 contains a vector diagram that is a pictorial representation of the three vector equations presented in the following slides.
A blue vector named A is added to a green vector named B producing a sum or resultant vector named C.
Despite the potential confusion Kjell continues to use column matrices for both points and vectors.
If vectors are represented with column matrices,
For example, in Figure 14,
a = ( 3, 2 )T
b = ( -2, 1 )T
a + b = c = ( 1, 3 )T
where a, b, and c represent vectors
Figure 14 shows the head-to-tail rule
Adding the column matrices a and b yields the column matrix c as shown below
a = ( 3, 2 )T
b = ( -2, 1 )T
a + b = c = ( 1, 3 )T
where a, b, and c represent vectors
The matrix c is the correct representation of the vector c.
Compute c = b + a for the same vectors a and b shown in Figure 14.
a = ( 3, 2 )T
b = ( -2, 1 )T
b + a = c = ( 1, 3 )T
Figure 15 shows the same addition but in a different order.
Figure 15. Vector addition in a different order. |
---|
![]() |
VI Info - Figure 15 shows the same addition but in a different order.
Follow these steps to draw the diagram shown in Figure 15, with vector B as the starting point:
Therefore, you can draw a picture of a vector
Since vector addition is commutative (independent of the order of addition),
Are vector addition and column matrix addition both associative?
Yes
VI Info - Unfortunately, the next few slides will use an inaccessible applet. Don't despair, however, because all the applet does is to provide a way to draw vectors on graph paper with a mouse.
Here are two vectors:
r = ( 4, 3 )T
s = ( 1, 2 )T
form the sum:
t = r + s
Do it by column matrix addition, and again by the head-to-tail rule.
Using the applet in Figure 16,
Figure 16. Vector addition applet. |
---|
See the solution to the problem in the previous slide in Answer 13.
Applying the rule:
t = (5, 5)T
Figure 17 shows a screen shot of the applet with the vectors drawn to produce the solution.
Figure 17. Screen shot of the solution (not an active applet) |
---|
![]() |
VI Info - In addition to the axes and the vectors, Figure 17 shows:
Add the vectors in the opposite order:
Form the sum
t = s + r
where
r = ( 4, 3 )T
s = ( 1, 2 )T
Do this by adding two new arrows to the diagram in the applet.
(Remember, vectors have no location, so it is OK to have several arrows in a diagram for the same vector.)
As before,
T = (5, 5)T
Figure 18 shows a screen shot of the solution in the applet.
Figure 18. Parallelogram for vector addition. |
---|
![]() |
VI Info - Figure 18 shows a screen shot of the applet showing the solution. Because the vectors are so close together, the image may not be accessible.
You can, (and should) experience the same thing that sighted students are experiencing with the applets by using the program named SVGDraw01 to draw the vector diagrams described on this slide, the previous couple of slides, and the next several slides and then embossing those vector diagrams.
There are two ways to form the sum as shown in Figure 18:
T = S + R
T = R + S
where
R = ( 4, 3 )T
S = ( 1, 2 )T
As shown in Figure 18, there are two ways to draw the diagram,
If you draw both versions,
A parallelogram is a four sided figure
The blue arrows representing the vector s in Figure 18
Thus, the blue arrows are parallel .
The green arrows representing the vector r in Figure 18
form the sum:
w = ( -2, -3 )T
Draw u, v, and w on the graph paper (applet),
where, as before,
and
Figure 19 shows a screen shot of the vector addition solution in the applet window.
Figure 19. Screen shot of applet solution. |
---|
![]() |
VI Info - Figure 19 shows a screen shot of the vector addition solution in the applet window.
Figure 19 shows
where
Now consider an ant that starts at the origin in Figure 19 and
A second ant starts at the origin in Figure 19 and
Both ants end up at the same point.
See Figure 20.
Figure 20. Displacements and lengths |
---|
![]() |
IV Info - Figure 20 shows a screen shot of the applet solution to a vector addition scenario that will be discussed shortly. It is doubtful that an embossed version would be very meaningful due to the fact that the vectors overlay one another.
Summing displacements (vectors) is not the same as summing their length.
In Figure 19, the sum of u and v yields a vector
You can observe this in Figure 19 by remembering that
(Later on this will be discussed using the Pythagorean Formula.)
This fact is called the triangle inequality:
Figure 20 shows a case where the length of the sum is much shorter than the sum of the lengths:
(For clarity g has been moved slightly away from where it should be.)
Can you think of a situation where
This is true if one vector has the same direction as the other vector.
See Figure 21.
Figure 21. Vectors in the same direction. |
---|
![]() |
VI Info - Figure 21 shows a screen shot of the sum of vectors in the same direction in the applet window. This image probably won't be meaningful as an embossed image due to the fact that the vectors and their labels overlay one another.
The addition of vectors that have the same direction is illustrated in Figure 21.
The head-to-tail rule is used to sum two vectors pointing in the same direction.
(Vectors in the same direction are called collinear).
The sum vector is slightly moved out of its correct position so that you can see it in the image.
The summed vectors in Figure 21 are
The sum is
For now, look at a picture or use geometry to determine if two vectors have the same direction .
Later on you will see a procedure to test if two vectors point in the same direction.
This example is a case where the "=" sign in the formula applies:
Can you think of another case in which the "=" sign applies?
When one of the vectors is a zero vector:
length(u + 0) <= length(u) + length(0)
See Figure 22.
Figure 22. Adding a zero vector. |
---|
![]() |
VI Info - see the discussion on the following slides.
Figure 22 adds the zero matrix ( 0, 0 )T to the matrix ( 4, 3 )T.
If (0, 0)T represents a displacement vector,
In the diagram, no arrow can be drawn for the zero vector
Now consider what this might mean:
If you think that makes sense, do the calculation.
What type of object is the result?
The result is a point:
(4, 4)T + (1, 2)T = ( 5, 6 )T
See Figure 23, which contains a diagram
The mathematical operation is the addition of a point and a vector.
Figure 23. Adding points and vectors. |
---|
![]() |
VI Info - Figure 23 The diagram is a box with two arrows entering the left side of the box and one arrow exiting the right side of the box. A label inside the box reads "Point plus Vector Operation." The two arrows entering the box on the left are labeled Point and Vector. The arrow exiting the box on the right is labeled Point.
The applet that lets you interactively draw vectors appears again in Question 21. In this case, two points are shown as dots and labeled as (4,4) and (5,6). You can replicate the behavior of the applet and create the drawing using the program named SVGDraw01.
If the vector (1, 2)T in Question 20 is a displacement (i.e., an amount by which to change x, and an amount by which to change y),
This is one of those situations where using the same representation (i.e. column matrices) for both points and vectors is confusing.
You have to keep track of what type of object each matrix represents.
A displacement vector added to a point results in a point.
Figure 23 shows that in diagram form.
Two mathematical objects of different types are added together.
Again, the "+" sign is overloaded.
The applet window shown in Figure 24 shows the point (4, 4)T and the point (5, 6)T.
Draw the vector (1, 2)T as a displacement from that point to the sum (5, 6)T.
Figure 24. Applet for question 21. |
---|
VI Info - The applet window shown in Figure 24 shows the point (4, 4)T and the point (5, 6)T.
The solution should look like the screen shot of the applet window shown in Figure 25.
Figure 25. Answer 21 screen shot. |
---|
![]() |
VI Info - Figure 25 shows a screen shot of an applet window with a vector extending from (4,4) to (5,6).
Sometimes the operation of adding a vector to a point is called translation.
The original point is sometimes said to have been "translated to a new location."
In mathematical terms, the sum of a vector and a point yields a new point.
The first point remains unchanged.
In computer graphics, we like to think about pictures
So sometimes people talk about "moving a point" and
We have seen
Do you suppose that the following operation can be done:
The sum of two points does not mean anything, geometrically.
You can mechanically form the sum of two column vectors that represent points,
The next chapter will continue the discussion of operations on vectors.
The chapter after that will discuss even more operations on vectors.
The chapter after that will discuss even more operations on vectors.
It is going to be a long semester.
The End
zz
-end-