Skip to content Skip to navigation

OpenStax-CNX

You are here: Home » Content » GAME 2302-0360 Motion -- Displacement and Vectors

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

GAME 2302-0360 Motion -- Displacement and Vectors

Module by: R.G. (Dick) Baldwin. E-mail the author

Summary: The purpose of this module is to introduce motion and to explain displacement and vector analysis.

Preface

General

This module is part of a series of modules designed for teaching the physics component of GAME2302 Mathematical Applications for Game Development at Austin Community College in Austin, TX. (See GAME 2302-0100: Introduction for the first module in the course along with a description of the course, course resources, homework assignments, etc.)

The purpose of this module is to introduce motion and to explain displacement and vector analysis.

Viewing tip

I recommend that you open another copy of this document 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

  • Image 1 . A graphic showing displacement.
  • Image 2 . Vector diagram for a familiar example.
  • Image 3 . A triangle with sides of 30, 40, and ?.
  • Image 4 . Vector diagram for the sum of six vectors.
  • Image 5 . Illustration of the parallelogram law.
  • Image 6 . Screen output for Listing #1.
  • Image 7 . Screen output for Listing #2.
  • Image 8 . Screen output for Listing #3.

Listings

General background information

Bodies - not a reference to people

To begin with, physics textbooks often refer to something called bodies . By this, they are not referring to living bodies or the carcasses of once living creatures. Instead, they are referring to what people might ordinarily call objects.

For example, somewhere in this series of modules, we will discuss something call ed a free body diagram . A free body diagram can be drawn relative to any object, such as a child sitting motionless in a swing on the playground or a piano hanging on a rope.

Rest and motion

While nothing in the universe is truly motionless (at rest), some things around us such as buildings seem to be at rest, while other things such as planes, trains, and busses appear to be in motion.

There is no such thing as absolute rest. However, two bodies moving together at the same rate (with reference to some third body) may be deemed to be at rest relative to one another.

Therefore, if you are standing motionless on the Earth, you are at rest relative to the Earth with reference to the Sun.

Kinematics and kinetics

The fundamental properties of motion are often referred to as kinematics .

According to the course description, in addition to "applications of mathematics and science" , the course is also to include "the utilization of matrix and vector operations, kinematics, and Newtonian principles in games and simulations" ,

The relationships between motion and force are often referred to as kinetics . These are the topics that will be covered in this and the next several modules in this collection.

Displacement

If one body is moved with respect to another body, either one of them may be said to have experienced a displacement .

Displacement, along with vector analysis will be the primary topics covered in this module.

Discussion and sample code

Displacement

As mentioned above, if one body is moved with respect to another body, either one of them may be said to have experienced a displacement .

Displacement is not the same as distance

Assume, for example, that you go to the local high school and run five laps around the track, stopping exactly where you started. The distance that you have run will be the length of the path that you followed while running. However, while you may be completely out of breath by that point in time, the magnitude of your displacement will have been zero.

Scalars versus vectors

Distance is a scalar quantity, while displacement is a vector quantity. Scalar quantities have only magnitude, such as three kilometers.

Vector quantities have two parts: magnitude and direction . For example, you might describe a vector quantity as having a magnitude of three kilometers and a direction of northwest.

Magnitude and direction

A displacement vector must have both magnitude and direction. For example, if you were to run about three-fourths of the way around the track, the distance that you ran would be the length of your path.

However, the magnitude of your displacement would be the straight-line distance from your starting point to your stopping point.

The direction of your displacement would be an angle measured between some reference (such as due east, for example) and an imaginary line connecting your starting point and your stopping point.

If you stop where you start...

Getting back to the original proposition, if your stopping point is exactly the same as your starting point, the magnitude of your displacement vector will be zero and the angle of your displacement vector will be indeterminate.

Vector notation

Assume that there are three spots marked on the top of a table as A, B, and C. If an object is moved from A to B and then from B to C, using vectors, it may be stated that:

vecAC = vecAB + vecBC

