# Connexions

You are here: Home » Content » Accessible Physics Concepts for Blind Students » Motion -- Displacement and Vectors

### Lenses

What is a lens?

#### 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?

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

#### Affiliated with (What does "Affiliated with" mean?)

This content is either by members of the organizations listed or about topics related to the organizations listed. Click each link to see a list of all content affiliated with the organization.
• Featured Content

This collection is included inLens: Connexions Featured Content
By: Connexions

"Blind students should not be excluded from physics courses because of inaccessible textbooks. The modules in this collection present physics concepts in a format that blind students can read […]"

Click the "Featured Content" link to see all content affiliated with them.

Click the tag icon to display tags associated with this content.

### Recently Viewed

This feature requires Javascript to be enabled.

### Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

Inside Collection (Book):

Book by: Richard Baldwin. E-mail the author

# Motion -- Displacement and Vectors

Module by: Richard Baldwin. E-mail the author

Summary: The purpose of this module is to introduce motion and to explain displacement and vector analysis in a format that is accessible to blind students.

## Preface

### General

This module is part of a collection of modules designed to make physics concepts accessible to blind students.

See http://cnx.org/content/col11294/latest/ for the main page of the collection and http://cnx.org/content/col11294/latest/#cnx_sidebar_column for the table of contents for the collection.

The collection is intended to supplement but not to replace the textbook in an introductory course in high school or college physics.

The purpose of this module is to introduce motion and to explain displacement and vector analysis in a format that is accessible to blind students.

### Prerequisites

In addition to an Internet connection and a browser, you will need the following tools (as a minimum) to work through the exercises in these modules:

The minimum prerequisites for understanding the material in these modules include:

### 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 figures and listings while you are reading about them.

#### Figures

• Figure 1 . Key-value pairs for the image in Phy1060a1.svg.
• Figure 2 . Mirror image contained in the file named Phy1060a1.svg.
• Figure 3 . Key-value pairs for the image in Phy1060b1.svg.
• Figure 4 . Mirror image contained in the file named Phy1060b1.svg.
• Figure 5 . Key-value pairs for the image in Phy1060c1.svg.
• Figure 6 . Mirror image contained in the file named Phy1060c1.svg.
• Figure 7 . Key-value pairs for the image in Phy1060d1.svg.
• Figure 8 . Mirror image contained in the file named Phy1060d1.svg.
• Figure 9 . Key-value pairs for the image in Phy1060e1.svg.
• Figure 10 . Mirror image contained in the file named Phy1060e1.svg.
• Figure 11 . Screen output for Listing #1.
• Figure 12 . Screen output for Listing #2.
• Figure 13 . Screen output for Listing #3.
• Figure 14 . Non-mirror-image version of the image contained in the file named Phy1060a1.svg.
• Figure 15 . Non-mirror-image version of the image contained in the file named Phy1060b1.svg.
• Figure 16 . Non-mirror-image version of the image contained in the file named Phy1060c1.svg.
• Figure 17 . Non-mirror-image version of the image contained in the file named Phy1060d1.svg.
• Figure 18 . Non-mirror-image version of the mage contained in the file named Phy1060e1.svg.

### Supplemental material

I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com .

## 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 . 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 had a displacement . Displacement, along with vector analysis will be the primary topics covered in this module.

## Discussion and sample code

### Creation of tactile graphics

The module titled Manual Creation of Tactile Graphics at http://cnx.org/content/m38546/latest/ explained how to create tactile graphics from svg files that I will provide.

If you are going to have an assistant create tactile graphics for this module, you will need to download the file named Phy1060.zip , which contains the svg files for this module. Extract the svg files from the zip file and provide them to your assistant.

Also, if you are going to use tactile graphics, it probably won't be necessary for you to perform the graph board exercises. However, you should still walk through the graph board exercises in your mind because I will often embed important physics concepts in the instructions for doing the graph board exercises.

In each case where I am providing an svg file for the creation of tactile graphics, I will identify the name of the appropriate svg file and display an image of the contents of the file for the benefit of your assistant. As explained at http://cnx.org/content/m38546/latest/ , those images will be mirror images of the actual images so that your assistant can emboss the image from the back of the paper and you can explore it from the front.

