DEPRECATED Please use the STEMCstudio version from the Examples.
- To understand the basic properties of vectors and scalars.
- To understand the meaning of scalar multiplication on vectors.
- To add and subtract vectors graphically, mathematically, and computationally, either geometrically (coordinate-free) or by using coordinates.
- To decompose a vector into components.
- To assemble a vector from a magnitude and direction.
- To recognize and use the standard unit vectors.
- To work with tilted coordinate systems.
- To understand the meaning of a scalar and a vector field.
- To understand the definition of a position vector.
- To integrate units of measure into vector computation and mathematics.
Launch the Program! Temporarily Hide the Code, if you need too. Use your mouse to rotate the scene.
You will see a red arrow that has been labeled
In Physical Science we encounter quantities that, informally speaking, have a direction and magnitude. We call these quantities vectors. We also find quantities that have magnitude and orientation (sign), but no obvious direction. Such quantities we call scalars.
(I'm speaking very roughly here. That's what we have to do when we encounter new ideas. Our task will be to make these ideas more precise and useful. We'll also have to become acquainted with the formal terms that have been established if we want to communicate with others in the field. Finally, as we develop the mathematics and prove things we will become more rigorous).
The following table contains examples of some common vectors and scalars.
| quantity | type | |============|:=========== | |displacement|vector | |velocity |vector | |force |vector | |momentum |vector | |speed |scalar | |mass |scalar | |temperature |scalar |
We want to learn the precise mathematical rules for working with these quantities. By doing so we will be able describe Physical Laws and also perform computations. We will also find that many equations have a geometric interpretation, that is, there is a spatial picture that accompanies the mathematical quantities. By working with both the mathematical notation and the geometric interpretation we can have our intuition help us make advances in learning with the mathematics ensuring rigor so that we don't make mistakes.
The file index.ts contains a function called update which draws visual representations of vectors as arrows.
The following code is used to draw a visual representation of the vector
arrow.model = A
arrow.label = "A"
arrow.position = origin
arrow.color = color.red
arrow.draw()Take a quick look at the contents of the index.ts. Don't worry if you don't understand how it all works.
Our arrow, labelled by A, is a visual representation of the mathematical vector quantity called A. The direction of the vector is given by the direction of the arrow with the arrowhead pointing in the positive direction. The arrowtail points in the negative direction. The imaginary line along the axis of the arrow is called the aspect. We could say that for a given aspect, a vector has two possible orientations.
The magnitude of the vector is given by the length of the arrow. Since the length can only be positive, the magnitude property is always a positive number.
In this unit you are going to learn the mathematical rules for manipulating equations involving vectors and scalars.
The precise definition of algebra won't concern us yet. For now let's stick with the informal idea that we are learning the rules for doing addition, subtraction, and multiplication with mathematical equations when scalars and vectors are involved.
The code representation of a scalar quantity in our program is simply going to be a JavaScript number. You probably know that you can add, subtract, multiply and divide these number quantities. But what we are going to do is to multiply a scalar and a vector together.
The code representation of a vector in our program is going to be a Vector3 from the EIGHT library. Later on we will learn how to design and code our own mathematical quantities.
Now suppose we multiply a number by a Vector3. Can you guess what the outcome is going to be? Try to guess what multiplying
Now try adding the following lines to the update function to visualize
arrow.model = -1 * A
arrow.label = "-1 * A"
arrow.position = origin
arrow.color = color.blue
arrow.draw()Multiplication of a vector by
Try multiplying by the other scalar values. What is the result of multiplying by a positive scalar? What is the result of multiplying by zero?
Uncomment the line that draws the gridXY to see the results more clearly.
We can write a shorthand for -1 * A using the unary minus operator -. A unary operator is a symbol where there is no operand on the left-hand-side. By contrast, in the expression -1 * A, the * operator is called a binary operator because it has an operand on both sides.
Let's try that shorthand in the code:
arrow.model = -A
arrow.label = "-A"
arrow.position = origin
arrow.color = color.blue
arrow.draw()So far we have described a vector as having the properties magnitude, aspect, and orientation. While a vector and scalar have been seen to be quite different objects, we know that a scalar,
Could a scalar have an aspect property too? Since a scalar has no obvious direction in the common sense usage, what kind of object might it be? Consider the following options:
- point
- line
- plane
- volume
Which one do you think is a good geometric interpretation?
It can't be a line because we have already assigned that to a vector and it clearly has a direction. It doesn't seem right to be a plane. We don't yet have a way to mathematically describe planes, but in any case, these seem to be associated with the concept of direction (a plane looks different if you tilt your head). We're left with point and volume. Let's just assign the simplest case, a point, and see if this geometric interpretation makes sense.
When a scalar and a vector are multiplied together, we can think of it in two ways (don't take these too literally, but consider them seriously because they will be the key to enlightenment!)
- The vector acts on the scalar "extending it" and making another vector.
- The scalar acts on the vector simply changing its magnitude and orientation, but not its aspect.
We complete the picture by adding the following two observations.
- The magnitudes get multiplied together.
- The orientations combine as expected for multiplying
$+1$ and$-1$ .
Does this geometric interpretation make sense when multiplying a scalar by a scalar?
We won't get to multiplying a vector by a vector yet but you might like to think about what kind of object (or objects) would be created.
Instead of computing, say 2 * A, compute and display A * 2.
Try it!
Do you get the same result?
You should, which leads to a new mathematical rule:
$$
\alpha A = A \alpha
$$,
where
We say that multiplication involving a scalar and a vector is commutative, which is to say that we are allowed to swap the operands in such a case and nothing changes.
Before we can add two vectors, we'll need another vector.
Let us add some similar code to draw the vector
arrow.model = B
arrow.label = "B"
arrow.position = origin
arrow.color = color.green
arrow.draw()Your diagram should now have two arrows, one red and one green, representing the vectors
So far, we have stated that vectors are quantities with magnitude and direction. This has enabled us to represent our vectors in space as arrows.
We now investigate what happens when we add two vectors together.
Let's add some code to draw the sum of the two vectors and color it blue.
arrow.model = A + B
arrow.label = "A + B"
arrow.position = origin
arrow.color = color.blue
arrow.draw()Amazingly, we have been able to add two vectors together as easily as if they were ordinary scalar numbers (which they are not!). We'll learn how that works later. For now, let's study the diagram and try to deduce the rule that allows us to add two vectors together. Hint: Imagine sliding a copy each of
Do you see it? We can parallel-translate (slide) a copy of
Let's make it a bit easier on ourselves by actually drawing in these copies by adding the following code:
arrow.model = A
arrow.label = "A"
arrow.position = origin + B
arrow.color = color.red
arrow.draw()
arrow.model = B
arrow.label = "B"
arrow.position = origin + A
arrow.color = color.green
arrow.draw()You should be looking at a nice parallelogram made of red and green vectors with blue diagonal. Got it? If not, your update code should look something like this:
function update() {
/**
* A shortcut to the origin defined on our World.
*/
const origin = world.origin
// Draw the vector A and label it.
arrow.model = A
arrow.label = "A"
arrow.position = origin
arrow.color = color.red
arrow.draw()
////////////////////////////////////////////////////////////
// Add more visualizations here...
arrow.model = B
arrow.label = "B"
arrow.position = origin
arrow.color = color.green
arrow.draw()
arrow.model = A + B
arrow.label = "A + B"
arrow.position = origin
arrow.color = color.blue
arrow.draw()
arrow.model = A
arrow.label = "A"
arrow.position = origin + B
arrow.color = color.red
arrow.draw()
arrow.model = B
arrow.label = "B"
arrow.position = origin + A
arrow.color = color.green
arrow.draw()
// Draw the grid in the XY plane to get a sense of the magnitude and direction of the vectors.
gridXY.draw()
// Draw the grid normal to A to avoid becoming disorientated!
gridZX.draw()
// Label the origin.
world.drawText("origin", origin)
}We interpret
To be consistent, we must interpret
But the diagram demonstrates that we get the same result either way.
We can check that this is true by making a small change to our code to reverse the order of operands for the addition operator. Remeber to relabel the vector too!
arrow.model = B + A
arrow.label = "B + A"
arrow.position = origin
arrow.color = color.blue
arrow.draw()We can express this mathematically by writing
$$
A + B = B + A
$$,
for any two vectors,
We say that addition of vectors is commutative.
We now know the rules for adding vectors. Let's take a look at vector subtraction. Change the code involving the two vectors to compute and display
arrow.model = A - B
arrow.label = "A - B"
arrow.position = origin
arrow.color = color.blue
arrow.draw()Now take a look at the diagram.
What do we have to do with the arrows representing
It appears that we need to form the arrow that points in the opposite direction to
But we know how to create a vector pointing in the opposite direction - multiply it by
Let's change the code to see it work.
arrow.model = A + (-B)
arrow.label = "A + (-B)"
arrow.position = origin
arrow.color = color.blue
arrow.draw()And to make the picture complete, instead of drawing a copy of
Congratulations! You now know how to subtract vectors. It all hinges upon the fact that every vector
This allows us to rewrite
Start with code that displays only
arrow.model = A
arrow.label = "A"
arrow.position = origin
arrow.color = color.red
arrow.draw()
arrow.model = B
arrow.label = "B"
arrow.position = origin
arrow.color = color.green
arrow.draw()