where vecAB, vecBC, and vecAC represent vectors.

Typical notation

A typical notation for a vector in a physics textbook is something like AB, possibly in boldface and/or italics, with a small arrow drawn above the two letters. However, there is no such small arrow on a QWERTY keyboard, making it very difficult for me to reproduce in these modules.

My alternative notation

Therefore, in these physics modules, I will use the following notation

vecAB

to indicate a vector extending from the spot labeled A to the spot labeled B.

In order to determine direction in an unambiguous way, you often need to know where the vector starts (the tail) and where it ends (the head). The notation used above indicates that the tail of the vector is at A and the head is at B.

In some cases, particularly in JavaScript code where a vector is defined by magnitude and direction instead of by a starting point and an ending point, I will refer to a vector simply as

vecA, vecB, etc.

A graphic illustrating displacement

Image 1 is a graphic that illustrates displacement.

1
Image 1: A graphic showing displacement.
Missing image

The triangle shown in Image 1 is a physical representation of the vector equation

vecAC = vecAB + vecBC

As usual, please ignore the lower-case letters scattered throughout the image, which were placed there for a purpose other than for use in this module.

What does this mean?

This vector equation does not mean that the algebraic sum of two sides of the triangle are equal to the third side. However, it does mean that the displacement vecAB together with the displacement vecBC, have an effect that is equivalent to the single displacement vector vecAC.

Scalar addition and subtraction

When adding or subtracting scalars, you only need to take the magnitude values of the scalars into account and perform normal arithmetic using those magnitude values. An example would be to add 6 birds and 5 birds to produce a sum of 11 birds.

Vector addition and subtraction

However, when adding or subtracting vectors, you not only need to take the magnitude of the vectors into account, you also need to take the directions of the vectors into account.

A thought exercise

Image 2 shows the vector diagram for a familiar example.

2
Image 2: Vector diagram for a familiar example.
Missing image

Pretend that you are standing at point A in Image 2 . Then pretend that you walk 30 meters due east and designate that location as point B.

Up to this point, your displacement can be represented by vecAB with a magnitude of 30 and an angle of zero (assuming that due east represents an angle of zero).

Walk 40 meters due north

Now pretend that you walk 40 meters due north and mentally designate the stopping point as C. Your displacement relative to point B can be represented as vecBC with a magnitude of 40 meters and a direction of north or 90 degrees.

Displacement relative to point A

The interesting question is, what is your displacement relative to your starting point at A?

The displacement vector vecAC is the straight line from point A to point C, pointing in a direction from A to C. This vector is shown in the vector equation

vecAC = vecAB + vecBC

as the sum of the two vectors that describe the two segments of your journey from A to C.

Graphical addition of vectors

This process of connecting two or more vectors tail-to-head in sequence and then measuring the distance and direction from the tail of the first vector to the head of the last vector is known as the graphical addition of vectors . The resulting vector (in this case vecAC) is known as the sum of the vectors that make up the sequence. (The resulting vector is often called the resultant.)

A 3-4-5 triangle

Recalling what we learned in an earlier module where I discussed a 3-4-5 triangle, the magnitude of the vector from A to C (the hypotenuse of a right triangle with sides of 30 and 40) is 50 meters. You may also recall that the angle is approximately 53 degrees relative to the horizontal (east-west) line.

You should be able to measure the length of vecAC as well as the angle between that vector and the horizontal in Image 2 and get reasonable agreement with the above.

No requirement for a right triangle

While this example is based on a right triangle, that is not a requirement for adding vectors. I chose a 3-4-5 right triangle for the example because I knew what the answer would be in advance and also because it should have been familiar to you.

Graphic representation of vectors

Many problems in kinematics and kinetics can be solved graphically using a graphical representation of vectors.

Vectors are typically drawn as a heavy line between two points with an arrow head at one end and nothing in particular at the other end. The end with the arrow head is commonly called the head of the vector and the other end is commonly called the tail.

Somewhat inconvenient

