2D Vector Transformer
Multiply 2D vectors by arbitrary 2×2 transformation matrices in real time. Visualize the mapped vector on an interactive Cartesian plane, observe how unit basis vectors deform into a parallelogram, inspect step-by-step row-by-column arithmetic, and export code directly to Python, JavaScript, CSS, and GLSL.
import numpy as np
A = np.array([[2, 1], [1, 2]])
v = np.array([1.5, 1.0])
v_prime = A @ v # [4.0, 3.5]How to Transform a 2D Vector with a Matrix
To transform a 2D vector v = (x, y) using a 2×2 matrix A, multiply each row of the matrix by the coordinate vector (dot product). The new vector v' = (x', y') is given by x' = a·x + b·y and y' = c·x + d·y. Geometrically, the matrix scales, rotates, shears, or reflects the vector across the Cartesian plane, while its determinant det(A) = ad - bc dictates how surface area expands or shrinks.
Columns define where basis vectors (1, 0) and (0, 1) land
Row 1 gives new X; Row 2 gives new Y
New position on Cartesian coordinate plane
What is a 2D Vector Transformation?
In linear algebra, a linear transformation (or linear mapping) is a function T: ℝ² → ℝ² that maps every 2D vector to another 2D vector while preserving two foundational properties:
Transforming the sum of two vectors yields the exact same result as transforming each vector individually and adding their outputs together.
Scaling a vector by any scalar constant c before transforming produces the same output as scaling the transformed vector by c afterward.
Because of these two linearity rules, grid lines remain parallel and evenly spaced, and the origin (0, 0) remains fixed at the center. Every 2D linear transformation can be represented by a unique 2×2 matrix.
The Row-by-Column Dot Product Rule
To calculate the coordinates of the transformed vector v' = [x', y']ᵀ from matrix A and vector v = [x, y]ᵀ, multiply each row of matrix A by the column vector:
Take the first row of matrix A — [a, b] — and compute its dot product with vector [x, y]:
Take the second row of matrix A — [c, d] — and compute its dot product with vector [x, y]:
The Basis Vector Secret: Columns Are Transformed Unit Vectors
The most intuitive way to understand 2D matrices (popularized by 3Blue1Brown's Essence of Linear Algebra) is to realize that every 2×2 matrix is completely described by where it sends the two standard unit basis vectors i = (1, 0) and j = (0, 1):
The first column [a, c] tells you exactly where the standard horizontal unit vector (1, 0) ends up after the transformation.
The second column [b, d] tells you exactly where the standard vertical unit vector (0, 1) ends up after the transformation.
Because any vector v = (x, y) can be written as v = x·i + y·j, its transformation is simply:
What Does the Determinant det(A) = ad - bc Mean?
The determinant is not just an arbitrary algebraic formula; it has an exact geometric interpretation: it is the area scaling factor of the transformation.
| Determinant Value | Area Effect | Spatial Orientation | Invertibility |
|---|---|---|---|
| det(A) > 0 | Scales area by factor of |det A| | Preserved (No reflection) | Invertible |
| det(A) = 1 | Area is exactly preserved (Equiareal) | Preserved | Invertible |
| det(A) < 0 | Scales area by factor of |det A| | Reversed (Spatial flip / Reflection) | Invertible |
| det(A) = 0 | Area collapses completely to zero | Collapsed to a line or point | Singular (Not Invertible) |
Common 2D Transformation Matrices Reference
The table below lists the standard 2×2 matrix representations for elementary geometric transformations in ℝ²:
| Operation | Matrix A = [[a, b], [c, d]] | Transformed Coordinates [x', y'] | Determinant |
|---|---|---|---|
| Identity (No change) | [[1, 0], [0, 1]] | [x, y] | 1 |
| Rotation by angle θ | [[cos θ, -sin θ], [sin θ, cos θ]] | [x·cosθ - y·sinθ, x·sinθ + y·cosθ] | 1 |
| Differential Scaling (sx, sy) | [[sx, 0], [0, sy]] | [sx · x, sy · y] | sx · sy |
| Horizontal Shear (factor k) | [[1, k], [0, 1]] | [x + k·y, y] | 1 |
| Vertical Shear (factor k) | [[1, 0], [k, 1]] | [x, k·x + y] | 1 |
| Reflection across Y-Axis | [[-1, 0], [0, 1]] | [-x, y] | -1 |
| Orthogonal Projection onto X | [[1, 0], [0, 0]] | [x, 0] | 0 |
Where 2D Vector Transformations Are Used in Industry
1. Game Physics & Collision Detection
2D game engines (such as Unity 2D, Godot, Box2D) transform hitbox vertices and velocity vectors between local sprite coordinate spaces and global world spaces millions of times per second.
2. Computer Vision & Image Processing
OpenCV and machine learning preprocessing pipelines use 2×2 transformation matrices to apply data augmentation (random rotations, shears, zooms) to train robust convolutional neural networks.
3. Robotics & Inverse Kinematics
Robotic arms rely on matrix transformations at each joint to compute end-effector positions in planar workspace trajectories using forward and inverse kinematics.
4. Web Graphics & CSS Hardware Acceleration
Modern browsers compile CSS transform: matrix(...) and SVG transformation attributes directly into GPU vertex shaders for silky 60fps animations.