25 ms·
Responsive Pixel Art
- telmo 7y agoThis is brilliant. I particularly like Zeus.
- CubicsRube 7y agoThanks, 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 7y agoThere 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!
- amitport 7y agoI'm amazed by the amount of free time some people have. Don't get me wrong, it is very nice :)
- tsukurimashou 7y agoEverybody has free time, just look how many posts daily are on Twitter / Facebook. Some people simply use it to create things.
- deleted 7y ago[deleted]
- nopacience 7y agothanks for your time to reply the messages here
- FpUser 7y agoWell, you make your own life ...
- thrwaway69 7y agoI am rather amazed by the patience people have.
- tripzilch 7y agoI think most people have patience for different things they enjoy. Someone recently told me they were amazed of my patience, because one of my programs for computer-generated art took 20 seconds to render (meaning it takes 20 seconds, plus a bit of coding, to iterate on a previous output). Their workflow involved a few (powerful) pieces of software, with instant preview for certain tweaks. I'm going to assume most people here write a lot of code, and that you do too. Haven't we all at some time done a debugging or iterating session that took 20+ seconds just to test? (To clarify, usually my programs don't nearly take as long, but sometimes they grow increasingly more complex as I iterate, and when you also increase the resolution ...) I'm sometimes amazed by the patience people have doing running sessions longer than 30 minutes. Or soldering many equivalent pieces on a PCB. Or reverse engineering software. Or hardware. Doing big DIY stuff to your house. Surely there are cool things that you have patience for, that many other people would envy. Probably more than one, I have patience for cooking projects, pen and ink drawing, much more actually. I don't have time for all of it though :) I used to have patience for rather huge (but tiny in size) projects that took half a year of coding in my free time, to write non-interactive real-time procedural graphics and audio applications called 4k demos (4096 bytes of x86 machine code). But I don't have the patience for machine code any more, and that is fine too :)
- thrwaway69 7y agoI instantly thought of rust when you mentioned long times, lol. You are right, though. People have different amount of patience for things but some go beyond it. I have seen projects posted here which people worked on for a decade consistently. That is some hard work and dedication. I can't imagine doing the same and perhaps, it's better I don't. There are many different things to learn and dip into, maybe some day I will have the same patience for things I take up and throw (ADHD).
- SanchoPanda 7y agoI am quite skeptical most of us could do that given all the time in the world.
- WilTimSon 7y agoI 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 7y agoimage 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 7y agoAlso some random particles stuff, like in Tantalos.
- allovernow 7y agoIt appears to be purely a function of aspect ratio. I would guess there are thresholds which interpolate in different directions where each image represents an orthogonal axis.
- tsukurimashou 7y agoit seems each image is in a .px file: https://essenmitsosse.de/pixel/scripts/zeus.px 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-graphics 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 7y agoI 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.
- tsukurimashou 7y agoZeus, Tantalos and Teiresias are so good! Teiresias jumps over the snake when resized like a vertical screen
- dec0dedab0de 7y agoI'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.
- DanBC 7y agoIn 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.
- dahart 7y agoMaybe 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 7y agoOn 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 7y agoAhh, that was it. Makes much more sense now.
- wtracy 7y agoOn Chrome mobile, rotating to portrait mode made the navigation visible.
- rgovostes 7y ago
- mschuetz 7y agoThis is awesome, especially the Zeus one!
- mathiasrw 7y agoThis is blowing my mind.
- andai 7y agoPreviously discussed (2016): https://news.ycombinator.com/item?id=11253649 https://news.ycombinator.com/item?id=11253649
- aasasd 7y agoSo, a phase diagram of Zeus can be built.
- tony 7y agoIf 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/ https://www.openttd.org/ Specifically, Viewports, Blitter and Resize handling: Viewport: https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/viewport.cpp 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_v.cpp#L149 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.cpp#L136 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/ 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/render/zoom.cpp https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/rend..., https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/app/modules/gui.cpp https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/app/..., https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/ui/view.cpp https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/ui/v...
- colejohnson66 7y ago> 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 7y agoThat's because Rollercoaster tycoon and Transport tycoon (of which Openttd is a remake) were made by the same programmer: Chris Sawyer.
- wolfgke 7y ago
- fyp 7y agoI 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 https://en.wikipedia.org/wiki/Seam_carving Or online demo: https://alexander.soto.io/seam-carving https://alexander.soto.io/seam-carving
- vanderZwan 7y agoProbably not quite, because the order in which you carve seams matters for every variant that I'm aware of (forward of backward energy seam carving). That is, if you reduce a 200x200 image to 100x100, you get a different result if you do that in order 200x200 -> 100x200 -> 100x100 than if you do that in order 200x200 -> 200x100 -> 100x100. But if you constrain it so that any reduced resolution is carved by stepping through the path that represents a straight line from the original image, and pre-generate all images, you might end up with something that looks smooth.
- tripzilch 7y agoWhat if you do it (I realize I should probably just try coding this myself), step-by-step, alternating? Like 200x200 -> 199x200 -> 199x199 -> etc (I forget the specifics of how seam carving works again, so maybe this approach makes no sense)
- vanderZwan 7y agoThat's more or less what I was trying to convey: for any size reduction, take the route that follows the path with the shortest Euclidian distance[1] (as opposed to Manhattan distance[1]) from the original resolution. If you do that, then the transitions should look quite smooth. You better memoize the intermediate results if you want decent performance though ;) So yes, I think your line of thought is on the right track! [0] https://en.wikipedia.org/wiki/Euclidean_distance https://en.wikipedia.org/wiki/Euclidean_distance [1] https://en.wikipedia.org/wiki/Taxicab_geometry https://en.wikipedia.org/wiki/Taxicab_geometry
- jones1618 7y ago
- oneeyedpigeon 7y agoFor anyone else who can't see it, the Zeus demo everyone's talking about is here: https://essenmitsosse.de/pixel/?showcase=true&slide=4 https://essenmitsosse.de/pixel/?showcase=true&slide=4
- mattxxx 7y agothese twO as amazing: - the braids on teiresisas - all of zeus
- TheCabin 7y agoReally nice! It reminds me somehow of work from Dirk Koy: https://twitter.com/DirkKoy https://twitter.com/DirkKoy
- chewxy 7y agoZeus was such a joy
- yuuuuuuuuuup 7y agoI felt the same way looking at your commit history.
- ww520 7y agoOT. For responsive graphic the css media query work very well on SVG. Can do lots of tricks with it.
- koverda 7y agoZeus is amazing, and the brothers one is pretty impressive! Interesting to play around with different sizes at the transition points!
- m3kw9 7y agoSort of like auto layouts in iOS