Vectors

More vector math

Addition was really just the first step. There are many mathematical operations that are commonly used with vectors. Below is a comprehensive list of the operations available as functions in the PVector object from ProcessingJS. We’ll go through a few of the key ones now. As our examples get more sophisticated in later sections, we’ll continue to reveal the details of more functions.
  • add() — add vectors
  • sub() — subtract vectors
  • mult() — scale the vector with multiplication
  • div() — scale the vector with division
  • mag() — calculate the magnitude of a vector
  • normalize() — normalize the vector to a unit length of 1
  • limit() — limit the magnitude of a vector
  • heading2D() — the 2D heading of a vector expressed as an angle
  • dist() — the Euclidean distance between two vectors (considered as points)
  • angleBetween() — find the angle between two vectors
  • dot() — the dot product of two vectors
  • cross() — the cross product of two vectors (only relevant in three dimensions)
Having already covered addition, let’s start with subtraction. This one’s not so bad; just take the plus sign and replace it with a minus!

Vector Subtraction

w⃗=u⃗−v⃗ \vec{w} = \vec{u} - \vec{v}
can be written as:
wx=ux−vx \text{w}_x = \text{u}_x - \text{v}_x
wy=uy−vy \text{w}_y = \text{u}_y - \text{v}_y
and so the function inside PVector looks like:
PVector.prototype.sub = function(vector2) {
    this.x = this.x - vector2.x;
    this.y = this.y - vector2.y;
  };
The following example demonstrates vector subtraction by taking the difference between two points—the mouse location and the center of the window.
Basic Number Properties with Vectors
When we're doing math with real numbers, they obey these basic rules:
The commutative rule: 3+2=2+3 3+2=2+3
The associative rule: (3+2)+1=3+(2+1) (3+2)+1=3+(2+1)
Those same rules are true of math with vectors:
The commutative rule: u⃗+v⃗=v⃗+u⃗ \vec{u} + \vec{v}= \vec{v} + \vec{u}
The associative rule: u⃗+(v⃗+w⃗)=(u⃗+v⃗)+w⃗ \vec{u} + (\vec{v} + \vec{w})= (\vec{u} + \vec{v}) + \vec{w}

Vector Multiplication

Moving on to multiplication, we have to think a little bit differently. When we talk about multiplying a vector, what we typically mean is scaling a vector. If we wanted to scale a vector to twice its size or one-third of its size (leaving its direction the same), we would say: “Multiply the vector by 2” or “Multiply the vector by 1/3.” Note that we are multiplying a vector by a scalar, a single number, not another vector.
To scale a vector, we multiply each component (x and y) by a scalar.
w⃗=u⃗∗n \vec{w} = \vec{u} * n
can be written as:
Scaling a vector
Let’s look at an example with vector notation.
Therefore, the function inside the PVector object is written as:
PVector.prototype.mult = function(n) {
   this.x = this.x * n;
   this.y = this.y * n;
}
And using mult in code is as simple as:
var u = new PVector(-3,7);
// This PVector is now three times the size and is equal to (-9,21).
u.mult(3);
Here's the example from earlier, but we multiply the vector by 0.5 each time, so that it's scaled by half:
Instead of multiplying by 0.5 above, we could have also divided by 2. Division works just like multiplication—we simply replace the multiplication sign (asterisk) with the division sign (forward slash).
This is how the div method is implemented internally:
PVector.prototype.div = function(n) {
   this.x = this.x / n;
   this.y = this.y / n;
}
And this is how we can use it in code:
var u = new PVector(8, -4);
u.div(2);

More Number Properties with Vectors

As with addition, basic algebraic rules of multiplication apply to vectors.
The associative rule: (n∗m)∗v⃗=n∗(m∗v⃗) (n * m) * \vec{v} = n * (m * \vec{v})
The distributive rule with 2 scalars, 1 vector: (n+m)∗v⃗=n∗v⃗+m∗v⃗ (n + m) * \vec{v} = n * \vec{v} + m * \vec{v}
The distributive rule with 2 vectors, 1 scalar: (u⃗+v⃗)∗n=u⃗∗n+v⃗∗n (\vec{u} + \vec{v}) * n = \vec{u} * n + \vec{v} * n
Want to practice your vector math? You can learn more here on Khan Academy, in our Linear Algebra: Vectors unit.
This "Natural Simulations" course is a derivative of "The Nature of Code" by Daniel Shiffman, used under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Loading