Pixel art has produced a new trick from up its jagged sleeve—responsive pixel art. Or, as inventive web designer Marcus Blättermann calls it: “resolution-independent pixel illustrations.” Yes, it’s a bit of a mouthful, but don’t worry, interacting with it for the first time should empty your gob as you involuntarily gawp in wonder. It is nothing if not visually spectacular.
You’ll need to head over to Blättermann’s website to play around with the illustrations. There are seven in total (though there’s room to add more), all of which work the same way, just with different images to reveal to you. To explain it, when you open up an illustration you’ll have one of its corners latched to your cursor, letting you increase and decrease the resolution of the image by moving your computer mouse around in any direction. The trick is that that pixel art adjusts in scale to every length and width that you subject it to—make it tall and thin, or a tiny square, or make it fat on all sides; it’ll keep up.
However, while this technical feat may be impressive, it’s the storytelling potential of this responsive pixel art that Blättermann only touches upon that gives it true potential. This can be seen in only a few of the adaptive illustrations. Take “Tantalos” for example. It’s based on the Greek myth of Tantalus, in which he is eternally punished by being made to stand underneath an apple tree with low branches that were always just out of reach, and in a pool of water that would recede each time he tried to drink from it. In the pixel art illustration, if you position your cursor to the left of the screen, Tantalus is seen standing as he tries to reach an apple on a tree, and if you drag the cursor to the right he slowly degenerates from a standing to a crawling position, as if your motion fast-forwarded time and he became weaker and more desperate.
The gif of the illustration that you can see above is another example that works well. Called “Zeus,” it tells the tale of the Greek god and his many lovers. Making the image tall and thin shows us the humanoid representation of Zeus, but dragging the image across the screen sees him transform into three different animals: the quail, serpent, and bull. As the myth goes, Asterie was turned into a quail as she scorned Zeus while they were in love, Persephone seduced Zeus as a serpent and the two had intercourse in that form, and Zeus appeared to Europa as a white bull with whom he would have two sons.
How exactly these responsive pixel illustrations work is something that Blättermann plans on detailing soon. Hopefully it’s an idea that will spread and be experimented with as a new tool in interactive storytelling.
You can check out all the pixel illustrations over on Blättermann’s website.