
Responsive Pixel Art - bpierre
http://essenmitsosse.de/pixel/
======
essenmitsosse
Hello this is Marcus, the guy who did the resolution independent
illustrations. I just uploaded the current version of the site, so it will no
longer freeze, when the image gets to small. I also updated the Tantalos
image.

I am currently a bit blown away by the reaction to this. I finished this over
a year ago but didn’t manage to make it public till now. I presented this at a
meetup in Berlin yesterday and someone asked for an online version, which I
postet to Twitter — then things escalated quickly.

So because a lot of people are asking: I am currently redoing my completely
outdated homepage. The new one will include an in-depth explanation of what is
actually happening there, what’s the idea behind it and how I want to apply
this to actual web design to make resolution-independent work more easy and
less restrictive for both designers and developers.

Until then I will try to answer some questions here …

Scalable Greetings Marcus

~~~
shultays
Those were amazing!

    
    
      the resolution independent illustrations. 
    

Aren't those images kinda exact opposite of that? Because output image depends
entirely on the resolution.

~~~
essenmitsosse
A lot of people refer to them as „responsive“ illustrations. But responsive
basically means resolution-dependent. You do different versions of your design
for different resolutions — and in between you just stretch or compress them.

These images work differently, there is no source image or something like
that, the whole image is described that everything depends on the final
resolution, so that the image is independent of its output size. There is no
fixed, static sized image anymore.

------
fredley
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.

~~~
striking
Every image is made of JS. It's multiple ways of rendering put into single
files.

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.

~~~
ermainz
"Isn't all code well-designed art?" says my co-worker sitting next to me.

