2D Vector Rotation: Theory and Implementation

Vector operations are the mathematical foundation of computer graphics; rotating a vector in 2D is a common operation.

In front‑end projects the CSS rotate function is used, but the underlying principle is the same.

A 2‑D vector is an array [x, y]. Rotating it by an angle θ (radians) yields a new vector: [x·cosθ ‑ y·sinθ, x·sinθ + y·cosθ] The rotation can be expressed with a 2×2 matrix: [[cosθ, ‑sinθ], [sinθ, cosθ]] Multiplying this matrix by the original vector produces the rotated vector.

Example code (JavaScript):

/**
 * @param {[x, y]} v original vector
 * @param {number} rad rotation angle in radians
 * @return {[x, y]} rotated vector
 */
function rotate(v, rad) {
  const c = Math.cos(rad);
  const s = Math.sin(rad);
  const [x, y] = v;
  return [
      x * c + y * -s,
      x * s + y * c
  ];
}

Using this function, a vector v = [3, 2] rotated 90° counter‑clockwise (θ = π/2) becomes [-2, 3].

The same matrix approach can be used to rotate basis vectors i = (1,0) and j = (0,1), yielding coordinates (cosθ, sinθ) and (‑sinθ, cosθ) respectively.

A demo visualises a tree built with vector rotation.