This is a reference to ease developers into mathematical notation by showing comparisons with JavaScript code.

Motivation: Academic papers can be intimidating for self-taught game and graphics programmers. :)

This guide is not yet finished. If you see errors or want to contribute, please open a ticket or send a PR.

Note: For brevity, some code examples make use of npm packages. You can refer to their GitHub repos for implementation details.

Mathematical symbols can mean different things depending on context and the field of study (linear algebra, set theory, etc). This guide may not cover all uses of a symbol, but PRs are welcome.

For a more complete list, refer to Wikipedia - List of Mathematical Symbols.

• variable name conventions
• equals = ≈ ≠ =:
• dot & cross · ×
  • scalar multiplication
  • vector multiplication
  • dot product
  • cross product
• sigma Σ - summation
• capital Pi Π - products of sequences
• pipes ||
  • absolute
  • Euclidean norm
  • determinant
• hat â - unit vector
• "element of" ∈ ∉
• more...

There are a variety of naming conventions depending on the context and field of study, and they are not always consistent. However, in some of the literature you may find variable names to follow a pattern like so:

• s - italic lowercase letters for scalars (i.e. a number)
• x - bold lowercase letters for vectors (i.e. a 2D point)
• A - bold uppercase letters for matrices (i.e. a 3D transformation)
• θ - italic lowercase Greek letters for constants and special variables (i.e. polar angle θ, theta)

This will also be the format of this guide.

There are a number of symbols resembling the equals sign =. Here is a few common ones and an example of their use:

• = is for equality (values are the same)
• ≠ is for inequality (value are not the same)
• ≈ is for approximately equal to (π ≈ 3.14159)

In JavaScript:

// equality
2 === 3

// inequality
2 !== 3

// approximately equal
almostEqual(Math.PI, 3.14159, 1e-5)

function almostEqual(a, b, epsilon) {
  return Math.abs(a - b) <= epsilon
}

In mathematics, the := =: and = symbols are used for definition. The following defines x to be another name for 2kj.

Code:

var x = 2 * k * j

The dot · and cross × symbols have different uses depending on context.

They might seem obvious, but it's important to understand the subtle differences before we continue into other sections.

Both symbols can represent simple multiplication of scalars. The following are equivalent:

In code we tend to use asterisk:

var result = 3 * 4

With adjacent letter variables, the multiplication sign is typically omitted.

If these variables represent scalars, the code would be:

var result = 3 * k * j

To denote multiplication of one vector by another, or multiplication of a vector with a scalar, we do not use the dot · or cross × symbols. These have different meanings in linear algebra, discussed shortly.

Let's take our earlier example but apply it to vectors:

Here is how it would look in code, using arrays [x, y] to represent the 2D vectors.

var s = 3
var k = [ 1, 2 ]
var j = [ 2, 3 ]

var tmp = multiply(k, j)
var result = multiplyScalar(tmp, s)
//=> [ 6, 18 ]

Our multiply and multiplyScalar functions look like this:

function multiply(a, b) {
  return [ a[0] * b[0], a[1] * b[1] ]
}

function multiplyScalar(a, scalar) {
  return [ a[0] * scalar, a[1] * scalar ]
}

Similarly, matrix multiplication typically does not use a dot or cross symbol. Matrix multiplication will be covered in a later section.

The dot symbol · can be used to denote the dot product of two vectors. Sometimes this is called the scalar product since it evaluates to a scalar.

It is a very common feature of linear algebra, and with a 3D vector it might look like this:

var k = [ 0, 1, 0 ]
var j = [ 1, 0, 0 ]

var d = dot(k, j)
//=> 0

The result 0 tells us our vectors are perpendicular. Our dot function:

function dot(a, b) {
    return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]
}

The cross symbol × can be used to denote the cross product of two vectors.

In code, it would look like this:

var k = [ 0, 1, 0 ]
var j = [ 1, 0, 0 ]

var result = cross(k, j)
//=> [ 0, 0, -1 ]

Here, we get [ 0, 0, -1 ], which is perpendicular to both k and j.

Our cross function:

function cross(a, b) {
    var ax = a[0], ay = a[1], az = a[2],
        bx = b[0], by = b[1], bz = b[2]

    var rx = ay * bz - az * by
    var ry = az * bx - ax * bz
    var rz = ax * by - ay * bx
    return [ rx, ry, rz ]
}

For other implementations of vector multiplication, cross product, and dot product:

