Rotating Without Rotating

I was watching Stand Up Maths’s video on YouTube about rotation without rotating, and it got me really interested. According to him, and math, it takes three skew transformations to achieve the same result as a rotation, without breaking the rules of the grid on which the image’s pixels are within. His example was Mario pixel art, and his dislike of how, when most people rotate it, the pixels (that should be on a grid) misalign.



blank blank blank

Rotated outside of grid--Rotating aligning with grid----skewing



In his video, he had his friend code a tool to simulate Super Mario rotating with the pixels staying right side up, and though it did look a little rough, like removing some pixels or adding some, I wanted a tool like that for myself. So, I coded a tool that takes any image you input and allows you to rotate it on its grid.


Below is the little tool embedded into the page.

Test it out!

I recommend watching his video.