*Currently canvas destroyer is integrated into my personal website. At some point I'll break it out into a package or react component for others to use.
What happens when you map pixel data from one source into a new source with a different width? The 'columns' no longer line up properly. If the difference in width is slight, the image is distorted diagonally, though it remains somewhat legible. If the difference in width is great, the image is completely scrambled. Canvas Destroyer is sitting at the top of this page. It is essentially a more performant version of Image Destroyer implemented with canvas elements. Given a source image, it allows the pixels in that image to be drawn into a grid of any width up to the original width of the image.
In thinking about the fact that the new image would only correctly resolve when the width of the new context matched that of the source, I wondered if it would be possible to embed a second image in the array of pixel data which would resolve at a different width. There is a famous 16th century oil painting by Hans Holbein called The Ambassadors. It contains an unusual element - an anamorphic skull. When viewed straight on, this skull is illegible. It looks like a strange, oblique stain across the painting's surface. When viewed from the correct angle however, the skull can be seen. In the example above an image of a hippo can be seen, over which a strange pattern appears. This pattern is created by the pixels of the second image which resolves at a different width than those of the hippo. Click the yellow button in Canvas Destroyer to check it out!
Implementing this involved a cool exercise in closures. I created a function that given an image, returns an array of functions for every pixel in that image. The purpose of these functions is to determine the index in an array of pixel data from another image (the hippo) at which point the 'secret' image's pixels should be inserted. In order for this to work the functions close over variables related to the 'secret' image, and at execution time accept other parameters pertaining to the destination hippo image. The resolve point of the 'secret image' isn't hard coded. It can be specified as an argument.