5 ms·

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, wh

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

microcolonel 11y ago
I've been doing similar things with shaders. I'm fiddling with rewriting one of these in GLSL.
- essenmitsosse 11y ago
  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)
  - microcolonel 11y ago
    https://github.com/bwhmather/missile-game/pull/9 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 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.
barmstrong 11y ago
Would love to see a writeup on how these are built. Nice work!
- essenmitsosse 11y ago
  I will definitely do a detailed explanation as soon as I am done with my new website.
tedmiston 11y ago
Are you writing the image .px files by hand or generating them from another program, like Illustrator or something?
- essenmitsosse 11y ago
  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.
gloryless 11y ago
Amazing work! I love the thought that went into the artwork
- essenmitsosse 11y ago
  Thanks :) actually the images where just case studies for me, so its nice to hear, people actually like them.
  - xufi 11y ago
    This is pretty cool. When I heard pixel art I thought about video games and a old game of a Mario World
shultays 11y ago
Those were amazing! the resolution independent illustrations. Aren't those images kinda exact opposite of that? Because output image depends entirely on the resolution.
- essenmitsosse 11y ago
  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.
vanderZwan 11y ago
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/ http://ravichugh.github.io/sketch-n-sketch/
tux 11y ago
Very nice, thank you for sharing this! When you move "Teiresias" its like he is dancing!

microcolonel 11y ago

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

essenmitsosse 11y ago
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)
- microcolonel 11y ago
  https://github.com/bwhmather/missile-game/pull/9 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 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.

barmstrong 11y ago

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

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

tedmiston 11y ago

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

essenmitsosse 11y ago
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.

gloryless 11y ago

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

essenmitsosse 11y ago
Thanks :) actually the images where just case studies for me, so its nice to hear, people actually like them.
- xufi 11y ago
  This is pretty cool. When I heard pixel art I thought about video games and a old game of a Mario World

shultays 11y ago

Those were amazing! the resolution independent illustrations. Aren't those images kinda exact opposite of that? Because output image depends entirely on the resolution.

essenmitsosse 11y ago
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.

vanderZwan 11y ago

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/ http://ravichugh.github.io/sketch-n-sketch/

tux 11y ago

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