Drawing vectors on graph paper can be inconvenient, particularly if you don't have graph paper available. Fortunately, as you will soon learn, it isn't necessary to use graphics to solve vector problems. You can also solve such problems mathematically, which will often be the better choice.

Addition and subtraction of vectors

There are at least two kinds of quantities in physics:

  • scalars , having magnitude only
  • vectors , having both magnitude and direction

You already know how to do scalar arithmetic. Otherwise, you probably wouldn't be interested in physics.

Another example

Let's go back to our original equation

vecAC = vecAB + vecBC

and assume that the magnitude of vecAB is 30 and the magnitude of vecBC is 40. The sum of those two vectors (vecAC) can have a magnitude ranging anywhere from 10 to 70 depending on the relative angles of vecAB and vecBC.

A triangle with sides of 30, 4 0, and ?

Consider the triangle shown in Image 3 .

3
Image 3: A triangle with sides of 30, 40, and ?
Missing image

Pretend that instead of walking due north from point B as shown in Image 2 , you change direction and walk northwest (135 degrees relative to the east-west horizontal line with east being zero degrees) keeping the length at 40 meters.

What happened to the displacement?

What is the displacement of the point C relative to the point A? I can't do the arithmetic in my head for this problem, but I can measure the length of vecAC to be about 28 meters and the angle of vecAC to be a little less than 90 degrees. (I will show you how to write a script to solve this problem mathematically later.)

Any number of displacements can be added

There is no limit to the number of displacement vectors that can be added in this manner. For example, pretend that you walk from point A,

  • 10 meters east to point B,
  • 12 meters southwest to point C,
  • 30 meters north to point D,
  • 15 meters east to point E,
  • 35 meters southwest to point F, and
  • 44 meters north to point G where you stop.

Your displacement vecAG will be

vecAG = vecAB + vecBC + vecCD + vecDE + vecEF + vecFG

even if your zigzag path crosses back over itself one or more times.

Vector diagram for the sum of six vectors

Image 4 shows the graphical addition of the six vectors described above.

4
Image 4: Vector diagram for the sum of six vectors.
Missing image

The displacement in Image 4 is the vector with its tail at A and its head at G, which you could measure with a measuring stick and a protractor.

Can be extended to three (or more) dimensions

The physics textbook titled College Physics by Mendenhall, Eve, Keys, and Sutton contains the following example.

"If a man climbs up the mast of a ship sailing east while the tide caries it south, then that sailor may have three displacements at right angles, vecAB 30 feet upward, vecBC 100 feet eastward, vecCD 20 feet southward, all with respect to the bed of the ocean. The three displacements vecAB, vecBC, and vecCD are equivalent to the single displacement vecAD; and in the same way, any number of displacements may be added together."

Difficult to draw

Of course, we can't easily draw that 3D vector diagram on a flat sheet of paper or construct it on a flat computer monitor, but we can solve for the displacement vecAD if we are familiar with computations in three dimensions. (An explanation of 3D computations is beyond the scope of this module.)

The parallelogram law

There is a law that states:

The sum of two vectors in a plane is represented by the diagonal of a parallelogram whose adjacent sides represent the two vector quantities.

The resultant

As I mentioned earlier, the sum of two or more vectors is called their resultant .

In general, the resultant is not simply the algebraic or arithmetic sum of the vector magnitudes. Instead, in our original vector equation

vecAC = vecAB + vecBC

vecAC is the resultant of the sum of vecAB and vecBC in the sense that a single vector vecAC would have the same effect as vecAB and vecAD acting jointly.

Geometrical addition

The parallelogram law is a form of geometrical addition. In engineering and physics, it is often used to find graphical solutions to problems involving forces, velocities, displacements, accelerations, electric fields, and other directed quantities. (Directed quantities have both magnitude and direction.)

Solving a vector problem with a parallelogram

Pretend that you walk from point A

  • 5 meters east to point B, followed by
  • 6 meters at an angle of 30 degrees (north of east) to point C.

Let's use a vector diagram and the parallelogram law to find the resultant displacement vector vecAC.

