Hacker News Reader

Comment by essenmitsosse | Hacker News Reader

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

View on HN

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/

Those were amazing!

  the resolution independent illustrations.

Aren't those images kinda exact opposite of that? Because output image depends entirely on the resolution.

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.

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

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)

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.

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

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

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

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.

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

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

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

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

Reply on news.ycombinator.com