rvanveshana.com
-5-5-4-4-3-3-2-2-1-11122334455i'j'
X AxisY Axis

Matrix Presets

Transformation Matrix [A]
1.2
0.5
-0.3
1.0

The first column [a, c] shows where unit vector i lands. The second column [b, d] shows where unit vector j lands.

Variable Adjuster

Matrix element a (iₓ)1.2
-2.52.5
Matrix element b (jₓ)0.5
-2.52.5
Matrix element c (i_y)-0.3
-2.52.5
Matrix element d (j_y)1
-2.52.5

Auto-Sweep Engine

2x

Matrix Transformations

MATRX

A 2x2 matrix warps 2D coordinate space. Any point in space is multiplied by the matrix values, shifting it. We can track the entire transformation by observing where the basic grid vectors i and j land.

[x′y′]=[abcd][xy]=x[ac]+y[bd]\begin{bmatrix} x^{\prime} \\ y^{\prime} \end{bmatrix} = \begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = x\begin{bmatrix} a \\ c \end{bmatrix} + y\begin{bmatrix} b \\ d \end{bmatrix}

Whiteboard Solver Steps

Step 1

Map Basis Vectors (i & j)

Visual Guide: - Original horizontal grid unit i⃗=(1,0)\vec{i} = (1, 0) lands at (1.20,−0.30)(1.20, -0.30). - Original vertical grid unit j⃗=(0,1)\vec{j} = (0, 1) lands at (0.50,1.00)(0.50, 1.00). Why this matters: - Linear transformations are completely defined by how they move the basis vectors. Once we know where i⃗\vec{i} and j⃗\vec{j} land, we can transform any point on the grid by mixing those coordinates. - Without linear algebra, rotating or shearing an image or character would require calculating complex trigonometric equations (sines, cosines, angles) individually for every single point, which is extremely slow and difficult.

Ai⃗=[abcd][10]=[1.20−0.30]Aj⃗=[abcd][01]=[0.501.00]\begin{aligned}A \vec{i} = \begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} 1 \\ 0 \end{bmatrix} = \begin{bmatrix} 1.20 \\ -0.30 \end{bmatrix} \\ A \vec{j} = \begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} 0 \\ 1 \end{bmatrix} = \begin{bmatrix} 0.50 \\ 1.00 \end{bmatrix}\end{aligned}
Step 2

Warp Sprite Coordinates

Visual Guide: - The translucent white outline is the original spaceship. - The cyan glowing shape shows the spaceship transformed under matrix AA. Real-World Utility: - In game engines and 3D computer graphics (like Unity, Unreal, and CSS 3D transforms), assets are moved, rotated, and scaled using matrix math. - Graphics cards (GPUs) are designed specifically to perform billions of these matrix multiplications per second, enabling smooth 60+ FPS rendering of complex 3D worlds.

[x′y′]=[1.200.50−0.301.00][xy]=[1.20x+0.50y−0.30x+1.00y]\begin{bmatrix} x' \\ y' \end{bmatrix} = \begin{bmatrix} 1.20 & 0.50 \\ -0.30 & 1.00 \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} 1.20x + 0.50y \\ -0.30x + 1.00y \end{bmatrix}