hyunjoopark
← Back to Projects

Physics × Linear Algebra Visualization

An interactive 2D vector field visualization exploring how linear transformations reshape space — rotation, shear, scaling, and reflection.

physics linear algebra visualization interactive December 15, 2025

Tech Stack

React SVG TypeScript

What is a linear transformation?

A linear transformation is a function between vector spaces that preserves vector addition and scalar multiplication. In 2D, any linear transformation can be represented by a 2×2 matrix:

T(v) = Av = | a₁₁  a₁₂ | | x |
            | a₂₁  a₂₂ | | y |

Interactive demo

Use the sliders to change the matrix entries and watch how the vector field transforms. The dashed yellow lines show the eigenvectors — directions that don’t change under the transformation (only scaled).

2D Linear Transformation

Drag the sliders to transform the vector field

Matrix A

det(A) = 1.00
λ₁ = 1.00
λ₂ = 1.00

Presets

Transformed vectors
Eigenvectors

Key concepts

Eigenvectors and eigenvalues

An eigenvector of matrix A is a nonzero vector v such that:

Av = λv

where λ is the corresponding eigenvalue. Geometrically, eigenvectors point in directions that are only stretched (not rotated) by the transformation.

Determinant

The determinant tells you how the transformation scales area:

  • |det(A)| > 1: areas expand
  • |det(A)| < 1: areas shrink
  • det(A) < 0: orientation flips (reflection)
  • det(A) = 0: the transformation collapses space to a lower dimension

Try these experiments

  1. Rotation: Notice how rotation matrices have complex eigenvalues — no real direction is preserved
  2. Shear: One eigenvector aligns with the shear direction
  3. Reflection: Eigenvalues are +1 and -1, eigenvectors are the mirror axis and its perpendicular
  4. Scale: Every direction is an eigenvector when scaling is uniform