An Introduction to Vectors with JavaScript
Introduction
A vector is a quantity that has both size — or magnitude — and direction; as opposed to a scalar quantity, which has size only.
They are of fundamental importance in science and engineering and can describe all kinds of physical phenomena: such as air rushing past an aircraft’s wing, or forces acting on a rollercoaster.
A vector is written in bold, like a and b, and is often seen in diagrams as pointed arrows.
Let’s start with the following vector, u, which is described by an arrow 4 units in the positive x-axis direction, and 1 unit up in the positive y-axis direction:
The graph shows vector u from point A (0,0) to point B (4,1):
The easiest way to represent this with JavaScript is using an array:
const u = [4, 1]Scalar Multiplication
Vectors can be stretched or squeezed by a scalar quantity.
Mathematically, a scalar k is applied to vector u by multiplying each element of u by k:
Continuing with the previous example, we can create a new vector w, which is twice the length of vector u:
Again, beginning at the origin A (0,0), vector w stretches to the new location of B, which is now at coordinates (8,2).
Scaling is straightforward to achieve in JavaScript by multiplying each array member by a constant k in a for-loop.
However, a more convenient way to do this is to use an array’s map function. The following inline function expression accepts a vector array and scaling constant:
const f = (a, k) => a.map(x => x * k)Here, we also make use of JavaScript’s arrow function notation, where the function keyword is ditched in favor of a ‘fat arrow’ (=>).
For example, let’s create vector w, from the diagram above, by scaling vector u by a factor of 2. I’ve used bold in the code to indicate which quantities are vectors:
const u = [4,1]
const k = 2
const w = f(u, k)console.log(w) // [8, 2]
Vector Addition
Two vectors can be added ‘head-to-tail’ by adding respective coordinates:
The addition of vectors u and v could be represented as a new vector w, as follows:
We can again use the map operator with a variable, e, which keeps track of the running total at each index:
const f = (a, b) => [... a].map((e,i) => e + b[i])We add vectors u and v as follows:
const u = [4,1]
const v = [2,3]
const w = f(u, v)console.log(w) // [6, 4]
Magnitude and Direction
The magnitude — or length — of a vector is denoted by vertical bars on each side of the variable name:
The general form for the magnitude of an n-dimensional vector from the origin is:
We can calculate the square of each element again with the map method:
const squared = x => Math.pow(x, 2);However, let’s use JavaScript’s reduce method instead this time to add up an array of elements, as shown in the following example. This method takes two parameters: the running-total and the current square:
const sum = x => x.reduce((a, x) => a + x, 0);Let’s combine what we’ve learned to write one possible expression to calculate a vector’s magnitude:
const sumOfSquares = x => sum(x.map(squared));
const magnitude = a => Math.sqrt(sumOfSquares(a));Consider the first vector we defined earlier:
The magnitude of our vector AB is:
const vector = [4,1];
console.log(magnitude(vector)); // 4.123105625617661We can also find the angle that AB makes with the positive x-axis using the following formula for two-dimensional vectors:
We can calculate this angle in radians using the arctan method of the JavaScript Math object, then convert it to degrees:
const convertRadiansToDegrees = x => x * 180 / Math.PI;
const radians = Math.atan(1/4);
const degrees = convertRadiansToDegrees(radians);The results are:
console.log(`Result in radians: ${radians}`)
// Result in radians: 0.24497866312686414console.log(`Result in degrees: ${degrees}`)
// Result in degrees: 14.03624346792647
Similarly, what about the distance and angle that BC makes the positive direction of the x-axis?
If we begin with some initial point (x1, y1) and a terminal point (x2, y2), the distance between these two points is:
I will leave this as an exercise for the reader to calculate the magnitude and angle of BC.