• gl-vec3
• gl-vec2
• vectors - includes n-dimensional

The big Greek "E" (Sigma) is for Summation. In other words: summing up some numbers.

Here, i=1 says to start at 1 and end at the number above the Sigma, 100. These are the lower and upper bounds, respectively. The i to the right of the "E" tells us what we are summing. In code:

var n = 100
var sum = 0
for (var i = 1; i <= n; i++) {
  sum += i
}

The result of sum is 5050.

Tip: With whole numbers, this particular pattern can be optimized to the following:

var n = 100
var sum = (n * (n + 1)) / 2

Here is another example where the i, or the "what to sum," is different:

In code:

var n = 100
var sum = 0
for (var i = 1; i <= n; i++) {
  sum += (2 * i + 1)
}

The result of sum is 10200.

The notation can be nested, which is much like nesting a for loop. You should evaluate the right-most sigma first, unless the author has enclosed them in parentheses to alter the order.

In code:

var sum = 0
for (var i = 1; i <= 2; i++) {
  for (var j = 4; j <= 6; j++) {
    sum += (3 * i * j)
  }
}

Here, sum will be 135.

The capital Pi or "Big Pi" is very similar to Sigma, except we are using multiplication to find the "products of sequences."

Take the following:

In code, it might look like this:

var n = 6
var value = 1
for (var i = 1; i <= n; i++) {
  value *= i
}

Where value will evaluate to 720.

Pipe symbols, known as bars, can mean different things depending on the context. Below are three common uses: absolute, Euclidean norm, and determinant.

For a number x, | x | means the absolute of x. In code:

var x = -5
var result = Math.abs(x)
// => 5

For a vector v, ‖v‖ is the Euclidean norm of v. It is also referred to as the "magnitude" or "length" of a vector.

Often this is represented by double-bars to avoid ambiguity with the absolute notation, but sometimes you may see it with single bars:

Here is an example using an array [x, y, z] to represent a 3D vector.

var v = [ 0, 4, -3 ]
length(v)
//=> 5

The length function:

function length (vec) {
  var x = vec[0]
  var y = vec[1]
  var z = vec[2]
  return Math.sqrt(x*x + y*y + z*z)
}

Other implementations:

• magnitude - n-dimensional
• gl-vec2/length - 2D vector
• gl-vec3/length - 3D vector

For a matrix A, |A| means the determinant of matrix A.

Here is an example computing the determinant of a 2x2 matrix, represented by a flat array in column-major format.

var determinant = require('gl-mat4/determinant')

var matrix = [ 1, 0, 0, 1 ]
var det = determinant(matrix)
//=> 1

Implementations:

• gl-mat4/determinant - also see gl-mat3 and gl-mat2
• ndarray-determinant
• glsl-determinant
• robust-determinant
• robust-determinant-2 and robust-determinant-3, specifically for 2x2 and 3x3 matrices, respectively

In geometry, the "hat" symbol above a character is used to represent a unit vector. For example, here is the unit vector of a:

In cartesian space, a unit vector is typically length 1, in the range of -1.0 to 1.0. Here we normalize a 3D vector into a unit vector:

var a = [ 0, 4, -3 ]
normalize(a)
//=> [ 0, 0.8, -0.6000000000000001 ]

Notice, since we are working with floating point values and not using numerically robust operations, we do not get a perfect -(3/5) value for the Z component.

Here is the normalize function, operating on 3D vectors:

function normalize(vec) {
  var x = vec[0]
  var y = vec[1]
  var z = vec[2]
  var squaredLength = x*x + y*y + z*z

  if (squaredLength > 0) {
    squaredLength = 1 / Math.sqrt(squaredLength)
    vec[0] = vec[0] * squaredLength
    vec[1] = vec[1] * squaredLength
    vec[2] = vec[2] * squaredLength
  }
  return vec
}

Other implementations:

• gl-vec3/normalize and gl-vec2/normalize
• vectors/normalize-nd (n-dimensional)

In set theory, the "element of" symbol ∈ and ∋ can be used to describe whether something is an element of a set. For example:

Here we have a set of numbers A [ 3, 9, 14 ] and we are saying 3 is an "element of" that set. In code:

var A = [ 3, 9, 14 ]

A.indexOf(3) >= 0
//=> true

The backwards ∋ is the same, but the order changes:

You can also use the "not an element of" symbols ∉ and ∌ like so:

Like this guide? Suggest some more features or send us a Pull Request!

MIT, see LICENSE.md for details.