

Zoomquilt - ppowis
http://zoomquilt.org/
this blew my mind.
======
baumgarn
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!

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

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

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

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

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

------
creamyhorror
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/](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/](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.youtube.com/watch?v=RVGWb9-hhOI)
[http://www.somethingawful.com/photoshop-phriday/zoom-
out/](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://blueballfixed.ytmnd.com/)
[http://blueballmachine2.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.youtube.com/watch?v=jMhacr36JB0)
[http://www.archi-ninja.com/the-worlds-largest-online-
buildin...](http://www.archi-ninja.com/the-worlds-largest-online-building/)

Goon City:
[http://forums.somethingawful.com/showthread.php?threadid=292...](http://forums.somethingawful.com/showthread.php?threadid=2929126)

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

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

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

~~~
nonchalance
or haskell or scala or coffeescript or ...

~~~
devonbarrett
go

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

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

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

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

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

------
_random_
It appears to be similar to previous version:
[http://zoomquilt2.madmindworx.com/zoomquilt2.swf](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.

~~~
myhnusername
If you're using Chrome:

* File > Save Page As...

* Choose "Webpage, Complete".

* Enjoy later.

Don't know how well other browsers handle this.

~~~
girvo
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](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.

~~~
_random_
"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"

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

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

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

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

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

~~~
vidarh
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).

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

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

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

------
nothingspecial
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](http://escherdroste.math.leidenuniv.nl)

2\. [http://www.ams.org/notices/200304/fea-
escher.pdf](http://www.ams.org/notices/200304/fea-escher.pdf)

3\.
[http://wakaba.c3.cx/s/lotsablankers/lotsaescher](http://wakaba.c3.cx/s/lotsablankers/lotsaescher)

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

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

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

~~~
wuliwong
[https://vine.co/](https://vine.co/) ? :-p

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

------
keithgabryelski
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/1.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/2.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/3.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/4.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/5.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/6.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/7.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/8.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/9.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/10.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/11.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/12.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/13.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/14.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/15.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/16.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/17.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/18.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/19.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/20.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/21.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/22.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/23.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/24.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/25.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/26.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/27.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/28.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/29.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/30.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/31.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/32.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/33.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/34.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/35.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/36.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/37.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/38.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/39.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/40.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/41.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/42.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/43.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/44.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/45.jpg)
[https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/im...](https://googledrive.com/host/0B_Y4OBMHA7qRaTBGbVNaVFlYWWM/img/46.jpg)

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

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

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

------
VexXtreme
Feels like a really bizarre dream.

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

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

I cannot draw.

------
shire
This is fun. Neat work!

------
jccalhoun
black page is black?

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

------
isaacjohnwesley
everything zoomed back after watching it for 5min

