It took me a while to get the time and energy to throw something together that would be kinda zoomquilty with just DHTML and CSS instead of Flash.
Here it is, with some sample zooming images to see it work.
I've tested in Firefox 3.6 and Internet Explorer 8, and seen it working in Safari. Windows users: I recommend you use something other than IE, which seems to choke on being asked to animate faster than one or two frames a second. I don't know about other browsers. Your mileage may vary.
Notice that you can edit the URLs of the images to use for zooming, so you can test out your own creations. It also accepts a "urls" query parameter where you use semicolons to separate the... oh, like this:
http://web.mit.edu/jcalz/Public/zoom?urls=http://web.mit.edu/jcalz/Public/zoom/zoom0.png;http://web.mit.edu/jcalz/Public/zoom/zoom1.png;http://web.mit.edu/jcalz/Public/zoom/zoom2.png;http://web.mit.edu/jcalz/Public/zoom/zoom3.png.
So, let's get to the:
SPAMUSEMENT ZOOM QUILT
RULES
(Some of these rules may not be strictly necessary, but I think we should stick to them for best results.)
- All images should be 800 by 600 non-interlaced PNG files. (The only super-important piece here is the 4:3 aspect ratio of the image).
- To make a new entry, take the previous entry image, crop it to the center 400 by 300 pixels, and scale it back up to 800 by 600. (This is very important. If you use the wrong part of the previous image or the wrong scaling, it will not properly join up.) Use this cropped-and-resized version of the previous image as your starting point.
Note: if you don't have a program where this is easy, you can use urlimg.com or something like it.
For example, if the previous entry is this:
http://web.mit.edu/jcalz/Public/zoom/sample0.png
the next entry should start like this:
http://web.mit.edu/jcalz/Public/zoom/sample1.png
(By the way, I used urlimg.com to give me that: http://urlimg.com/crop/200,150,400x300/resize/800x600/web.mit.edu/jcalz/Public/zoom/sample0.png ) - Now edit this image in your favorite drawering program. Main idea: ADD DETAIL.
- Do not edit the outermost ten pixels on each edge. Leaving the outermost pixels alone will make the stitching-together of images more convincing.
- Note that anything you draw in the center 400 by 300 pixels is subject to alteration by the next entry. The stuff you draw in there should be only a hint to the next entrant and should not be rendered with painstaking effort or in exquisite detail.
. - That leaves the rectangle-with-a-rectangular-hole-in-the-middle part for you to work your magic. The stuff already present in this part of the image is a hint from the previous entrant. For best results, take the hint; it is always acceptable to just add detail to what's there. Of course you should feel free to add detail in unanticipated ways; just try not to completely subvert the essence of the previous image.
- Signing up for slots: we will do this as the game progresses instead of at the beginning. If you want to draw the next image, post here and say you want to do it. EDIT If 24 hours elapses and you have not submitted the image, someone else can ask for the slot and we will decide what to do.
- If you submit an image which doesn't adhere to these rules, especially the important ones (aspect ratio, properly centered and cropped) you may be asked to fix it. You may also be asked to touch it up it if it adheres to the rules but just doesn't "work" in some sense (if the stitching-together process breaks down for some reason). If something doesn't work, we'll have to leave it out and let some other image take its place, I guess. I don't know.
- I will periodically provide links to the work in progress, although you can do this yourself as I mentioned above.
- Finally, at some point, we will need to provide a last image which loops back around to the first one to make a seamless and endless zoom. We'll deal with that when we get to it.
That's the gist of it. This is not set in stone. If an amendment seems necessary we can make it.
Okay, let's get the ball rolling.
I will provide the first image.
