Responsive Pixel Art • Hacker News Board

Re: Responsive Pixel Art

#21

Post by [deleted] » Wed, Mar 09, 2016, 4:59 PM UTC

Navarr wrote: post #6

onion2k wrote: post #5

Awesome. I didn't really get it until I looked at the Brother picture, but that is brilliant.

Brother shows off a good use case. Zeus is just fun

[deleted]

Re: Responsive Pixel Art

#22

Post by juli3n » Wed, Mar 09, 2016, 5:01 PM UTC

nkrisc wrote: post #16

fredley wrote: post #4

This is incredible stuff. Zeus in particular is amazing. It all seems to be done with weighted objects and a clever way of rendering them, but it's indistinguishable from magic from where I'm sitting.

What sorcery is this!?

JavaScript.

Re: Responsive Pixel Art

#23

Post by forrestthewoods » Wed, Mar 09, 2016, 5:02 PM UTC

onion2k wrote: post #5

Awesome. I didn't really get it until I looked at the Brother picture, but that is brilliant.

How are you seeing different pictures? I don't see any way to pick different images. On Windows+Chrome.

Re: Responsive Pixel Art

#24

Post by Kenji » Wed, Mar 09, 2016, 5:02 PM UTC

I like this. A little bug has snuck into the code somewhere: If you move your mouse pointer directly into a corner, the script fails with "Uncaught TypeError: Cannot read property '0' of undefined". I presume it is a division by zero when the image height or width becomes zero.

Re: Responsive Pixel Art

#25

Post by lpbonenfant » Wed, Mar 09, 2016, 5:04 PM UTC

this is incredibly impressive!

Re: Responsive Pixel Art

#26

Post by S4M » Wed, Mar 09, 2016, 5:09 PM UTC

kenbellows wrote: post #12

svalorzen wrote: post #3

Earlier quoted context omitted.

I don't think it's scaling. Go on the Zeus example and play with it. You'd be surprised. This is beautiful.

There's certainly more than just scaling involved, but there's definitely scaling in there.

I have the feeling is that the algorithm involves different pictures that superficially look the same but represent different things, and the code decides which picture to show according to the coordinates of the mouse, and them rescale it.

I tried briefly to read the code to see if I was right but failed so - I'm not good at reading other people's code :( - so someone please correct me if I'm wrong.

Re: Responsive Pixel Art

#27

Post by noonat » Wed, Mar 09, 2016, 5:09 PM UTC

This is really cool! If you look at the source, it appears that the images themselves are defined as JS code, almost like a vector image. For example, Zeus: http://essenmitsosse.de/pixel/scripts/zeus.px

The author then has a renderer to turn these into pixel data. It seems to render them down to an actual pixel image on the fly.

Re: Responsive Pixel Art

#28

Post by PhasmaFelis » Wed, Mar 09, 2016, 5:09 PM UTC

forrestthewoods wrote: post #23

onion2k wrote: post #5

Awesome. I didn't really get it until I looked at the Brother picture, but that is brilliant.

How are you seeing different pictures? I don't see any way to pick different images. On Windows+Chrome.

I'm seeing a grey menu bar on the right side. Also Windows+Chrome.

Re: Responsive Pixel Art

#29

Post by tompetry » Wed, Mar 09, 2016, 5:10 PM UTC

By the beard of Zeus! Bravo, loved this.

Re: Responsive Pixel Art

#30

Post by jordache » Wed, Mar 09, 2016, 5:14 PM UTC

dclowd9901 wrote: post #19

fredley wrote: post #4

This is incredible stuff. Zeus in particular is amazing. It all seems to be done with weighted objects and a clever way of rendering them, but it's indistinguishable from magic from where I'm sitting.

It seems to be tying shapes and positions to aspect ratios and tweening them, but that would be an insultingly simple explanation. It's really an amazing piece of work.

The Zeus one is definitely tied to aspect ratio..