Image 5 illustrates the use of the parallelogram law to find a graphical solution to this problem.

5
Image 5: Illustration of the parallelogram law.
Missing image.

Put both vector tails at point A

Mentally designate the starting point on your vector diagram as point A. Construct a vector with a length of 5 meters and an angle of 0 degrees relative to the horizontal with its tail at point A. Mentally designate this vector as vecAB.

Construct a second vector with a length of 6 meters at an angle of 30 degrees with its tail at point A. Mentally designate this vector as vecBC.

Parallel lines

Construct a line at least 6 meters long starting at the head of vecBC. Make this line parallel to vecAB.

(There are drawing tools that make it easy to draw a line that is parallel to another line. This is one reason why this is a popular technique for graphically adding vectors.)

Construct another line, at least 7 meters long, starting at the head of vecAB. Make this line parallel to vecBC.

A parallelogram

Note the point where the two lines intersect. The two lines and the two vectors should now form a parallelogram as shown in Image 5 .

Solving for the resultant vector

According to the parallelogram law, the resultant vector, vecAC, is represented by a directed line that extends from point A to the intersection of the two lines that you constructed earlier. In other words, the sum of the two vectors is equal to a diagonal line that extends from the starting point to the opposite corner on the parallelogram that you constructed.

Subtracting vectors

In normal arithmetic subtraction, a subtrahend is subtracted from a minuend to find a difference .

To subtract a subtrahend vector from a minuend vector (in a plane), add 180 degrees to the direction of the subtrahend vector, causing it to point in the opposite direction, and add the modified subtrahend vector to the minuend vector.

If you subtract vecAB in the above example from vecBC, you should be able to show that the difference vector is represented by the other diagonal in the parallelogram. However, you will probably find it easier to do this mathematically rather than doing it graphically.

Mathematical solutions

The horizontal component of the sum of two or more vectors is the sum of the horizontal components of the vectors.

The vertical component of the sum of two or more vectors is the sum of the vertical components of the vectors.

The horizontal and vertical components

The horizontal and vertical components respectively of a vector vecAB are equal to

  • vecABh = vecABmag * cos(angle)
  • vecABv = vecABmag * sin(angle)

where

  • angle is the angle that the vector makes relative to the horizontal axis.
  • vecABh, vecABv, and vecABmag are respectively the horizontal component, the vertical component, and the magnitude of the vector vecAB

The magnitude of the resultant vector

Given the horizontal and vertical components of the resultant vector, the magnitude of the resultant vector can be found using the Pythagorean theorem as the square root of the sum of the squares of the horizontal and vertical components.

The angle of the resultant vector

The angle that the resultant vector makes with the horizontal axis is the arctangent (corrected for quadrant) of the ratio of the vertical component to the horizontal component.

Using the Math.atan method

We will need to deal with several issues that arise when using the Math.atan method. Therefore, I will write a script that contains a function to deal with those issues. Then we can simply copy that function into future scripts without having to consider those issues at that time.

Please copy the code shown in Listing 1 into an html file and open the file in your browser.

6
Listing 1: Using the Math.atan method.
<!-- File JavaScript01.html -->
<html><body>
<script language="JavaScript1.3">

//The purpose of this function is to receive the adjacent
// and opposite side values for a right triangle and to
// return the angle in degrees in the correct quadrant.
function getAngle(x,y){
  if((x == 0) && (y == 0)){
    //Angle is indeterminate. Just return zero.
    return 0;
  }else if((x == 0) && (y > 0)){
    //Avoid divide by zero denominator.
    return 90;
  }else if((x == 0) && (y < 0)){
    //Avoid divide by zero denominator.
    return -90;
  }else if((x < 0) && (y >= 0)){
    //Correct to second quadrant
    return Math.atan(y/x)*180/Math.PI + 180;
  }else if((x < 0) && (y <= 0)){
    //Correct to third quadrant
    return Math.atan(y/x)*180/Math.PI + 180;
  }else{
    //First and fourth quadrants. No correction required.
    return Math.atan(y/x)*180/Math.PI;
  }//end else
}//end function getAngle

