Hacker News Reader

Original author here. Thanks for the mention!

The project was done in 2004, first implementation in shockwave, later flash. I redid the whole thing in js+canvas a few weeks ago, finally with a much smoother zooming algorithm than before.

Feel free to shoot me any questions you might have!

How did you do it?! Did you start out with a really high res digital painting, and then cut out the middle, zoom that part in, and repaint over it?

We worked with single steps of 1024x768 pixels size with a center part of 50% left out. An illustrator would either work inwards or outwards of the existing portion. Outwards that would give a photoshop document of 1024x768 with the previous step locked on a centered layer of 512x384. Inwards with the upscaled previous image of 2048x1536 as the frame, and the respective centered paintable area of 1024x768.

The illustrators then could easily blend their work into the other peoples artwork. The whole thing evolved very un-planned. There was no guideline as to what should be depicted. Illustrators just had to pick up what others have left for them. Best part of the process for me.

Definitely interested in how you did it. Also any thoughts on how you think it can be improved in the future

When you watch the whole thing and look at some other page afterwards, it's moving in the opposite direction.

I found the artistic aspect and the amount of work that must have gone into this project more interesting than the technological aspect. There are 15 participating artists though so at least they could split the work.

Thank you for saying that. I was worried that I was hallucinating alone.

I had the same experience, reminded me as a kid riding in the bus, when the bus makes sudden stop everyone goes forward

Ah, this oldie-but-goodie (now in JS form I see!).

- Use [up] and [down] to speed up and zoom out (backwards) respectively.

- Zooming into the sci-fantastical world of O.Z. http://www.syfy.com/tinman/oz/

This fantastic interactive artwork makes me seriously want to watch the show being promoted (Tin Man, a TV miniseries). Many of the pieces in it are stunningly evocative (like the Asian city) and bring to mind some of the best adventure games of yesteryear.

- Zoomquilt II http://zoomquilt2.madmindworx.com/

Bigger, longer, and more unhinged than the original. This brings me back to the collaborative online art projects and people getting together on forums to do cool things for the heck of it.

- Zoom Out! from the SomethingAwful forums http://www.youtube.com/watch?v=RVGWb9-hhOI http://www.somethingawful.com/photoshop-phriday/zoom-out/

An endless (not really), silly pastiche of meme-y images, courtesy of the goons of SA.

- There's a tradition of "collaborative building" projects on the SomethingAwful Forums, which tend to be full of in-jokes and pop culture/videogame references. Some examples:

The Blue Ball Machine: http://blueballfixed.ytmnd.com/ http://blueballmachine2.ytmnd.com/ (These ones are a crazy joy to follow.)

Goon Tower: http://www.youtube.com/watch?v=jMhacr36JB0 http://www.archi-ninja.com/the-worlds-largest-online-buildin...

Goon City: http://forums.somethingawful.com/showthread.php?threadid=292...

Goon Base (the grandaddy): http://pictures.deadlycomputer.com/d/16192-1/goonbase.jpg

The art is compelling, but I don't understand the post title. Is this, in your opinion, some amazing feat of the underlying technology? Doesn't look particularly computationally intensive or anything like that. Yes, canvas lets you draw 2D graphics inside a browser.

The rule is simple: if it has a 'JS' or 'canvas' in its title you HAVE to upvote it, because it's "innovation".

or haskell or scala or coffeescript or ...

go

While your comment is obviously snarky, it's also depressingly correct

Don't worry, the title will be 'Zoomquilt' shortly.

What's up with all of the snarky comments? This community is getting more and more toxic by the day.

I think it's largely because of the title, which suggests that this (and JS + HTML canvas) is technically innovative in a way that it isn't.

As long as they're informed criticisms and not too aggressive, that's a good thing. If people are potentially going to criticize your project for not bringing anything new, point out where you've oversold it, etc. then the positive feedback means a lot more. Plus you (and others reading) might learn something.

Better than having a sycophantic echo chamber.

The amazing part is actually that I opened a link to a javascript demo page and my cpu fan didn't immediately start up.

And it worked flawlessly in my "not so broad" band

It's a piece of art, enabled by web technologies that are far more accessible now than in the past. I love web art stuff. I'm both an artist and a scientist/programmer, so things like zoomquilt are a perfect marriage for me. Gives both sides of my brain stimulus.

It appears to be similar to previous version: http://zoomquilt2.madmindworx.com/zoomquilt2.swf. Only this time it's a slightly different script language, different rich client and a different vector-based rendering engine. The obvious difference is that now I can't save it easily to be enjoyed later.

If you're using Chrome:

* File > Save Page As...

* Choose "Webpage, Complete".

* Enjoy later.

Don't know how well other browsers handle this.

Interestingly I was poking around in //flags/ in Chrome today, and came across a "MHTML" one. Wondering what MHTML I came across this:

http://en.wikipedia.org/wiki/MHTML

"MHTML, short for MIME HTML, is a web page archive format used to combine resources that are typically represented by external links (such as images, Flash animations, Java applets, audio files) with HTML code into a single file."

I haven't tested it, but it seemed like a neat idea.

