How do photo apps and games rotate, flip, and stretch pictures?
Every point is multiplied by a 2×2 matrix, four numbers that say where the arrows right and up end up. Rotating, mirroring, stretching, and slanting are all just different numbers. The determinant, ad − bc, tells how much areas grow, and a negative one means the picture was flipped.
- Top-left number (a)
- 0
- Top-right number (b)
- -1
- Bottom-left number (c)
- -0.7
- Bottom-right number (d)
- -0.3
- Determinant (area scale)
- -0.7
Challenge: Turn the house upside down with its door still on the left.
Play
Rotate the house 90°, then mirror it. Watch the two arrows and the four numbers.
Challenge: Turn the house upside down with its door still on the left. The box under the picture turns green when you get it.
Stuck? Pick one of the examples from the “Try an example” menu, or press “New example.”
Understand
A matrix is four numbers. Multiply each point by them:
The columns tell the story. The first is where the arrow pointing right lands, and the second is where the arrow pointing up lands. Everything else moves along with them. The shaded square shows the grid after the edit.
The determinant is the area scale. Below zero means the picture is mirrored.
Use
Every input has a unit menu, so you can type values in the units you already have. Results follow your units.
Show the work
- Stretch (a negative number mirrors)
S = \begin{bmatrix} -0.7 & 0 \\ 0 & 1 \end{bmatrix} - Slant: x slides over by k times y
H = \begin{bmatrix} 1 & -0.3 \\ 0 & 1 \end{bmatrix} - Rotate 90°
R = \begin{bmatrix} \cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \end{bmatrix} - Combine them: multiply the matrices
M = R\,H\,S = \begin{bmatrix} 0 & -1 \\ -0.7 & -0.3 \end{bmatrix} - Move a point: row times column
M\begin{bmatrix} 1.6 \\ 0 \end{bmatrix} = \begin{bmatrix} 0 \\ -1.12 \end{bmatrix} - Area scale
\det M = ad - bc = -0.7
Export
Rotate, stretch, slant, and mirror with the controls. The faint house is the original.
- This is a linear map, so the corner at the origin stays put. Real editors add a shift so the picture turns around its center.
For learning and estimation. Verify with applicable codes, standards, and a qualified professional before using in design, construction, or safety-critical work.
Cheat card
| Symbol | Meaning | Unit |
|---|---|---|
| where the arrow (1, 0) lands | ||
| where the arrow (0, 1) lands | ||
| area scale; negative means flipped |
- Read a matrix by its columns. Each column is where one arrow goes.
- Doing two edits in a row means multiplying their matrices, and order matters.
- A determinant of 0 squashes everything onto a line, and nothing can undo it.
Where it’s used
- Computer Science
Games move, spin, and scale every character with matrices, many times a second. - Art & Design
Photo and design apps use them for rotate, flip, and skew, and fonts use a shear to make italics. - Hobbies & Crafts
Straighten a crooked photo, and you’ve used a rotation matrix.
Related exhibits
Start hereHow tall is that tree? Measure its shadow
One shadow and the sun’s angle give you the height, no climbing needed.
Start hereCrosswind landing: splitting the wind into two parts
Pilots break the wind into “along the runway” and “across it.” That’s vector math at 60 knots.
Go furtherHitting your macros: how much of three foods?
Protein, carbs, and fat are three equations, and three foods are three unknowns. A matrix solves all of them at once.
Also tryPizza value: one large or two mediums?
Area grows with the square of the size. That changes which pizza is the deal.
Questions people ask
What does a 2×2 matrix do to a picture?
It moves every point to a new spot, keeping straight lines straight and the center fixed. Its two columns show where the arrows right and up end up, and the rest follows.
What does the determinant mean?
How much areas are multiplied. A determinant of 2 doubles every area, and a negative one also flips the picture over like a mirror.
Why can't a squashed picture be undone?
With a determinant of 0, whole lines of points land on the same spot. Once they're merged, no matrix can separate them again, so there's no inverse.