//Test for a range of known angles.
var angIn = 0;
var angOut = 0;
var x = 0;
var y = 0;
while(angIn <= 360){
  x = Math.cos(angIn*Math.PI/180);
  y = Math.sin(angIn*Math.PI/180);
  angOut = getAngle(x,y).toFixed(1);
  document.write("angle = " + angOut + "<br/>");
  angIn = angIn + 30;
}//end while loop

document.write("The End")

</script>
</body></html>

The screen output

The text shown in Image 6 should appear in your browser window when you open the html file in your browser.

7
Image 6: Screen output for Listing #1.
angle = 0.0
angle = 30.0
angle = 60.0
angle = 90.0
angle = 120.0
angle = 150.0
angle = 180.0
angle = 210.0
angle = 240.0
angle = 270.0
angle = -60.0
angle = -30.0
angle = -0.0
The End 

Structure of the script

The script shown in Listing 1 begins by defining a function named getAngle . The purpose of this function is to return an angle in degrees in the correct quadrant based on the lengths of the adjacent and opposite sides of an enclosing right triangle.

Then the script uses a while loop to test the function for a series of known angles ranging from 0 to 360 degrees inclusive.

An indeterminate result

The getAngle function calls the Math.atan method to compute the angle whose tangent is the ratio of the opposite side (y) to the adjacent side (x) of a right triangle.

If both x and y are zero, the ratio y/x is indeterminate and the value of the angle cannot be computed. In fact there is no angle corresponding to the ratio 0/0. However, the function must either return the value of an angle, or must return some sort of flag indicating that computation of the angle is not possible.

In this case, the function simply returns the value zero for the angle.

Avoiding division by zero

If the value of x is zero and the value of y is not zero, the ratio y/x is infinite. Therefore, the value of the angle cannot be computed. However, in this case, the angle is known to be 90 degrees (for y greater than zero) or 270 degrees (-90 degrees, for y less than zero). The getAngle function traps both of those cases and returns the correct angle in each case.

Correcting for the quadrant

The Math.atan method receives one parameter and it is either a positive or negative value. If the value is positive, the method returns an angle between 0 and 90 degrees. If the value is negative, the method returns an angle between 0 and -90 degrees. Thus, the angles returned by the Math.atan method always lie in the first or fourth quadrants.

(Actually, as I mentioned earlier, +90 degrees and -90 degrees are not possible because the tangent of +90 degrees or -90 degrees is an infinitely large positive or negative value. However, the method can handle angles that are very close to +90 or -90 degrees.)

A negative y/x ratio

If the y/x ratio is negative, this doesn't necessarily mean that the angle lies in the fourth quadrant. That negative ratio could result from a positive value for y and a negative value for x. In that case, the angle would lie in the second quadrant between 90 degrees and 180 degrees.

The getAngle function tests the signs of the values for y and x. If the signs indicate that the angle lies in the second quadrant, the value returned from the Math.atan method is corrected to place the angle in the second quadrant. The corrected angle is returned by the getAngle function.

A positive y/x ratio

Similarly, if the y/x ratio is positive, this doesn't necessarily mean that the angle lies in the first quadrant. That positive ratio could result from a negative y value and a negative x value. In that case, the angle would lie in the third quadrant between 180 degrees and 270 degrees.

Again, the getAngle function tests the signs of the values for y and x. If both values are negative, the value returned from the Math.atan method is corrected to place the angle in the third quadrant.

No corrections required...

Finally, if no corrections are required for the quadrant, the getAngle function returns the value returned by the Math.atan method. Note however, that in all cases, the Math.atan method returns the angle in radians. That value is converted to degrees by the getAngle function and the returned value is in degrees.

Positive and negative angles

As you can see from the results of the test shown in Image 6 , angles in the first, second, and third quadrants are returned as positive angles in degrees. However, angles in the fourth quadrant are returned as negative angles in degrees.

