An Infinite Canvas by Any Other Name

Back when Ian created Infinite Canvas, he did so because the technology that he wanted to use simply didn’t exist.  It was a combination of not being able to find the right tool to create an infinite-canvas-style comic and the desire to apply Seadragon’s philosophy to an interesting, albeit niche, space.

Artist Donato Sansone came across the same problem when he tried to create an infinite canvasy, flip-animation… thing.  His response was to create a flip-book of truly epic (or room-sized) proportions and video himself making the magic happen.  I’ve been told that this video contains some disturbing artwork, but the first time I watched it, I hardly noticed over the sound of how awesome it was.

 

-Kevin Hanes

Seadragon Philosophy: The User Never Waits

As you are probably aware,  Seadragon’s schtick is zooming technology and user interface experiments.  We have also done some work in creating design patterns to help with best practices and interaction.  Here in the office we also talk a lot about how to apply a third idea to our projects: a Seadragon philosophy.   In fact, our technologies (Silverlight Deep Zoom, Seadragon Mobile, Seadragon Ajax, etc) can all be seen as manifestations of our philosophy; our vision brought to reality through design and technology.   In this vein I thought I’d post about this technological coda, instead of code, in a series of posts from time to time.

One of the core tenets of our philosophy is that the user should never have to wait for the technology.  Though a simple idea, take a moment to think about all of the times you’ve wanted to do something on a computer and been unable until it finished whatever task it was working on.  Moving email, loading a document or image, starting a program, a piece of software locking up; all of these things cause you to wait.  In Seadragon, we try to make every experience wait-free.

One way to think about the user never waiting is that the UI thread is never blocked. Even in the middle of a lengthy process, we’re still accepting and responsive to user input. This is expressed in Seadragon by allowing you to zoom and pan constantly, even when we haven’t loaded all of the imagery for the current view. In addition, we try to give you something to work with as soon as possible, so even while we’re waiting for the high-res data, we load a little low-res data to show in the meantime.  You always have something to look at and you always have control.

-Kevin Hanes

Hello Monday

It is not often that a portfolio site stands out to me, there is usually a lot of  ”been-there-seen-that” evident.  It is rarer still that an outstanding portfolio is also in some way related to the Seadragon universe, even tangentially.  In the case of the site Hello Monday, we’ve got a whole lotta “awesome” at work.

The entire portfolio is laid out on an infinite, scrolling, vertical, canvas that you can navigate with click and drag, or the mouse wheel.  As you mouse over individual items, they lose their sepia tones and acquire full color for emphasis, letting you interact with them more fully.  A single click to one of the portfolio items will zoom you in for larger imagery and greater detail into the nature of the project.  Another click will send you back out to the full portfolio.

There are a lot of nice touches to this site, from the springs on scrolling, to the smooth transitions between zoom states and the sepia toning.  My favorite bit has to be the intro screen that’s been designed to give visitors to the site an idea of how to putter around the site using click and drag.  It’s a simple thing, but an important one to help get users in the right mindset.  Oh, and the random whale hanging out on top is pretty fun.  Check it out.

-Kevin Hanes

Infinite Photograph

Photo mosaics are nothing new, even though they are super cool and great fodder for zooming. Infinite photo mosaics, however, are even better.

The Infinite Photograph project by National Geographic starts out as a lovely landscape photograph which allows the user to zoom in on a square area of the photo, transforming that grid neatly into a photo mosaic comprised of pictures submitted to My Shot. Zoom in more to get an idea of what you’re looking at, then select a photo from the grid and start the process all over again. Very slick! (And they’ve even got one especially for pictures of dogs.)

There are limitations, of course: though it feels like it probably is “infinite” in that you can keep clicking into level after level of mosaic, some areas tend to repeat the same few photos over and over to achieve the right color. Once the My Shot photograph database has more to choose from, this will be less of an issue. Additionally, it feels clunky to click inside such a structurally rigid grid in order to zoom — but maybe I’m just spoiled by that buttery-smooth Seadragon zooming experience. (Is that too self-serving?)

–Kate Welch

Spezify

One thing I generally like about developing internet technology is the idea of “everything, all the time”. Sometimes this can be a muddy concept that gets in the way of effective communication, but when done well, it can save the user precious visual time they might otherwise spend looking in several places for similar sets of information.

Spezify is a Flash-powered service that allows users to search for terms and retrieve results as a visual canvas of assorted media. Photos, videos, articles, and Twitter updates relevant to the search query populate the screen, pannable in all directions. It also retrieves a list of words relevant to your search, so you can easily browse different results (by clicking the word) or additional, more specific results (by clicking the pink “+” next to the word). One-click search refinement sounds pretty great; I like the idea of being able to maximize my laziness and yet still dive deeper and find new content. One down side: you can’t zoom, which is usually our first instinct. Still, this does give what is surely a milder version of the Clockwork Orange information overload experience, without any of the nasty brainwashing side effects.