Also in those cases, I will provide a table of key-value pairs that explain how the Braille keys in the image relate to text or objects in the image.

### Displacement

As mentioned above, if one body is moved with respect to another body, either one of them may be said to have had 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, and even if there were, it might not be compatible with your screen reader and/or your Braille display.

My alternative notation

Therefore, 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 graph board exercise

The svg file for this exercise is named Phy1060a1.svg. The table of key-value pairs for this file is provided in Figure 1 .

Figure 1: Key-value pairs for the image in Phy1060a1.svg.
Key-value pairs for the image in Phy1060a1.svg.
  m: vecAC = vecAB + vecBC n: A o: B p: C q: This is vector AB r: This is vector BC s: This is vector AC, which is the sum of the other two vectors t: File: Phy1060a1.svg 

The image contained in this file is shown in Figure 2 . A non-mirror-image version of the file is shown in Figure 14 .

Graph board instructions

Please mark three points on your graph board using pushpins and mentally label them A, B, and C. Then use rubber bands, pipe cleaners, or whatever works best for you to connect them in such a way that they form a triangle. That triangle is a physical representation of the vector equation

vecAC = vecAB + vecBC

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.

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.

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.

Another graph board exercise -- a familiar example

The svg file for this exercise is named Phy1060b1.svg. The table of key-value pairs for this file is provided in Figure 3 .

Figure 3: Key-value pairs for the image in Phy1060b1.svg.
Key-value pairs for the image in Phy1060b1.svg.
  m: vecAC = vecAB + vecBC n: C o: North p: Resultant vector A C q: Displacement vector B C r: Displacement vector A B s: A t: B u: File: Phy1060b1.svg v: East 

The image contained in this file is shown in Figure 4 . A non-mirror-image version of the file is shown in Figure 15 .

Graph board instructions

Place a pin in the graph board and mentally designate that point as point A. Now pretend that you walk 30 meters due east and place a pin at that point. Mentally designate that point 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, mentally designate the stopping point as C, and place a pin there. 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.

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. I 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 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.

Vectors on a graph board

As a blind student, you can't easily draw vectors, but you can represent vectors on your graph board by connecting two pushpins with something straight (like a stretched rubber band) and using something tactile to mark the head.

(Perhaps you could use a pushpin with a cylindrical top to indicate the tail and a pushpin with a spherical top to represent the head. Another option might be to get some small buttons and place the pin at the head through one of the holes in the button.)

Somewhat inconvenient

Constructing vectors on a graph board is less convenient for blind students than drawing them on graph paper is for sighted students. 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 for blind students.

### 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.

One textbook describes vectors as "straight lines, with proper directions, indicated by arrowheads, and with lengths drawn to scale designated by vecAB (my notation), etc.

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 anywhere from 10 to 70 depending on the relative angles of vecAB and vecBC.

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

The svg file for this exercise is named Phy1060c1.svg. The table of key-value pairs for this file is provided in Figure 5 .

Figure 5: Key-value pairs for the image in Phy1060c1.svg.
Key-value pairs for the image in Phy1060c1.svg.
  m: vecAC = vecAB + vecBC n: C o: North p: Resultant vector A C q: Displacement vector B C r: Displacement vector A B s: A t: B u: File: Phy1060c1.svg v: East w: 135 degrees 

The image contained in this file is shown in Figure 6 . A non-mirror-image version of the file is shown in Figure 16 .

Graph board instructions

Go back to the graph board and change the direction of vecBC to 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?

Now 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.

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

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

Tactile graphics for the sum of six vectors

The svg file for this exercise is named Phy1060d1.svg. The table of key-value pairs for this file is provided in Figure 7 .

Figure 7: Key-value pairs for the image in Phy1060d1.svg.
Key-value pairs for the image in Phy1060d1.svg.
  m: A n: B o: C p: D q: E r: F s: G t: The sum of six vectors u: Not drawn to scale v: Resultant vector A G w: File: Phy1060d1.svg 

The image contained in this file is shown in Figure 8 . A non-mirror-image version of the file is shown in Figure 17 .

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 vector diagram on a flat sheet of paper or construct it on a flat graph board, 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.