Mathematical solution to an earlier problem

Earlier in this module, I described a problem involving the sum of two displacement vectors. One vector had a magnitude of 30 meters with an angle of 0. The other vector had a magnitude of 40 meters with an angle of 135 degrees.

On the basis of a graphic solution, I estimated the length of the resultant vector to be about 28 meters and the angle of the resultant vector to be a little less than 90 degrees. I promised to provide a mathematical solution for that problem later, and that time has come.

Please copy the code shown in Listing 2 into an html file and open that file in your browser.

8
Listing 2: The sum of two vectors.
<!-- File JavaScript02.html -->
<html><body>
<script language="JavaScript1.3">

//The purpose of this function is to receive the adjacent
// and opposite side values for a right triangle and to
// return the angle in degrees in the correct quadrant.
function getAngle(x,y){
  if((x == 0) && (y == 0)){
    //Angle is indeterminate. Just return zero.
    return 0;
  }else if((x == 0) && (y > 0)){
    //Avoid divide by zero denominator.
    return 90;
  }else if((x == 0) && (y < 0)){
    //Avoid divide by zero denominator.
    return -90;
  }else if((x < 0) && (y >= 0)){
    //Correct to second quadrant
    return Math.atan(y/x)*180/Math.PI + 180;
  }else if((x < 0) && (y <= 0)){
    //Correct to third quadrant
    return Math.atan(y/x)*180/Math.PI + 180;
  }else{
    //First and fourth quadrants. No correction required.
    return Math.atan(y/x)*180/Math.PI;
  }//end else
}//end function getAngle


//Specify the magnitudes and angles of two vectors.
//Convert the angles from degrees to radians.
var vecABmag = 30;//at an angle of 0
var vecABang = 0*Math.PI/180;//degrees*radians/degrees=radians

var vecBCmag = 40;//at an angle of 135
var vecBCang = 135*Math.PI/180;//degrees*radians/degrees=radians


//Compute the horizontal and vertical components of each vector.
var vecABh = vecABmag*Math.cos(vecABang);
var vecABv = vecABmag*Math.sin(vecABang);

var vecBCh = vecBCmag*Math.cos(vecBCang);
var vecBCv = vecBCmag*Math.sin(vecBCang);

//Compute the sums of the horizontal and vertical components from
// the two vectors to get the horizontal and vertical component
// of the resultant vector.
var vecResultH = vecABh + vecBCh;
var vecResultV = vecABv + vecBCv;

//Use the Pythagorean theorem to compute the magnitude of the
// resultant vector.
var vecResultMag = Math.sqrt(Math.pow(vecResultH,2) + 
                   Math.pow(vecResultV,2));

//Compute the angle of the resultant.
vecResultAng = getAngle(vecResultH,vecResultV);

document.write("Hello from JavaScript" + "<br/>")
document.write("vecABv = " + vecABv + "<br/>");
document.write("vecABh = " + vecABh + "<br/>");
document.write("vecBCv = " + vecBCv + "<br/>");
document.write("vecBCh = " + vecBCh + "<br/>");
document.write("vecResultMag = " + vecResultMag + " <br/>");
document.write("vecResultAng = " + vecResultAng + " <br/>");


document.write("The End")

</script>
</body></html>

Screen output

When you open the html file in your browser, the text shown in Image 7 should appear in your browser window.

9
Image 7: Screen output for Listing #2.
Hello from JavaScript
vecABv = 0
vecABh = 30
vecBCv = 28.284271247461902
vecBCh = -28.2842712474619
vecResultMag = 28.336261665087125
vecResultAng = 86.5286817554714
The End 

Explanation of the code

Listing 2 begins with a copy of the getAngle method that I explained in conjunction with Listing 1 . I won't repeat that explanation here.

Define magnitudes and angles of vectors

Then Listing 2 declares and initializes four variables that represent the magnitude and angle of each of the two vectors. The variable names that end with "mag" contain magnitude values and the variable names that end with "ang" contain angle values, which are converted from degrees to radians.

