DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

Matrix Math for Developers Who Skipped Linear Algebra

#javascript #math #tutorial #webdev

If you work with graphics, machine learning, game development, or 3D rendering, you need matrix operations. If you skipped linear algebra in college (or never took it), here is the practical subset that covers most real-world use cases.

What a matrix is

A matrix is a 2D array of numbers. That is all. No mystery. A 3x3 matrix has 3 rows and 3 columns:

| 1  2  3 |
| 4  5  6 |
| 7  8  9 |
Enter fullscreen mode Exit fullscreen mode

In JavaScript:

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
Enter fullscreen mode Exit fullscreen mode

Matrix addition and subtraction

Element-wise. Both matrices must have the same dimensions.

function add(A, B) {
  return A.map((row, i) => row.map((val, j) => val + B[i][j]));
}
Enter fullscreen mode Exit fullscreen mode

Matrix multiplication

This is where most developers stumble. Matrix multiplication is NOT element-wise. The element at position (i,j) in the result is the dot product of row i from matrix A and column j from matrix B.

Requirements: A must have the same number of columns as B has rows. An m*n matrix times an n*p matrix produces an m*p matrix.

function multiply(A, B) {
  const rows = A.length;
  const cols = B[0].length;
  const n = B.length;

  const result = Array.from({ length: rows }, () => 
    Array(cols).fill(0)
  );

  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      for (let k = 0; k < n; k++) {
        result[i][j] += A[i][k] * B[k][j];
      }
    }
  }

  return result;
}
Enter fullscreen mode Exit fullscreen mode

Key property: matrix multiplication is NOT commutative. A * B is usually NOT equal to B * A. This catches developers constantly in graphics programming where transformation order matters.

The identity matrix

The identity matrix is the matrix equivalent of 1. Multiplying any matrix by the identity matrix returns the original matrix.

| 1  0  0 |
| 0  1  0 |
| 0  0  1 |
Enter fullscreen mode Exit fullscreen mode 
function identity(n) {
  return Array.from({ length: n }, (_, i) =>
    Array.from({ length: n }, (_, j) => i === j ? 1 : 0)
  );
}
Enter fullscreen mode Exit fullscreen mode

Transpose

Swap rows and columns. Row i becomes column i.

function transpose(M) {
  return M[0].map((_, j) => M.map(row => row[j]));
}
Enter fullscreen mode Exit fullscreen mode

Transpose is used constantly in machine learning. If your data has features as columns and samples as rows, transposing gives you features as rows and samples as columns. Many algorithms expect a specific orientation.

Determinant

The determinant of a square matrix is a single number that tells you whether the matrix is invertible (nonzero determinant) or singular (zero determinant).

For a 2x2 matrix:

function det2x2(M) {
  return M[0][0] * M[1][1] - M[0][1] * M[1][0];
}
Enter fullscreen mode Exit fullscreen mode

For larger matrices, use cofactor expansion:

function determinant(M) {
  const n = M.length;
  if (n === 1) return M[0][0];
  if (n === 2) return det2x2(M);

  let det = 0;
  for (let j = 0; j < n; j++) {
    const minor = M.slice(1).map(row => 
      [...row.slice(0, j), ...row.slice(j + 1)]
    );
    det += M[0][j] * determinant(minor) * (j % 2 === 0 ? 1 : -1);
  }
  return det;
}
Enter fullscreen mode Exit fullscreen mode

Practical applications

CSS transforms. Every CSS transform (translate, rotate, scale, skew) is a matrix operation. The browser computes a 4x4 transformation matrix and applies it to every pixel.

/* This CSS */
transform: rotate(45deg) scale(1.5) translate(10px, 20px);

/* Is internally computed as a matrix multiplication */
transform: matrix(1.06, 1.06, -1.06, 1.06, -11.21, 25.61);
Enter fullscreen mode Exit fullscreen mode

3D graphics. Game engines and 3D renderers use 4x4 matrices for everything: camera position, object transforms, projection from 3D to 2D screen coordinates.

Machine learning. Neural networks are essentially chains of matrix multiplications with nonlinear activations between them. The weights of a neural network are stored as matrices.

Image processing. Convolution (blur, sharpen, edge detection) is a matrix operation. A convolution kernel is a small matrix multiplied against patches of the image.

For computing matrix operations interactively, I keep a calculator at zovo.one/free-tools/matrix-calculator. It handles multiplication, determinants, inverses, transposes, and eigenvalues. Useful for verifying implementations and working through textbook exercises.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)