Uploaded August 2019 | Updated September 2026, 1 hour ago
Image transforms are fundamental to 2D graphics and particularly 2D games, so i thought I'd do an excel model to display some of its key elements. Everything here done in Excel, using only formulae with the only use of macros made for the inputting of key commands (e.g. wasd etc).
This model allows you to input an image (current maximum dimensions of 38 x 38) and view that image on a “screen” after it has been transformed.
The allowed transformations are:
- translation (movement)
- rotation
- scaling
The model uses two image sampling approaches:
1. Direct sampling, which simply selects the nearest pixel in the source image for each screen location. This reproduces the image precisely for simple “neat” transforms like 90 degree / right-angle rotations or movement by integer pixels. However, a wave-like effect occurs when moving the image by a sub-pixel amount, and horizontal / vertical tranches are visible on rotation.
2. Blending by linear interpolation between nearest pixels. This produces a nice clean / smooth movement, rotation, and scaling effect - for the loss of “crispness”. However, that would only be an issue for small pixelated images such as those used in pixel art.
All of the calculations are via Excel formulae, meaning that you can see exactly how the calculations are performed.
The model is available on GitHub, here: github.com/s0lly/2DImageTransformsInExcel
Other Resources:
- Casey Muratori explores this on his Handmade Hero stream here: youtu.be/kVU_QIxm3AA. He explains a range of issues with direct sampling and ways to overcome them.
- javidx9 posted an interesting version of this in C++, here: youtu.be/zxwLN2blwbQ. I believe that his video only uses the direct sampling technique, being an introduction of the topic.
Hope you enjoyed!
Acknowledgements:
Music by Eric Skiff, song "All of Us" for the intro and "Underclocked (underunderclocked mix)" for the main sequence. (Available at EricSkiff.com/music)
Image transforms are fundamental to 2D graphics and particularly 2D games, so i thought I'd do an excel model to display some of its key elements. Everything here done in Excel, using only formulae with the only use of macros made for the inputting of key commands (e.g. wasd etc).
This model allows you to input an image (current maximum dimensions of 38 x 38) and view that image on a “screen” after it has been transformed.
The allowed transformations are:
- translation (movement)
- rotation
- scaling
The model uses two image sampling approaches:
1. Direct sampling, which simply selects the nearest pixel in the source image for each screen location. This reproduces the image precisely for simple “neat” transforms like 90 degree / right-angle rotations or movement by integer pixels. However, a wave-like effect occurs when moving the image by a sub-pixel amount, and horizontal / vertical tranches are visible on rotation.
2. Blending by linear interpolation between nearest pixels. This produces a nice clean / smooth movement, rotation, and scaling effect - for the loss of “crispness”. However, that would only be an issue for small pixelated images such as those used in pixel art.
All of the calculations are via Excel formulae, meaning that you can see exactly how the calculations are performed.
The model is available on GitHub, here: github.com/s0lly/2DImageTransformsInExcel
Other Resources:
- Casey Muratori explores this on his Handmade Hero stream here: youtu.be/kVU_QIxm3AA. He explains a range of issues with direct sampling and ways to overcome them.
- javidx9 posted an interesting version of this in C++, here: youtu.be/zxwLN2blwbQ. I believe that his video only uses the direct sampling technique, being an introduction of the topic.
Hope you enjoyed!
Acknowledgements:
Music by Eric Skiff, song "All of Us" for the intro and "Underclocked (underunderclocked mix)" for the main sequence. (Available at EricSkiff.com/music)