Compute horizontal and vertical components

Then Listing 2 calls the Math.cos and Math.sin methods to compute the horizontal and vertical components of each vector. The variable names that end with "h" contain horizontal component values and the variable names that end with "v" contain vertical component values.

Compute the sums of the components

The procedure for adding two or more vectors is to

  • Add the horizontal components of all the vectors to get the horizontal component of the resultant vector.
  • Add the vertical components of all the vectors to get the vertical component of the resultant vector.
  • Compute the magnitude (if needed) of the resultant vector as the square root of the sum of the squares of the horizontal and vertical components.
  • Compute the angle (if needed) of the resultant vector as the arctangent of the ratio of the vertical component and the horizontal component.

Listing 2 computes the sum of the horizontal components from each of the vectors and saves the result in the variable named vecResultH . Then it computes the sum of the vertical components and saves the result in the variable named vecResultV .

Compute the magnitude of the resultant

In many cases, simply knowing the horizontal and vertical components is the solution to the problem. However, in some cases, it is necessary to convert those components into a magnitude and an angle.

There are a couple of ways to compute the magnitude. One way is to use the Pythagorean theorem as described above to compute the square root of the sum of the squares of the horizontal and vertical components.

The Math.sqrt and Math.pow methods

The method named Math.sqrt can be called to return the square root of its positive argument. (If the argument is negative, the method returns NaN, which is an abbreviation for "Not a Number".)

The method named Math.pow can be called to raise the value specified by the first argument to the power specified by the second argument.

Listing 2 calls those two methods to compute the magnitude of the resultant and to save that value in the variable named vecResultMag .

Compute the angle of the resultant

Then Listing 2 calls the getAngle method that we developed earlier to get the angle of the resultant and to save the angle in degrees in the variable named vecResultAng .

Display the results

Finally Listing 2 calls the document.write method several times in succession to display the values stored in some of the variables mentioned above in the browser window as shown in Image 7 . As you can see, the magnitude and angle of the resultant agrees with the estimate that I made using the graphic method earlier.

Subtracting vectors

To subtract one vector from another using the mathematical approach, simply reverse the algebraic sign on the horizontal and vertical components for the subtrahend vector and perform the addition shown in Listing 2 .

Adding more than two vectors

Let's work through a problem that requires the addition of four vectors.

A graphical solution

First I would like for you to lay out the vectors, tail-to-head on graph paper to create a solution to this problem.

Pretend that you take a walk consisting of the following sequential segments. Angles are specified relative to east with east being zero degrees. Positive angles are counter-clockwise and negative angles are clockwise.

The segments are as follows:

  • 12 meters at 20 degrees
  • 8 meters at 120 degrees
  • 10.5 meters at -74 degrees
  • 12.5 meters at 145 degrees

What is your final displacement?

When you reach the end of the walk, what is your displacement (distance and direction) relative to the location at which you began the walk. You should be able to do a reasonable job of measuring the displacement using your vector diagram.

A mathematical solution

Please copy the code shown in Listing 3 into an html file and open the html file in your browser.

10
Listing 3: The sum of four vectors.
<!-- File JavaScript03.html -->
<html><body>
<script language="JavaScript1.3">

//The purpose of this function is to receive the adjacent
// and opposite side values for a right triangle and to
// return the angle in degrees in the correct quadrant.
function getAngle(x,y){
  if((x == 0) && (y == 0)){
    //Angle is indeterminate. Just return zero.
    return 0;
  }else if((x == 0) && (y > 0)){
    //Avoid divide by zero denominator.
    return 90;
  }else if((x == 0) && (y < 0)){
    //Avoid divide by zero denominator.
    return -90;
  }else if((x < 0) && (y >= 0)){
    //Correct to second quadrant
    return Math.atan(y/x)*180/Math.PI + 180;
  }else if((x < 0) && (y <= 0)){
    //Correct to third quadrant
    return Math.atan(y/x)*180/Math.PI + 180;
  }else{
    //First and fourth quadrants. No correction required.
    return Math.atan(y/x)*180/Math.PI;
  }//end else
}//end function getAngle