"Microsoft Internet Explorer, as of version 5.0, was the first browser to support reading and saving web pages and external resources to a single MHTML file"

I take the last sentence back then.

Other differences: the art work is 100% different and you have to wait for the flash version to load.

Luckily my browser has the ability to "bookmark" urls, so while I am not going to save it for "offline" viewing, I can go back to it whenever I am connected to the internet.

> you have to wait for the flash version to load

Isn't that also true of the JS version? It took several minutes to load for me. There's a loading bar in the middle of the screen, which slowly fills up until the demo is ready to run. That could just be due to the server currently being hammered, though.

For some reason that is deeply unsettling. Something about the movement at the edges.

Glad I'm not the only one. Made me cringe, but was fascinating at the same time.

What's deeply unsettling is the usual put-downs from this community.

I very much enjoy the fact that all valid criticism is usually posted and upvoted on HN, as opposed to hurray comments only.

It isn't even criticism. It disturbed me, but I didn't ever say it was bad.

I think it's because the zooming brings things forward, but the perspective of objects don't change as they pass.

Actually pretty amazing, artwork and technology! So how exactly does it work? The art couldn't have been done in a JS canvas, could it? I imagine it's just a really high resolution image that gets zoomed into and looped back? That's actually hard to understand too...

I dunno about everyone else, but on this 24" Dell IPS I can see the next image being loaded and then scaled, does it every few seconds. The details starts getting a bit blurry them pop, new asset super imposed and we start scaling.

It's certainly not a single image, you can see how the content gets blurred at the edges. It's similar to the kind of image you get when you point a camera at a TV and display the picture on the same TV. It looks like infinity, but actually you just have a rectangle in every picture through which you can "look" at the same picture, which in turn has another rectangle etc. In zoomquilt, it's not rectangles, but more complex (vector-drawn?) shapes which let you see through each image to next. Similar to a card stack where every card has a hole, and the last card is also the one before the first.

It's a series of images at different zoom levels. Since there's no freedom of movement, you "just" need to leave a section in the centre empty, have someone draw a large image for that section, copy in a scaled down version of that image.

When displaying it, once you've zoomed in a certain amount, you simply start copying in the next image in the series suitably scaled down, and keep zooming until that image fills the screen, and fill in the next level in, and so on. Roughly.

Repeat for as long as you have images, and optionally make it look nicely back to the beginning as they've done here.

It's nicely done, but technically very simple - "infinite zooms" like this dates back to the early days of the demo scene at least, so at least early 80's (and it wouldn't surprise me if people have done it with "manual" animations before that).

Have a look at 'Powers of Ten' by Ray & Charles Eames (1977) http://www.youtube.com/watch?v=0fKBhvDjuy0

Looking at this for a few minutes and then coming back to HN gave a sort of weaving effect. Very cool.

I'm experience the said effect as well right now.

If you like this, you may like "Escher and the Droste effect"[1][2] and the "Lotsa Escher"[3] screensaver as well.

1. http://escherdroste.math.leidenuniv.nl

2. http://www.ams.org/notices/200304/fea-escher.pdf

3. http://wakaba.c3.cx/s/lotsablankers/lotsaescher

Wasn't the original done in flash like...a decade ago?

And (at least for me) used less CPU?

That's exactly what I was thinking when I saw it. I know I have seen it in swf/gif form in the past. While I don't dispute HTML5's canvas(+js) is very cool I was hoping for something straining the limits or doing something new.

I was going to say something along the lines of "...rather than seeing an old idea/concept rehashed in canvas+js" but then I realized that could include people doing things like getting old games (Quake/Doom) running in the browser with canvas+js. The counterpoint would be that this idea could be implemented in gif form (While it would lose the ability to toggle your direction/speed) whereas I don't think anyone would enjoy gifQuake/gifDoom :).

TL;DR - It would appear I'm jaded when it comes to things like this. And that's probably not a good thing.

Unless I'm mistaken, the original was a scene from an Amiga demo some time in the late nineties.

What's the vine a metaphor for? The government? The TSA? Google? Facebook?

https://vine.co/ ? :-p

I always loved the ice.org 'quilt' platform - it's a bummer that the community never flourished like DeviantArt, etc.

Now if only someone made an ANSi/Ascii version of the zoomquilt... :D

Anyone else experiencing an optical illusion looking at these stills now?

ya, I had to check the address bar to make sure its a still :).

I did, the comments section was zooming out for me (read on iPad)

I get a 403 forbidden for all these links...

It's not obvious to me what the problem is.

Maybe google drive doesn't like the number of hits it got to this one area.

In any case, this is the base directory:

https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...

I can't edit the previous post for some reason, so i'll post it again:

I love this, I happened to have Space Oddity playing at the time and it was an enjoyable experience the two work together well.

Feels like a really bizarre dream.

after seeing it loop for one time, I came back and started reading the comments (on my iPad).

I've had the feeling, while looking at the comment section that it was zooming out (away) from me as if it was to compensate for all that zooming in...

Cool, but needs some depth of field effect added or something.

I cannot draw.

This is fun. Neat work!

black page is black?

Same here on latest Firefox Aurora, a gray rectangle in the middle.

everything zoomed back after watching it for 5min