I have the feeling is that the algorithm involves different pictures that superficially look the same but represent different things, and the code decides which picture to show according to the coordinates of the mouse, and them rescale it.
I tried briefly to read the code to see if I was right but failed so - I'm not good at reading other people's code :( - so someone please correct me if I'm wrong.
If you look at the "image" description files (e.g. http://essenmitsosse.de/pixel/scripts/zeus.px, linked by another comment), then it looks like the files define a set of constraints on the "components" in an image such as Zeus's arm , the bird beak, the cow's leg, etc. When the mouse moves, my guess is those constraints determine which components are rendered and where they appear on screen.
This is incredible stuff. Zeus in particular is amazing. It all seems to be done with weighted objects and a clever way of rendering them, but it's indistinguishable from magic from where I'm sitting.
It seems to be tying shapes and positions to aspect ratios and tweening them, but that would be an insultingly simple explanation. It's really an amazing piece of work.
I really like that in "Teiresias", if you make the canvas narrow enough, the man jumping (presumably Teiresias) changes position and gets a white beard instead of white long hair. Just to still give the impression that it's an old sage, in small vertical space.
No, it's showing the sex change. He goes from long hair with breasts to losing his hair but getting a long beard.
"In Greek mythology, Tiresias... was a blind prophet of Apollo in Thebes, famous for clairvoyance and for being transformed into a woman for seven years."
The amazing part about the Tantalos slide was that its responsive implementation actually captured the ethos of the myth itself - no matter how far he reached, the fruit moved ever farther away. outstanding work.
I think there's a lot of thought that went into these. The "Teresias" one has the character's bald head and beard morphing into longer hair, I think suggesting that the gender changes as in the myth of Tiresias [1].
I think he (Marcus Blättermann) presented at a meetup in Berlin [2] in a talk called "Resolution-Independent Illustrations in Pure JavaScript". Does anyone have more information on how this was created?
Besides moving your mouse around, zooming in and out also works beautifully (might put a bit of a strain on your system though).
Given the sheer amount of work for one piece, with The Three Graeae appearing to be around 1000 lines of code, I'm also quite amazed he managed to produce seven. Brilliant, and Art indeed.
Very much the same (also as daodedickinson wrote), and I hope I didn't send you on a (short) wild-goose chase with this. I was pleasantly surprised to see that the author took resizing / zooming the window into account and I thought it gave some nice insight on how the features of the pixel art change with scale (without the canvas actually visually shrinking).
I like this. A little bug has snuck into the code somewhere: If you move your mouse pointer directly into a corner, the script fails with "Uncaught TypeError: Cannot read property '0' of undefined". I presume it is a division by zero when the image height or width becomes zero.
This is really cool! If you look at the source, it appears that the images themselves are defined as JS code, almost like a vector image. For example, Zeus: http://essenmitsosse.de/pixel/scripts/zeus.px
The author then has a renderer to turn these into pixel data. It seems to render them down to an actual pixel image on the fly.
As others have stated, this is an amazing demo! I've played around in the past with designing responsive web comics with no real luck, but could you imagine creating a web comic using the techniques used in this demo?
So is this some kind of specialized constraint solver? I'm looking at the JS source for the various art and it seems to be defining relationships alongside the shapes and styles.
131 comments
[ 3.5 ms ] story [ 173 ms ] threadI tried briefly to read the code to see if I was right but failed so - I'm not good at reading other people's code :( - so someone please correct me if I'm wrong.
It's not an algorithm, it's just well-designed art. The design is entirely different for every image. But it's still very, very cool.
Zeus is just fun
http://perso.crans.org/frenoy/matlab2012/seamcarving.pdf
It's pretty cool at altering images to fit an aspect ratio.
https://www.youtube.com/watch?v=qadw0BRKeMk
https://en.wikipedia.org/wiki/Seam_carving
[1] https://vimeo.com/5024379
[2] https://news.ycombinator.com/item?id=11234793
I really like that in "Teiresias", if you make the canvas narrow enough, the man jumping (presumably Teiresias) changes position and gets a white beard instead of white long hair. Just to still give the impression that it's an old sage, in small vertical space.
"In Greek mythology, Tiresias... was a blind prophet of Apollo in Thebes, famous for clairvoyance and for being transformed into a woman for seven years."
I think he (Marcus Blättermann) presented at a meetup in Berlin [2] in a talk called "Resolution-Independent Illustrations in Pure JavaScript". Does anyone have more information on how this was created?
[1] https://en.wikipedia.org/wiki/Tiresias
[2] http://up.front.ug/2016/03/08/meetup/
Given the sheer amount of work for one piece, with The Three Graeae appearing to be around 1000 lines of code, I'm also quite amazed he managed to produce seven. Brilliant, and Art indeed.
The author then has a renderer to turn these into pixel data. It seems to render them down to an actual pixel image on the fly.
The potential!