The parallelogram law is a form of geometrical addition. In 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 your graph board and the parallelogram law to find the resultant displacement vector vecAC.

Tactile graphics

The svg file for this exercise is named Phy1060e1.svg. The table of key-value pairs for this file is provided in Figure 9 .

Figure 9: Key-value pairs for the image in Phy1060e1.svg.
Key-value pairs for the image in Phy1060e1.svg.
  m: Adding vectors using the parallelogram law. n: B o: C p: A q: Vector B C r: Resultant vector s: Vector A B t: Line parallel to vector A B u: Line parallel to vector B C v: File: Phy1060e1.svg 

The image contained in this file is shown in Figure 10 . A non-mirror-image version of the file is shown in Figure 18 .

Put both vector tails at point A

Mentally designate the starting point on your graph board 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

Now comes the tricky part. Using a rubber band and a push pin, 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 for sighted students 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

Push a pin into the graph board at the intersection of the two lines.

The two lines and the two vectors should now form a parallelogram. In other words, you should now have four pins located at the four corners of a parallelogram.

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.

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

// 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)){
return Math.atan(y/x)*180/Math.PI + 180;
}else if((x < 0) && (y <= 0)){
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 Figure 11 should appear in your browser window when you open the html file in your browser.

Figure 11: Screen output for Listing #1.
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.

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 Figure 11 , 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.

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

// 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)){
return Math.atan(y/x)*180/Math.PI + 180;
}else if((x < 0) && (y <= 0)){
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 vecBCmag = 40;//at an angle of 135

//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 Figure 12 should appear in your browser window.

Figure 12: Screen output for Listing #2.
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 Figure 12 . 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 your graph board 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

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 graph board.

A mathematical solution

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

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

// 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)){
return Math.atan(y/x)*180/Math.PI + 180;
}else if((x < 0) && (y <= 0)){
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 vecBmag = 8;

var vecCmag = 10.5;

var vecDmag = 12.5;

//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 Figure 13 should appear in your browser when you open the html file in your browser.

Figure 13: Screen output for Listing #3.
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 your graph board.

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 2 begins with the getAngle method that we developed earlier.

Magnitude and angle for each vector

Then Listing 2 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 2 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 2 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.

### Non-mirror-image graphics

Figure 14 through Figure 18 below are non-mirror-image versions of Figure 2 , Figure 4 , Figure 6 , Figure 8 , and Figure 10 .

## 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.

## Resources

I will publish a module containing consolidated links to resources on my Connexions web page and will update and add to the list as additional modules in this collection are published.

## Miscellaneous

This section contains a variety of miscellaneous information.

### Note:

Housekeeping material
• Module name: Motion -- Displacement and Vectors for Blind Students
• File: Phy1060.htm
• Revised: 07/02/2011
• Keywords:
• physics
• accessible
• blind
• graph board
• protractor
• refreshable Braille display
• JavaScript
• trigonometry
• motion
• rest
• body
• displacement
• velocity
• acceleration
• kinematics
• kinetics
• resultant
• subtrahend
• minuend

### Note:

Disclaimers:

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.

Affiliation : I am a professor of Computer Information Technology at Austin Community College in Austin, TX.

-end-

## Content actions

PDF | EPUB (?)

### What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

PDF | EPUB (?)

### What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

#### Collection 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?

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

#### 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?

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

### Reuse / Edit:

Reuse or edit collection (?)

#### Check out and edit

If you have permission to edit this content, using the "Reuse / Edit" action will allow you to check the content out into your Personal Workspace or a shared Workgroup and then make your edits.

#### Derive a copy

If you don't have permission to edit the content, you can still use "Reuse / Edit" to adapt the content by creating a derived copy of it and then editing and publishing the copy.

| Reuse or edit module (?)

#### Check out and edit

If you have permission to edit this content, using the "Reuse / Edit" action will allow you to check the content out into your Personal Workspace or a shared Workgroup and then make your edits.

#### Derive a copy

If you don't have permission to edit the content, you can still use "Reuse / Edit" to adapt the content by creating a derived copy of it and then editing and publishing the copy.