Mathematical Transformations — Interactive 3D Atlas

§ 1

Linear Transformations

Every linear map T: ℝ² → ℝ² is encoded by a 2×2 matrix. Drag the sliders to deform the unit grid in real time.

Matrix Equation

T(x) = Ax
where A = [[a, b], [c, d]]

det(A) = 1.00 | trace = 2.00

Live Transform

Matrix Controls

a (scale x) 1.00

b (shear x) 0.00

c (shear y) 0.00

d (scale y) 1.00

A transformation is linear if it satisfies T(u + v) = T(u) + T(v) and T(cv) = cT(v). This means the origin is always fixed and parallel lines remain parallel.

det(A) = 0: The map collapses space into a lower dimension — the transformation is singular.

|det(A)| measures the factor by which area is scaled. Negative determinant means orientation is reversed.

§ 2

Affine Transformations

An affine map adds translation to linear: T(x) = Ax + b. The origin is no longer fixed.

Homogeneous Form

[x'] [a b tx] [x]
[y'] = [c d ty] [y]
[1 ] [0 0 1] [1]

Affine Map

Transform + Translate

Rotation θ 0°

Scale 1.00

Shear X 0.00

Translate X 0

Translate Y Translate Y 0

Affine transformations preserve collinearity (points on a line remain on a line) and ratios of distances along parallel lines — but not angles or distances in general.

Every affine transformation of ℝ² can be expressed as a linear transformation in homogeneous coordinates ℝ³, embedding the plane as z=1.

§ 3

Eigenvectors & Eigenvalues

The eigenvectors of A are the directions that the transformation merely stretches or flips — never rotates.

Characteristic Equation

Av = λv
⟺ (A - λI)v = 0
⟺ det(A - λI) = 0

λ₁ = 1.00 λ₂ = 1.00

Eigenspace

Matrix Entry

a₁₁ 2.00

a₁₂ 1.00

a₂₁ 0.00

a₂₂ 3.00

Eigenvectors (gold arrows) lie along invariant lines. Eigenvalues λ tell you the stretch factor along each eigenvector. When |λ| > 1, the vector grows; when |λ| < 1, it shrinks; λ < 0 means it flips.

A 2×2 real matrix may have complex eigenvalues — occurring when the discriminant (tr A)² - 4·det A is negative. This indicates rotation in the transformation.

§ 4

3D Transformations & Projection

Rotations in ℝ³ and perspective projection onto the 2D viewing plane. Drag to orbit.

Rotation Matrices

Rx(θ) = [[1,0,0],[0,cosθ,-sinθ],[0,sinθ,cosθ]]
Ry(φ) = [[cosφ,0,sinφ],[0,1,0],[-sinφ,0,cosφ]]
Rz(ψ) = [[cosψ,-sinψ,0],[sinψ,cosψ,0],[0,0,1]]

3D View — Drag to Orbit

3D Controls

Rotate X 0°

Rotate Y 0°

Rotate Z 0°

Perspective d 4.00

Orthographic projection drops the z-coordinate: (x,y,z) → (x,y). Perspective projection divides by z: (x,y,z) → (x/z, y/z), creating the foreshortening effect of human vision.

The composition R = Rz·Ry·Rx is not commutative — order matters. This is the source of gimbal lock in Euler angles.

§ 5

Composition of Transformations

Apply two transformations sequentially. Observe that T₂∘T₁ ≠ T₁∘T₂ in general.

Composition Law

(T₂ ∘ T₁)(x) = T₂(T₁(x)) = B·(A·x) = (BA)·x

Note: matrix multiplication is associative but NOT commutative

T₁

First Transform

T₂

Second Transform

T₂ ∘ T₁ Combined

§ 6

Fourier Transform

The DFT is a linear transformation that maps a signal from the time domain into the frequency domain.

Discrete Fourier Transform

X[k] = Σₙ x[n] · e^(-i·2π·k·n/N)

e^(iθ) = cos(θ) + i·sin(θ) ← Euler's Formula

Time Domain

Frequency Domain

Signal Composer

Frequency 1 (Hz) 2

Amplitude 1 1.0

Frequency 2 (Hz) 5

Amplitude 2 0.5

Frequency 3 (Hz) 10

Amplitude 3 0.3

The DFT reveals which frequencies make up a signal. Each spike in the frequency domain corresponds to a sinusoidal component in the time domain.

The DFT matrix is unitary — it preserves energy (Parseval's theorem). This makes it a proper isometry of the signal space.