[HN Gopher] Responsive Pixel Art
___________________________________________________________________
Responsive Pixel Art
Author : fctorial
Score : 414 points
Date : 2020-01-26 10:24 UTC (12 hours ago)
(HTM) web link (essenmitsosse.de)
(TXT) w3m dump (essenmitsosse.de)
| fyp wrote:
| I wonder if you can make the same demo with real images using
| seam carving.
|
| See the example images in wiki:
| https://en.wikipedia.org/wiki/Seam_carving
|
| Or online demo: https://alexander.soto.io/seam-carving
| amitport wrote:
| I'm amazed by the amount of free time some people have.
|
| Don't get me wrong, it is very nice :)
| tsukurimashou wrote:
| Everybody has free time, just look how many posts daily are on
| Twitter / Facebook.
|
| Some people simply use it to create things.
| [deleted]
| nopacience wrote:
| thanks for your time to reply the messages here
| yuuuuuuuuuup wrote:
| I felt the same way looking at your commit history.
| thrwaway69 wrote:
| I am rather amazed by the patience people have.
| FpUser wrote:
| Well, you make your own life ...
| SanchoPanda wrote:
| I am quite skeptical most of us could do that given all the
| time in the world.
| WilTimSon wrote:
| I love pixel art in general but the Zeus one, in particular, is
| amazing. I think it's only on that one that I realized just how
| much these change in response to movement.
|
| Don't know much about it but this surely takes a lot of work?
| Does every instance of movement have to be accounted for
| separately or would this reuse some variations?
| soup10 wrote:
| image is probably separated into parts and layers with logic on
| how to scale and morph and trial and error to make it look nice
| ComodoHacker wrote:
| Also some random particles stuff, like in Tantalos.
| tsukurimashou wrote:
| it seems each image is in a .px file:
| https://essenmitsosse.de/pixel/scripts/zeus.px
|
| You can see Zeus here, I tried looking at his website and
| twitter but couldn't find much.
|
| On his Github account I can see a project
| https://github.com/essenmitsosse/resolution-independent-grap...
| but it hasn't been updated in 3 years, so I'm not sure if he
| used that or not.
| palencharizard wrote:
| I remember seeing this way back when StumbleUpon was more
| popular. I feel like it was around 2011? Forgot all about it
| but was instantly brought back.
| koverda wrote:
| Zeus is amazing, and the brothers one is pretty impressive!
| Interesting to play around with different sizes at the transition
| points!
| tsukurimashou wrote:
| Zeus, Tantalos and Teiresias are so good!
|
| Teiresias jumps over the snake when resized like a vertical
| screen
| oneeyedpigeon wrote:
| For anyone else who can't see it, the Zeus demo everyone's
| talking about is here:
|
| https://essenmitsosse.de/pixel/?showcase=true&slide=4
| mattxxx wrote:
| these twO as amazing: - the braids on teiresisas - all of zeus
| TheCabin wrote:
| Really nice!
|
| It reminds me somehow of work from Dirk Koy:
| https://twitter.com/DirkKoy
| dec0dedab0de wrote:
| I'm not sure whats going on here but I'm just seeing a picture of
| 3 nude elderly people fighting over a loaf of bread. It doesnt
| really seem responsive beyond stretching to fill the screen.
| dahart wrote:
| Maybe try one or two of the other half dozen examples. And
| spend an extra second or two looking at _how_ the images
| stretch to fill the screen, think about what it would take to
| make the image stretch the way it does.
|
| BTW, "responsive image" referring to having the image respond
| to resize, with _anything_ other than uniform stretch, is
| absolutely standard terminology in web development.
| tablethnuser wrote:
| On Firefox mobile the site navigation doesn't appear so the
| link literally leads to a single picture of three old naked
| men fighting over bread and that's it.
|
| Maybe try giving people the benefit of the doubt. And spend
| an extra second or two considering valid reasons why someone
| might post something.
| dec0dedab0de wrote:
| Ahh, that was it. Makes much more sense now.
| rgovostes wrote:
| The image depicts the Graeae, three sisters who held the
| secret of where the Gorgons (e.g., Medusa) lived. I'm not
| sure what the "bread" is in the picture. Presumably only
| one could eat at one time?
|
| https://www.greeklegendsandmyths.com/the-graeae.html
| wtracy wrote:
| On Chrome mobile, rotating to portrait mode made the
| navigation visible.
| DanBC wrote:
| In Firefox, on Windows 10, moving the mouse pointer over the
| resizes the image.
|
| For the "Zeus" image (selectable from a list on the side of the
| screen) you get a lot of changes - Zeus goes from young to old,
| changes into animals, etc.
| andai wrote:
| Previously discussed (2016):
| https://news.ycombinator.com/item?id=11253649
| chewxy wrote:
| Zeus was such a joy
| ww520 wrote:
| OT. For responsive graphic the css media query work very well on
| SVG. Can do lots of tricks with it.
| mschuetz wrote:
| This is awesome, especially the Zeus one!
| mathiasrw wrote:
| This is blowing my mind.
| tony wrote:
| If you are interested in the code behind bitmaps / pixel sprites
| that scale, pan, and zoom, I'd like to offer up OpenTTD.
|
| https://www.openttd.org/
|
| Specifically, Viewports, Blitter and Resize handling:
|
| Viewport:
| https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/viewport.c...
|
| Window resizing:
| https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/video/sdl_...
|
| Zoom:
| https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/main_gui.c...
|
| OpenTTD is interesting because it can have multiple "cameras"
| following objects on the screen. e.g. a viewport can be opened to
| follow a bus or train, zoomed in, while the main viewport is
| zoomed out.
|
| Also I'd like to recommend aseprite (https://www.aseprite.org/),
| which has even cleaner code with zoom / panning / etc. The GUI
| itself is also pixel art:
| https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/rend...,
| https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/app/...,
| https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/ui/v...
| colejohnson66 wrote:
| > OpenTTD is interesting because it can have multiple "cameras"
| following objects on the screen. e.g. a viewport can be opened
| to follow a bus or train, zoomed in, while the main viewport is
| zoomed out.
|
| I have used OpenTTD, so I don't know the specifics, but from
| how you describe it, RollerCoaster Tycoon has/had this too. The
| main viewport would show what you're zoomed in/out on, while
| you could have a screen open following a roller coaster train.
| colonwqbang wrote:
| That's because Rollercoaster tycoon and Transport tycoon (of
| which Openttd is a remake) were made by the same programmer:
| Chris Sawyer.
| wolfgke wrote:
| > were made by the same programmer: Chris Sawyer.
|
| ... in x86 assembly language:
|
| > https://en.wikipedia.org/w/index.php?title=RollerCoaster_
| Tyc...
|
| > https://en.wikipedia.org/w/index.php?title=RollerCoaster_
| Tyc...
| telmo wrote:
| This is brilliant. I particularly like Zeus.
| CubicsRube wrote:
| Thanks, only after your comment I realized there is more to
| Zeus and I was not looking at it correctly (on big screen).
|
| For those missing the "magic" - try moving the cursor clockwise
| to each corner of the screen.
| danwills wrote:
| There is even much to explore (in Zeus) with the cursor
| inside the frame too (not only on the edges) this is so
| fascinating! Genius!
|
| I was going to look at code (if visible), but there's an
| apology in the element that delayed me, at least long enough
| to write this comment!
|
| The apology says:
|
| > Please don't look to closely at this side or any of the
| javascript files. It's a total mess. Normaly I work much
| cleaner. I promise!
| aasasd wrote:
| So, a phase diagram of Zeus can be built.
___________________________________________________________________
(page generated 2020-01-26 23:00 UTC)