//Specify the magnitudes and angles of four vectors.
//Convert the angles from degrees to radians.
var vecAmag = 12;
var vecAang = 20*Math.PI/180;//degrees*radians/degrees=radians

var vecBmag = 8;
var vecBang = 120*Math.PI/180;//degrees*radians/degrees=radians

var vecCmag = 10.5;
var vecCang = -74*Math.PI/180;//degrees*radians/degrees=radians

var vecDmag = 12.5;
var vecDang = 145*Math.PI/180;//degrees*radians/degrees=radians


//Compute the horizontal and vertical components of each vector.
var vecAh = vecAmag*Math.cos(vecAang);
var vecAv = vecAmag*Math.sin(vecAang);

var vecBh = vecBmag*Math.cos(vecBang);
var vecBv = vecBmag*Math.sin(vecBang);

var vecCh = vecCmag*Math.cos(vecCang);
var vecCv = vecCmag*Math.sin(vecCang);

var vecDh = vecDmag*Math.cos(vecDang);
var vecDv = vecDmag*Math.sin(vecDang);

//Compute the sums of the horizontal and vertical components from
// the four vectors to get the horizontal and vertical component
// of the resultant vector.
var vecResultH = vecAh + vecBh + vecCh + vecDh;
var vecResultV = vecAv + vecBv + vecCv + vecDv;

//Use the Pythagorean theorem to compute the magnitude of the
// resultant vector.
var vecResultMag = Math.sqrt(Math.pow(vecResultH,2) +
                   Math.pow(vecResultV,2));

//Compute the angle of the resultant vector.
vecResultAng = getAngle(vecResultH,vecResultV);

document.write("Hello from JavaScript" + "<br/>")
document.write(
  "vecResultMag = " + vecResultMag.toFixed(2) + " <br/>");
document.write(
  "vecResultAng = " + vecResultAng.toFixed(2) + " <br/>");


document.write("The End")

</script>
</body></html>

Screen output

The text shown in Image 8 should appear in your browser when you open the html file in your browser.

11
Image 8: Screen output for Listing #3.
Hello from JavaScript
vecResultMag = 8.11
vecResultAng = 90.49
The End 

As you can see, the displacement vector is just a little over eight meters at an angle of about 90.5 degrees. In other words, your ending position was approximately 8 meters north of your starting position. Hopefully you were able to arrive at a very similar answer using vector diagram.

Explanation of the code

The code in Listing 3 is very similar to the code in Listing 2 . However, there is more of it because the code is adding four vectors instead of only 2.

As before, Listing 3 begins with the getAngle method that we developed earlier.

Magnitude and angle for each vector

Then Listing 3 defines eight variables containing the magnitudes and angles of the four segments of the walk.

(Note that the names that I used for the variables in this script are somewhat simpler than the names that I used in Listing 2 .)

Horizontal and vertical components

Following that, Listing 3 computes the horizontal and vertical components for each of the four vectors and saves those values in eight different variables.

Sums of components

Then Listing 3 computes and saves the sum of all four horizontal components and computes and saves the sum of all four vertical components.

After that, there is essentially no difference between the script in Listing 3 and the script in Listing 2 .

Other vector operations

In addition to the addition and subtraction of vectors, there are other operations that can be performed using vectors, such as the dot product and the cross product. However, those operations are beyond the scope of this module.

Run the scripts

I encourage you to run the scripts that I have presented in this lesson to confirm that you get the same results. Copy the code for each script into a text file with an extension of html. Then open that file in your browser. 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.

Miscellaneous

This section contains a variety of miscellaneous information.

Note:

Housekeeping material
  • Module name: GAME 2302-0360 Motion -- Displacement and Vectors
  • File: Game0360.htm
  • Published: 10/13/12
  • Revised: 12/31/12

Note:

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.

-end-

Content actions

Download module as:

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