------
noonat
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](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.

------
FilterSweep
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.

~~~
abetusk
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?

[1]
[https://en.wikipedia.org/wiki/Tiresias](https://en.wikipedia.org/wiki/Tiresias)

[2]
[http://up.front.ug/2016/03/08/meetup/](http://up.front.ug/2016/03/08/meetup/)

------
hakvroot
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.

~~~
dingo_bat
Zooming just decreases the resolution for me. I'm on Windows+Chrome. What does
it do for you?

~~~
hakvroot
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).

------
imurray
Reminds me of the following different project for content aware image resizing
or retargeting:

[https://www.youtube.com/watch?v=qadw0BRKeMk](https://www.youtube.com/watch?v=qadw0BRKeMk)

[https://en.wikipedia.org/wiki/Seam_carving](https://en.wikipedia.org/wiki/Seam_carving)

~~~
TuringTest
I thought the same, and also about the Structured Image Editing [1] that was
linked from the Image Analogies thread [2] two days ago:

[1] [https://vimeo.com/5024379](https://vimeo.com/5024379)

[2]
[https://news.ycombinator.com/item?id=11234793](https://news.ycombinator.com/item?id=11234793)

~~~
emmanueloga_
7 years old demo.... are there any paint tools (commercial, open source)
available in the market nowadays implementing these algorithms?

------
dahart
So freaking awesome, this just rules!

My faves are 1- Zeus, and 2- Teiresias

Those two look like they took the most work, and are most technically
challenging. The Man-Eagle-Bull-Snake morph especially.

Halfway random tangent, and halfway related, but I'm really super looking
forward to wider adoption of SVG 1.2 precisely because it adds absolute unit
constraints in addition to the relative constraints, so you can do some of the
same kind of stuff in an SVG image, and have authoring tools to support it.
Not the pixel art side of it, and nowhere near as crazy as this project, but
it will still be really useful.

------
onion2k
Awesome. I didn't really _get it_ until I looked at the Brother picture, but
that is brilliant.

~~~
Navarr
Brother shows off a good use case.

Zeus is just fun

~~~
iaw
I wonder if this can be applied to high quality pixel images as well or if the
distortion would look weird.

~~~
Tyr42
Check out Seam Carving:

[http://perso.crans.org/frenoy/matlab2012/seamcarving.pdf](http://perso.crans.org/frenoy/matlab2012/seamcarving.pdf)

It's pretty cool at altering images to fit an aspect ratio.

------
kdamken
Are you some kind of wizard? This may be the coolest tech demo I've seen all
year.

------
drcode
This is the kind of stuff I come to HN for! MORE OF THESE KINDS OF POSTS
PLEASE!

------
onetwotree
I got a good chuckle out of the Sphinx one -- the guy is standing in front of
it saying "look, a sphinx!", and then if you make it vertical he's all "oh
shit! a sphinx!". At least that's how I saw it.

Pretty awesome!

------
jeromeparadis
Would love to read some explanation on how this is made. Very impressive!

~~~
claar
I encourage the author to do a write-up about the design of this. Fascinating.

------
Patient0
Does this work on anyone else's phone? I just get a heavily pixelated
virtually unrecognisable picture. (iPhone 6 - same for both Chrome and Safari)

~~~
eludwig
IPhone 6s, the image dragging works, but only the first picture is displayed.
The selector doesn't appear.

IPad Air, works perfectly. Image selector appears and you can switch images.
Dragging works as expected.

------
njharman
I'm a jaded, cynical, cranky, old curmudgeon. Still I say that was pretty
flippin awesome. Especially Zeus!

------
adam12
It breaks if you position the mouse to the top or the left edge of the canvas.

~~~
nom
same here (Chrome 48 on Win 10)

------
jraedisch
I kept resizing the window until I realized that there was a simpler way
already implemented. Thought that was a bug first. Really nice!

------
Jordrok
Holy crap, very cool! At first glance I thought it was just a neat little
resizing trick, but then Zeus morphed right before my eyes and I did a double
take. The way it responds to your movement makes it really effective in a way
that would be extremely hard (impossible?) to reproduce in a static image or
even a video.

------
rhaps0dy
This is amazing!

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.

~~~
daodedickinson
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."

------
silveira
That's amazing. What scaling algorithm does it use?

~~~
svalorzen
I don't think it's scaling. Go on the Zeus example and play with it. You'd be
surprised. This is beautiful.

~~~
kenbellows
There's certainly more than just scaling involved, but there's definitely
scaling in there.

~~~
S4M
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.

~~~
gtfierro
If you look at the "image" description files (e.g.
[http://essenmitsosse.de/pixel/scripts/zeus.px](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.

------
sbarre
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.

------
Nadya
This is absolutely bloody amazing. The cleverness with the `Zeus` artwork was
equally entertaining as it was _bloody amazing_ ².

I'd love to hear about the inspiration behind the project.

------
supernintendo
Very well done! Just a small QA note for the creator, it's possible to hit the
"next" arrow until you reach a broken page [1].

[1]
[http://essenmitsosse.de/pixel/?showcase=true&slide=7](http://essenmitsosse.de/pixel/?showcase=true&slide=7)

------
thedaemon
This is really awesome. At first I was going to write a comment about how this
completely ruins pixel art by changing the pixels which are hand placed by the
artists. But then after viewing a few images I realized that this is hand
tooled changed, not just compression. Bravo.

------
jak1192
This reminds me of those flip-books you made when you were younger (or of
current age, whatever).

------
hammock
How do you get to the other images? Or is it broken on mobile (Android Chrome)

------
mucker
I agree with the many comments here. This is stunningly good work down with
such a simple canvass. I'll be taking it to show my kids (who enjoy Greek
mythology) this evening.

------
SerLava
>That's right, I'm tracking this side

Do you mean you're tracking visits that hit "view page source"? Does that
work? I can't find any info about that on Google.

~~~
Grue3
I think he meant "site". It's just regular Google Analytics.

~~~
tikwidd
The author is a German speaker. German 'Seite' can translate to both 'side'
and 'page', so it is a kind of false friend with English 'side'.

------
jianyuan
I like how you can save the image as png! Pretty awesome stuff!

------
mh-cx
The style reminds me of Sword and Sworcery...

[http://www.swordandsworcery.com/](http://www.swordandsworcery.com/)

------
stared
It reminds me of: [http://xkcd.com/1037/](http://xkcd.com/1037/) "Umwelt"

------
elwell
Try hitting _Cmd -_ a bunch of times.

~~~
Razengan
What happens? I can't notice anything, on Safari..

~~~
train_robber
He meant 'Zoom Out'.

------
tompetry
By the beard of Zeus! Bravo, loved this.

------
nom
That's how image resizing should behave. But I guess this will only happen
when AIs take over ^^

------
z3t4
Just like responsive web design, only those who "resize" will enjoy it.
_blink_

------
valine
I wonder if this could be extended beyond pixel art by rendering it with
webgl.

~~~
splatcollision
It's rendering to a <canvas> so no reason why not...

------
daodedickinson
Now we just need neural networks to do this in the style of Jan van Eyck.

------
uneewk
Some pretty awesome stuff!

------
ljk
pretty cool stuff! but is anyone else not able to resize the drawing after the
cursor is moved out of the window when either the drawing width or height is
at 1 pixel?

------
spdustin
Grab the lower right corner of the image frame and drag it.

~~~
spdustin
Just realized on desktop you don't have to grab, sorry. On MOBILE devices, you
can touch a corner and drag it.

------
awqrre
There appear to be a resize bug... for example with The Sphinx, if you go wide
and short, the guy is pointing left with his arms, but if you go tall and
skinny, the guy is pointing up with his arms...

~~~
metafunctor
I think that's intentional. The images change a lot depending on the aspect
ratio. Just try Zeus. Magical!

------
Exuma
This is absolutely nuts... extraordinary.

------
someone_
Can you upload source code for Brothers?

------
konne88
Why do people find this interesting? Is there more to it than the insight that
one can define a function that maps image-dimensions to an image?

~~~
nitrogen
Make the Zeus image tall and skinny. Then make it short and wide. Then make it
square.

~~~
konne88
So this has over 1000 upvotes because it's good art, not because it's an
interesting algorithm?

~~~
50CNT
I think it's because it invokes the "Oh, that's so cool" feeling in people.
It's a good feeling, even if it isn't due to learning about an interesting
algorithm. Hackers and Painters I guess.

------
sreejithr
Only Zeus becomes a serpent in 16:9.

------
cousin_it
Two-parameter morphing, cool :-)

------
zaf
That's great work.

------
mirap
Zeus is the winner! ;)

------
RUG3Y
This is stellar.

------
alienbaby
A joke right?

------
lpbonenfant
this is incredibly impressive!

------
lemiffe
Wow, epic!

------
TheOneTrueKyle
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?

The potential!

------
Kenji
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.

~~~
digikata
A likely related buglet, if you resize down to a single horizontal pixel line
the pic gets stuck at one line.

------
0xADADA
Should've been tagged <NSFW>

~~~
Lawtonfogle
I'm not sure about others, but I also had a NSFW picture load up. Are the
pictures random, some of which are NSFW? (Maybe in some places it is
different, but even classical art can be considered NSFW in parts of the US.)

~~~
catshirt
are we referring to "the three graces"?

at what point along the spectrum of "abstract" does a boob become SFW?

it's a rectangle with a rectangle inside of it, for fucks sake.

~~~
Lawtonfogle
Where I live, if it can be recognized as anything similar to something NSFW,
then it is NSFW. Yes, the culture is extra prudish and I wish it wasn't, but I
don't have any control over it.

~~~
Retra
Saying "this should be tagged NSFW" is taking personal control over it and
directly contributing to that prudish culture.

~~~
Lawtonfogle
It is labeling what it is given the current culture.

Saying 'smoking pot is a crime' is only a statement of what something is given
the current law. It in no way implies that it should be a crime, only that to
that person in that jurisdiction, it is currently a crime. The same logic for
laws holds for mores.

~~~
Retra
If nobody is saying it _should_ be labelled NSFW, then I fail to see why it
was brought up at all.

