TwiddleLab / Math / Vectors and Matrices
Project: Pixel Art Transformer
What you will learn
- Every move of a sprite is a 2 by 2 matrix: read its columns to build it.
- A chain of moves is one product matrix, and the order matters.
- The determinant warns when a sprite would flatten; the inverse brings it home.
How the lesson goes
Make a sprite spin, squash and flip, with only four numbers per move.
Tap each move card to see it.
Draw your sprite.
Pick colours and paint at least six pixels. It stars in every step that follows.
Build the spin: a quarter turn to the left.
Fill the matrix so your sprite lands in the dashed outline.
Column 1 is where (1, 0) goes, (0, 1). Column 2 is where (0, 1) goes, (-1, 0).
Build the squash: twice as wide, half as tall.
Drag the two arrow heads until your sprite fills the dashed outline.
Stretching across doubles i hat; squashing up and down halves j hat.
Build the flip: a mirror, left to right.
Mirroring left to right sends (1, 0) to (-1, 0) and keeps (0, 1).
Chain your three moves into the dashed pose.
Tap the moves into the timeline, Play, then Check.
The product is read right to left: first spin, then squash, then flip. Spin must come first, because squash then flip is not the same as flip after spin.
What is the determinant of your squash, [[2, 0], [0, 0.5]]?
det = ad - bc = 2 × 0.5 - 0 = 1, so area is kept.
How flat can the sprite get before it vanishes?
Slide k down. Stop at the flattest sprite whose det is still at least 0.25.
det [[1, 1], [0, k]] = k, so the flattest allowed is k = 0.25.
Challenge: bring your sprite home.
A spin, a flip and a shear scrambled it. Fill one matrix that undoes the whole chain.
In code, a picture is a list of pixels, and one loop moves them all.
Step through the loop with the spin matrix.
Which sprite does [[1, 0], [0, -1]] make?
[[1, 0], [0, -1]] keeps (1, 0) and sends (0, 1) to (0, -1): an upside-down mirror.
Your Pixel Art Transformer.
Your sprite performs your three moves, on a loop.
Previous lesson: Undoing a Matrix · Part of the course: Vectors and Matrices
Lessons are interactive and need JavaScript. Turn it on to play them.