– Kate Welch

Cool things in Seadragon: AppleTree

Scott Mueller is developing a site, AppleTree, with a hefty premise: map out the family tree of the whole world. That’s a lot of data, so he’s chosen to display it with Seadragon. You can zoom and pan around the whole tree, and click on various elements for further interaction.

In addition, for any one person you can have a number of photos. He is using Seadragon there as well to display the images, and has built a gallery interface around it.

From a technical standpoint, he is using Seadragon Ajax on the front end with lots of custom touches. On the back end, he periodically rebuilds all the tiles that make up the tree, building slight variations into each tile level, so that for instance, underlines show up only when you’re zoomed in enough to click on a name.

Rather than load all of the (potentially millions of) click targets at once, it sends a query back to the server for every click to see if anything interesting was hit; if so the frontend takes the appropriate action. You can click the underlined name in a node to go to that person’s page on the site. Clicking a diamond of a node brings you to that person’s other spouse. If the diamond has a number in it indicating multiple spouses, a dialog box will pop up asking you which spouse you want to zoom to. Finally clicking an egg brings you to that person’s parents if they aren’t already underneath them.

There are certainly some rough edges here and there, but it’s great to see Seadragon Ajax getting pushed in new directions like this!

– Ian Gilman

Zoom Quilt

One of the coolest applications of zooming technology (from an aesthetic standpoint) is the Zoom Quilt projects. Artists work collaboratively to create hugely detailed scenes with a focused center point into which the next artist’s piece zooms, and the next, and so forth, revealing an seamless thread of intricate worlds within worlds.

The creativity here is tremendously impressive and demonstrates the power of zooming as a community endeavor. The first Zoom Quilt was done five years ago — pioneers!

Zoom Quilt 1 (2004)

Zoom Quilt 2 (2007)

–Kate Welch

Peacock: Zooming in the Aviary

A lot of people are doing things with zooming on existing data, where the zooming is a purely exploratory feature. You see fewer examples of creation tools in a zooming context. I mean, Photoshop lets you zoom in and out of its canvas, but in terms of zooming UI, it’s pretty rudimentary. Prezi is a good example, and even my Infinite Canvas counts, simple as it is.

The folks at Aviary are doing some amazing things, bringing creativity apps to the web. In terms of zooming interfaces, check out their Peacock, which has a zooming canvas for you to lay your effects patches onto. Interestingly enough, unlike Prezi or Infinite Canvas, the zooming canvas is just a behind-the-scenes organizational tool, rather than the image itself.

Also of note, since it’s a web app, they’ve got the community built in, including the easy ability to derive new works off of other people’s creations, and to track and explore the “family tree” of any work (much like AppJet). This distributed collaboration model seems to be gaining steam, and I definitely see it as the future of creativity.

- Ian Gilman

Hyper-Photos

Jean-Francois Rauzier is a French photographer; his website is slick his photographs are well shot, and he shows an eye for composition.  Of particular note are his “Hyper-Photos”.  These are large images set in a Flash viewer that allow for zooming and panning around a large scene.

The controls are a little wonky; moving the mouse around pans you, you can only zoom in by clicking and zoom out is a ctrl-click. Further, all of the zooming is done around the center of the image, not the mouse.  The entire experience is marred because of this constant movement by panning, but there is a delightful saving grace.  There are “hot” areas all over the image that you can click on for a detail shot.  There are a lot of them in the apartment buildings in the foreground; take some time and drag your mouse around the image.

-Kevin Hanes

Royksopp – Remind Me

Royksopp is an award-winning, electronic musician duo from Norway that have been around for over a decade.  Their hits have gotten critical acclaim and have been featured in a few different advertisements as well.  The band is an artistic success as well as a commercial one; their songs are pretty good too.

A few months back, we posted about the Kinetic Typography phenomenon: taking a sound file (generally a famous movie clip) and physically representing it over an infinite canvas.  Royksopp’s video for their song Remind Me is very similar, though they have an interesting twist.  The entirety of their video is created out of moving infographics and it uses zoom in an infinite canvas.  My favorite effect is their use of an object on screen as a pivot point to transition to a new scene.  Check out Remind Me and some other videos in this area when you get the chance.

This song and music video were done in 2002, an eternity ago in the software world.  It serves to remind us that we should be looking for software innovation, not in other applications, but in places like video games, movies and music videos.

-Kevin Hanes