Gameplay in HTML5: Vectors

Homework #2 review

Instructor's solution


Geometric definition

A point represents a position in a plane (2D) or space (3D).

Cartesian coordinates

Given an origin, axes, and scale, we can assign coordinates to each point.


Changing the origin translates the coordinate system. The same points now have new coordinates.


Changing the axes rotates the coordinate system, once again changing the coordinates of the points.


Changes to a coordinate system are called transformations. Translation and rotation are two kinds of transformations. Changing the scale would also transform the coordinates of points.




A vector is an object with a direction and a magnitude (length), but not a location.

Equal vectors

These represent the same vector

Equal vectors

These also represent the same vector

Unequal vectors

These vectors have different directions

Unequal vectors

These vectors also have different directions

Unequal vectors

These vectors have different lengths

Cartesian components


Analogous to points, given axes and a scale, we can assign components to vectors.


Changing the origin (translation) does not affect the components of a vector.


Rotating the axes does change vector components.

Points & vectors

By anchoring the vectors at the origin, we can associate vectors with points. The coordinates of the end-points equal the components of the corresponding vectors.

As long as we keep the origin fixed, we can often ignore the distinction between points and vectors.


  • In texts (but not in source code), vectors are often written in bold-face: v. (Some texts use other notation, such as drawing an arrow on top of the letter, which is hard to do in HTML.)
  • Ordinary numbers are referred to as scalars, in contrast to vectors, and written as plain letters, or often as Greek letters: a, b, α, β.
  • The components of a vector are scalars. The are generally subscripted with indices (1, 2, or 0, 1) or axis labels (x, y), and enclosed in parentheses or other brackets: u = (u1, u2), v=[vx, vy].



If v is a vector, we write |v| to denote its length, which is a scalar. (The similarity of this notation to that for the absolute value of a number (|-2| = |2| = 2) is not a coincidence; they have some things in common.)


Given the coordinates of a vector, we can use the Pythagorean Theorem to compute its length:
|v|2 = vx2 + vy2.
|v| = sqrt( vx2 + vy2 ).

For example, if v = [ 4, 3 ], then
|v| = sqrt( 4×4 + 3×3 ) = sqrt( 16 + 9 ) = sqrt( 25 ) = 5.


  • For any vector, |v| >= 0.
  • The null vector (a.k.a. zero vector or origin) is
    0 = [ 0, 0 ].
  • |v| = 0 if and only if v = 0.

Scalar product


Multiplying a vector by a scalar multiplies the length of the vector. If the scalar is negative, the direction is reversed.


Each component is multiplied by the scalar: if v = [ vx, vy ], then αv = [ αvx, αvy ].


We can also define scalar division by writing v/α for (1/α)v.


  • For any scalar α and vector v, |αv| = |α| |v|.
  • 0v = α0 = 0.


  • If v != 0, then if n = v/|v| = (1/|v|)v, we have |n| = 1.
  • A vector with length 1 (unit length) is called normalized. Dividing a vector by its length is called normalizing.
  • The vector n has the same direction as v.
  • Attempting to normalize the null vector, 0, is a division-by-zero error.

Vector addition


The sum of v and w is formed by placing the beginning of w at the end of v and drawing a new vector from the beginning of v to the end of w.


Vector addition is component-wise addition:
If v = [ vx, vy ] and w = [ wx, wy ], then
v + w = [ vx + wx, vy + wy ].


The null vector is the additive identity

0 + v = v + 0 = v.


  • v + w = w + v.
  • Geometrically the sum is the diagonal of a parallelogram:
  • In terms of components, addition of vectors commutes because addition of scalars (ordinary numbers) does:
    v + w = [ vx + wx, vy + wy ] = [ wx + vx, wy + vy ] = w + v.

Scalar multiplication and vector addition are distributive

  • (α + β)v = αv + βv
  • α(v + w) = αv + αw
  • You can verify these by drawing pictures or by writing out the definition of each side of each equation in terms of components.

Vector subtraction

  • Vector subtraction is the inverse operation of vector addition.
  • u = v - w is the vector that satisfies u + w = v.
  • [ ux, uy ] = [ vx - wx, vy - wy ].
  • Geometrically:
  • The distance between u and v is |u - v|.

Dot product


The dot product (a.k.a. inner product) of two vectors v and w is the scalar given by
v·w = |v||w|cos(θ),
where θ is the angle between the vectors.


If v = [ vx, vy ] and w = [ wx, wy ], their dot product is given by
v·w = vxwx + vywy.


Null vector

For any vector v, 0·v = 0.


  • v·w = w·v.
  • In terms of components, this follows from the commutativity of multiplication of scalars.
  • Geometrically, it follows from the fact that cos(-θ) = cos(θ).

Relation to length

  • v·v = |v|².
  • This can be seen directly from the definitions of length and dot product in terms of components.
  • It also follows from cos(0) = 1.

Sign and angle

Acute angles
If the angle θ between v and w is less than π/2 (90°), then it is acute, and cos(θ) > 0, so v·w > 0.
Obtuse angles
If the angle θ between v and w is greater than π/2, then it is obtuse, and cos(θ) < 0, so v·w < 0.
Right angle
If the angle θ between v and w is exactly π/2, then it is a right angle, and cos(θ) = 0, so v·w = 0.
The vectors are perpendicular to each other. We say that they are orthogonal.
Dividing the plane
If we anchor our vectors at the origin, so that we can identify points with vectors, then the vectors w orthogonal to v (i.e. satisfying v·w = 0) form a line perpendicular to v.
The vectors on the same side of the line as v satisfy v·w > 0.
The vectors on the opposite side of the line from v satisfy v·w < 0.

Homework #3