Innovative JavaScript-Based Pixel Image Stuns

Marcus Blatterman is a German graphic designer and website developer whose latest project has caused quite the stir among the web design community. You can see it by searching for essenmitsosse on Google; he is also active on Github. This is a pixel art design that magically transforms on desktop or mobile displays. Even though it is being called an example of responsive design, that is part of the trick because it does not really follow the methodology.

The website loads with an image of what looks to be like a pixelated rendering of a male figure. Moving the mouse and positioning the cursor to resize the image, or using touch gestures on a mobile device, elicits a series of transformations. On a smartphone, the image will resize according to the device orientation, but the most impressive part of the project is how the pixels appear to rearrange themselves to convert the images. You start with a large man that turns into a smaller version of Zeus. Once you play with the image some more, the pixels will converge to show a dove, a cow, a snake, and finally a rectangle.

While the project appears to be made with scalable vector graphics, it is actually a series of canvas elements animated with JavaScript. As previously mentioned, it only appears to be responsive because of the transitions, but it is actually a magic example of what can be done with x/y ratio declarations. The graphics do not scale in a linear fashion, but they appear to do so. The pixels are not rearranging themselves; the transitions are coded, but they pay attention to the aspect ratio and to factors related to regression and interpolation.

Now that this project has been unveiled, we can bet it will be adopted by many designers for two reasons. First of all, digital nostalgia is a trend that has been picking up in recent years, and we are seeing a lot of interest in pixel art. Second, developers are keen on making web animations that visitors can enjoy both on their desktops and laptops as well as on their smartphones and tablets. For more information click here https://essenmitsosse.de/pixel/?showcase=true&slide=4.