Responsive Pixel Art | Hacker News Reader

Responsive Pixel Art

essenmitsosse.de

624 pointsfctorial50 comments

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

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

That's because Rollercoaster tycoon and Transport tycoon (of which Openttd is a remake) were made by the same programmer: Chris Sawyer.

> were made by the same programmer: Chris Sawyer.

... in x86 assembly language:

> https://en.wikipedia.org/w/index.php?title=RollerCoaster_Tyc...

Wow! That game was developed by a single guy? In assembly?? That's incredible!

How does one even begin to manage a project this large and complex in assembly?

It’s an achievement, for sure. Maybe it’s just me, but there’s not really anything special about assembly. It does require a different way of thinking than higher level languages, but if you’re used to it, why not continue using what you’re good at?

Or, if you want to loose a few months of your life, instead of looking at the code, just play the game. After 5 years, I am still improving the urban rail system of my metropolis.

Does anything similar exist for creating responsive ascii art?

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

these twO as amazing: - the braids on teiresisas - all of zeus

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?

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

Also some random particles stuff, like in Tantalos.

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

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.

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.

Previously discussed (2016): https://news.ycombinator.com/item?id=11253649

This is brilliant. I particularly like Zeus.

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.

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!

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.

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.

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.

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.

Ahh, that was it. Makes much more sense now.

On Chrome mobile, rotating to portrait mode made the navigation visible.

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

Iirc they only had one eye and one tooth between them, which they shared.

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

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

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

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

[1] https://en.wikipedia.org/wiki/Taxicab_geometry

Cool idea. I don't see why you couldn't do this. First, run seam carving at a few sample aspect ratios but modify the algorithm to keep track of what regions are carved. Create a kind of heatmap that records the "disposibility" of each pixel (probably in two dimensions, x and y) interpolated from the sample seam carved images. Use that to remove or add pixels as the user resizes the image.

So, a phase diagram of Zeus can be built.

Zeus, Tantalos and Teiresias are so good!

Teiresias jumps over the snake when resized like a vertical screen

Really nice!

It reminds me somehow of work from Dirk Koy: https://twitter.com/DirkKoy

Zeus is amazing, and the brothers one is pretty impressive! Interesting to play around with different sizes at the transition points!

This is blowing my mind.

This is awesome, especially the Zeus one!

OT. For responsive graphic the css media query work very well on SVG. Can do lots of tricks with it.

Zeus was such a joy

Sort of like auto layouts in iOS

I'm amazed by the amount of free time some people have.

Don't get me wrong, it is very nice :)

Everybody has free time, just look how many posts daily are on Twitter / Facebook.

Some people simply use it to create things.

Well, you make your own life ...

I am rather amazed by the patience people have.

I 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 :)

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

I am quite skeptical most of us could do that given all the time in the world.

Reply on news.ycombinator.com