A painted cat is sheared into noise, then reassembles itself exactly on schedule.
The map (x, y) to (x + y, x + 2y) mod N has determinant 1, so on an N by N image it is just a permutation of the pixels: nothing is ever lost, and a permutation of finitely many things must repeat. Each step is animated as the two shears it is made of, rows sliding sideways by their own index and wrapping around the torus, then columns sliding down by theirs. The stretching factor of 2.618 per step smears the procedurally painted tabby into stripes and then into apparent noise, until after exactly P(N) steps every pixel lands home: 11 steps for N = 199, 15 for 124, 300 for 150 and 750 for 250, never more than 3N. Halfway through N = 233 the matrix power is minus the identity, so the cat briefly returns upside down. The panel tracks the matrix power mod N (the identity at the period), the resemblance to the original over the whole period, the orbits of three tracked pixels, and the period of every N up to 300 against the 3N bound.
Try it. Press the left and right arrows to step backward and forward through the shears, Space to pause, R to reset and 1 to 7 to change the image size, or click a size, a dot on the period chart or a point on the resemblance curve to jump. Click the picture to track a different pixel.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an Arnold's cat map demo with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and stays sharp on high-DPI screens, with a dark background and a large square area for the image.
- Draw a simple cat face with canvas shapes (an orange head, triangle ears, green eyes, a pink nose, whiskers) onto a small offscreen canvas of N by N pixels, with N = 101 to start, and read it back with getImageData.
- Write one step of the cat map: the pixel at (x, y) moves to ((x + y) mod N, (x + 2y) mod N). Because the matrix has determinant 1 this is a permutation, so copy every pixel into a new buffer at its new position.
- Draw the buffer scaled up with image smoothing turned off, and add buttons or arrow keys for one step forward and one step back (the inverse sends (x, y) to (2x - y, y - x) mod N).
- Show the step count, and compute the period: the first k where the matrix power is the identity mod N.
Once that works, make it beautiful:
- Animate each step as its two shears: first every row slides right by its row index, wrapping around, then every column slides down by its column index. Render each frame by looking up, for every screen pixel, which source pixel slides into it.
- Autoplay: step slowly at first, speed through the middle, then slow down for the last two steps so the reassembly lands as a surprise.
- Track one pixel (say the eye highlight) with a ring and leave a dot everywhere it has been.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a chart of the period for every N up to 300, a curve of how much each step resembles the original, or painting a more detailed portrait.
