
Responsive Pixel Art - fctorial
http://essenmitsosse.de/pixel/
======
tony
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/](https://www.openttd.org/)

Specifically, Viewports, Blitter and Resize handling:

Viewport:
[https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/viewport.c...](https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/viewport.cpp)

Window resizing:
[https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/video/sdl_...](https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/video/sdl_v.cpp#L149)

Zoom:
[https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/main_gui.c...](https://github.com/OpenTTD/OpenTTD/blob/1.9.3/src/main_gui.cpp#L136)

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/rend...](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/app/...](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/ui/v...](https://github.com/aseprite/aseprite/blob/v1.2.16.3/src/ui/view.cpp)

~~~
colejohnson66
> 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
That's because Rollercoaster tycoon and Transport tycoon (of which Openttd is
a remake) were made by the same programmer: Chris Sawyer.

~~~
wolfgke
> 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_Tycoon_\(video_game\)&oldid=935210227#Development)

>
> [https://en.wikipedia.org/w/index.php?title=RollerCoaster_Tyc...](https://en.wikipedia.org/w/index.php?title=RollerCoaster_Tycoon_2&oldid=920220654#Development)

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

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

------
oneeyedpigeon
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](https://essenmitsosse.de/pixel/?showcase=true&slide=4)

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

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

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

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

------
telmo
This is brilliant. I particularly like Zeus.

~~~
CubicsRube
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
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!

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

~~~
rgovostes
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](https://www.greeklegendsandmyths.com/the-graeae.html)

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

------
fyp
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](https://en.wikipedia.org/wiki/Seam_carving)

Or online demo: [https://alexander.soto.io/seam-
carving](https://alexander.soto.io/seam-carving)

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

~~~
tripzilch
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)

~~~
vanderZwan
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](https://en.wikipedia.org/wiki/Euclidean_distance)

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

------
aasasd
So, a phase diagram of Zeus can be built.

------
tsukurimashou
Zeus, Tantalos and Teiresias are so good!

Teiresias jumps over the snake when resized like a vertical screen

------
TheCabin
Really nice!

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

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

------
mathiasrw
This is blowing my mind.

------
mschuetz
This is awesome, especially the Zeus one!

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

------
chewxy
Zeus was such a joy

------
m3kw9
Sort of like auto layouts in iOS

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

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

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

Some people simply use it to create things.

