Search Explore

  • silveira · 10 years ago

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

    • svalorzen · 10 years ago

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

      • kenbellows · 10 years ago

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

        • S4M · 10 years ago

          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 · 10 years ago

            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.

    • fredley · 10 years ago

      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.

      • nkrisc · 10 years ago

        What sorcery is this!?

        • juli3n · 10 years ago

          JavaScript.

          • logicrook · 10 years ago

            What a pernicious double-entendre.

            • koder2016 · 10 years ago

              So, necromancy.

          • dclowd9901 · 10 years ago

            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.

            • jordache · 10 years ago

              The Zeus one is definitely tied to aspect ratio..

            • striking · 10 years ago

              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 · 10 years ago

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

              • yincrash · 10 years ago

                Changing the aspect ratio from portrait to landscape for many of them also results in really interesting interpretations of the same piece.

                • smcl · 10 years ago

                  "Zeus" in particular is pretty cool in this regard

              • onion2k · 10 years ago

                Awesome. I didn't really get it until I looked at the Brother picture, but that is brilliant.

                • Navarr · 10 years ago

                  Brother shows off a good use case.

                  Zeus is just fun

                  • iaw · 10 years ago

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

                • forrestthewoods · 10 years ago

                  How are you seeing different pictures? I don't see any way to pick different images. On Windows+Chrome.

                  • PhasmaFelis · 10 years ago

                    I'm seeing a grey menu bar on the right side. Also Windows+Chrome.

                    • ly · 10 years ago

                      There's a gray sidebar on the right with a list of names and 2 arrows. If you click on any of the names, it goes to that picture.

                      • forrestthewoods · 10 years ago

                        Oh weird. It wasn't there before but now it is!

                        • AReallyGoodName · 10 years ago

                          I don't see the navigation bar to navigate through the images with my browser in a portrait aspect ratio. Works fine in a landscape ratio though.

                      • emmanueloga_ · 10 years ago

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

                    • drcode · 10 years ago

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

                      • kdamken · 10 years ago

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

                        • valine · 10 years ago

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

                          • splatcollision · 10 years ago

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

                          • rhaps0dy · 10 years ago

                            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 · 10 years ago

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

                            • lemiffe · 10 years ago

                              Wow, epic!

                              • FilterSweep · 10 years ago

                                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 · 10 years ago

                                  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

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

                                • jeromeparadis · 10 years ago

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

                                  • claar · 10 years ago

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

                                  • hakvroot · 10 years ago

                                    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 · 10 years ago

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

                                      • daodedickinson · 10 years ago

                                        Zooming in decreases the resolution and zooming out increases the resolution for me on Windows 8.1 + up to date Chrome.

                                        • hakvroot · 10 years ago

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

                                      • Kenji · 10 years ago

                                        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 · 10 years ago

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

                                        • lpbonenfant · 10 years ago

                                          this is incredibly impressive!

                                          • noonat · 10 years ago

                                            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.

                                            • tompetry · 10 years ago

                                              By the beard of Zeus! Bravo, loved this.

                                              • mirap · 10 years ago

                                                Zeus is the winner! ;)

                                                • Exuma · 10 years ago

                                                  This is absolutely nuts... extraordinary.

                                                  • TheOneTrueKyle · 10 years ago

                                                    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!

                                                    • RUG3Y · 10 years ago

                                                      This is stellar.

                                                      • adam12 · 10 years ago

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

                                                        • nom · 10 years ago

                                                          same here (Chrome 48 on Win 10)

                                                        • njharman · 10 years ago

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

                                                          • spdustin · 10 years ago

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

                                                            • spdustin · 10 years ago

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

                                                            • sbarre · 10 years ago

                                                              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.

                                                              • hammock · 10 years ago

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

                                                                • 0xADADA · 10 years ago

                                                                  Should've been tagged <NSFW>

                                                                  • Lawtonfogle · 10 years ago

                                                                    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 · 10 years ago

                                                                      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 · 10 years ago

                                                                        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 · 10 years ago

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

                                                                          • Lawtonfogle · 10 years ago

                                                                            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 · 10 years ago

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

                                                                  • daodedickinson · 10 years ago

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

                                                                    • uneewk · 10 years ago

                                                                      Some pretty awesome stuff!

                                                                      • ljk · 10 years ago

                                                                        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?

                                                                        • jraedisch · 10 years ago

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

                                                                          • cousin_it · 10 years ago

                                                                            Two-parameter morphing, cool :-)

                                                                            • zaf · 10 years ago

                                                                              That's great work.

                                                                              • elwell · 10 years ago

                                                                                Try hitting Cmd - a bunch of times.

                                                                                • Razengan · 10 years ago

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

                                                                                  • train_robber · 10 years ago

                                                                                    He meant 'Zoom Out'.

                                                                                • Patient0 · 10 years ago

                                                                                  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 · 10 years ago

                                                                                    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.

                                                                                    • catshirt · 10 years ago

                                                                                      it "works" on my iphone, but the minimum and maximum scales are too close to appreciate what it's capable of. that is, you can't really resize the picture by any significant measure.

                                                                                      i didn't "get it" on my phone but when i switched to my desktop it blew me away.

                                                                                    • Nadya · 10 years ago

                                                                                      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.

                                                                                      • Jordrok · 10 years ago

                                                                                        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.

                                                                                        • onetwotree · 10 years ago

                                                                                          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!

                                                                                          • SerLava · 10 years ago

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

                                                                                            • throwanem · 10 years ago

                                                                                              It looks like the GA script is itself dynamically loaded, by injecting a script tag into the document. Fetching the document via "view source" won't execute this, which will produce a log entry on the server side that can't be correlated with a GA page view. That'd make it possible to identify page loads which didn't execute Javascript, which is a decent proxy for "tracking this side" unless somebody decides to be a jerk with curl and while (1) {}.

                                                                                              • Grue3 · 10 years ago

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

                                                                                                • tikwidd · 10 years ago

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

                                                                                              • dahart · 10 years ago

                                                                                                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.

                                                                                                • jianyuan · 10 years ago

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

                                                                                                  • mucker · 10 years ago

                                                                                                    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.

                                                                                                    • nom · 10 years ago

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

                                                                                                      • thedaemon · 10 years ago

                                                                                                        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.

                                                                                                          • essenmitsosse · 10 years ago

                                                                                                            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

                                                                                                            • microcolonel · 10 years ago

                                                                                                              I've been doing similar things with shaders. I'm fiddling with rewriting one of these in GLSL.

                                                                                                              • essenmitsosse · 10 years ago

                                                                                                                My idea was, that these principles could basically be applied to everything. Even 3d-stuff. Its mainly just about having an easy straight-forward way of designen stuff, thats coupled to some variables (in this case the output resolution)

                                                                                                                • microcolonel · 10 years ago

                                                                                                                  https://github.com/bwhmather/missile-game/pull/9 Ben Mather and I were talking a bit about this. He suggested that we could compose signed distance sampling functions for shape rendering, and I implemented this in a demo ( http://codepen.io/xorgy/pen/dGmMLz ).

                                                                                                                  In this case, it's actually pretty easy to implement an editor for arranging functions like this. You could probably generalize the concept to other kinds of functions.

                                                                                                              • barmstrong · 10 years ago

                                                                                                                Would love to see a writeup on how these are built. Nice work!

                                                                                                                • essenmitsosse · 10 years ago

                                                                                                                  I will definitely do a detailed explanation as soon as I am done with my new website.

                                                                                                                • tedmiston · 10 years ago

                                                                                                                  Are you writing the image .px files by hand or generating them from another program, like Illustrator or something?

                                                                                                                  • essenmitsosse · 10 years ago

                                                                                                                    Since those are neither pixel or vector graphics and there is no such program (yet) they have to be done by hand. That’s definitely something I want to change in the future.

                                                                                                                  • gloryless · 10 years ago

                                                                                                                    Amazing work! I love the thought that went into the artwork

                                                                                                                    • essenmitsosse · 10 years ago

                                                                                                                      Thanks :) actually the images where just case studies for me, so its nice to hear, people actually like them.

                                                                                                                      • xufi · 10 years ago

                                                                                                                        This is pretty cool. When I heard pixel art I thought about video games and a old game of a Mario World

                                                                                                                    • shultays · 10 years ago

                                                                                                                      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 · 10 years ago

                                                                                                                        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.

                                                                                                                      • vanderZwan · 10 years ago

                                                                                                                        I have a hunch that one could build a GUI around this code-based image generation, maybe similar to what the Sketch-'n-Sketch interface[0] already does. Since you have actually coded this up, what are your thoughts on that?

                                                                                                                        [0] http://ravichugh.github.io/sketch-n-sketch/

                                                                                                                        • tux · 10 years ago

                                                                                                                          Very nice, thank you for sharing this! When you move "Teiresias" its like he is dancing!

                                                                                                                        • awqrre · 10 years ago

                                                                                                                          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 · 10 years ago

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

                                                                                                                          • konne88 · 10 years ago

                                                                                                                            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 · 10 years ago

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

                                                                                                                              • konne88 · 10 years ago

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

                                                                                                                                • 50CNT · 10 years ago

                                                                                                                                  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.

                                                                                                                                  • nitrogen · 10 years ago

                                                                                                                                    I think it's both. I haven't dug into the source code like others have, and whatever algorithms are in use may not be generalizable, but the tweening is cool and the art is cool.

                                                                                                                                    • bbcbasic · 10 years ago

                                                                                                                                      I have to agree I was surprised by the number of upvotes as it didn't strike that chord with me, but I can see it has with other HN-ers so who am I to argue. I am impressed by the obvious amount of effort gone into it and the originality.

                                                                                                                                  • slunk · 10 years ago

                                                                                                                                    Personally, I'm impressed by how the image dimensions were mapped to the image, not the fact that it can be done at all. There are plenty of boring and simple ways to map dimensions to an image. This was clever and well-implemented, imo. :)

                                                                                                                                  • alienbaby · 10 years ago

                                                                                                                                    A joke right?

                                                                                                                                    • jak1192 · 10 years ago

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

                                                                                                                                      • sreejithr · 10 years ago

                                                                                                                                        Only Zeus becomes a serpent in 16:9.

                                                                                                                                        • z3t4 · 10 years ago

                                                                                                                                          Just like responsive web design, only those who "resize" will enjoy it. blink

                                                                                                                                              • someone_ · 10 years ago

                                                                                                                                                Can you upload source code for Brothers?