Flickr Friday

One of the things the Wonderland team is working on is a new default world. The MPK20 world has been with us since the start of the project and it’s overdue for a make over. Among the things I’d like to see is a world which is much more dynamic, interactive and customizable. This brave new world will be the stage for our cool new avatars in 0.5.

Unlike other virtual worlds, Wonderland is written entirely in Java, so we have access to a vast library of Java classes and applications with which to extend the world. The Music In Wonderland demo is a great example of how we were able to create a mashup of a web service ( with a compelling 3D audio/visual visualization. This is just the start. Many community members see the potential and are busily designing and building their own virtual world applications.

These applications are really exciting, and are certainly dynamic, but what about the world itself? What can we do to make the world itself more compelling?

One of the things that has always bothered me about the MPK20 world is that the art on the walls and the standalone posters is baked into 3D models. If you want to change a picture you need a 3D modeling tool. That’s unreasonable. Users ought to be able to control attributes of their world, such as wall art, without having to get under the covers and learn a sophisticated 3D modeling tool. What we need is a "poster" app which you could just click on to change the picture.


I was talking to a member of the Wonderland community recently and she asked me how difficult it would be to integrate a web service with Wonderland. This got me thinking. Maybe I could build a poster app by integrating with a web service?

I knew that Flickr has a web service API, so that seemed like a good place to start. The first step would be to build a Java wrapper for the Flickr web service. It turns out that there’s already one, called flickrj which provides a nice Java abstraction for the Flickr RESTful web service.

Next, I’d need a way to render an image onto a 3D object. Fortunately, Wonderland provides an application framework for 2D applications (check out AppWindowGraphics2DApp). This framework is used by Wonderland’s collaborative apps, including the PDF Viewer, Video Player and VNC Viewer. It provides a 2D canvas you can draw on, a frame (complete with a window border), and event handling that maps 3D events onto a 2D coordinate system. And just like Swing, the framework provides convenient paint(Graphics2D g) and repaint() methods. As a Wonderland 2D application developer, all of the tricky 3D stuff has been taken care of for you by the framework. All you have to do is write the application logic and figure out how to render your data in 2D.

Typical developer!

Ooops! Like many developers I started answering "how?", not "what?"

So, to answer the "what?" question, here some back-of-the-envelope requirements I had in mind for the poster app:

  • it should look like a framed picture (not like an application with a big red/green frame)
  • users should be able to search for new images and choose which one to display
  • it should be able to display an image anywhere in-world (it’s not statically baked into a 3D model)
  • users should be able to use the app for slide shows
  • everyone should see the same images as everyone else
  • if you load an image and log out, the image should still be there when you log back in again


Wonderland already has an application that fulfills many of these requirements: the PDF Viewer. On the surface, the only difference is that the poster app shows images, whereas the PDF Viewer shows pages of a PDF document.

Starting with the PDF Viewer and with the help of flickrj I had an application capable of displaying images from Flickr within a day (drop me a note if you’d like to learn more about how I did this).

As I explored the flickrj API, I discovered a rich set of interfaces for querying Flickr and retrieving images. I chose to support several ways of searching for images:

Search dialog

A Flickr search can return multiple pictures, so I needed a way to display the results. I decided to display the images in a grid:

Grid view

If you click on an image in the grid then that image is displayed full size:

Image view

and if you click it again, you toggle back to grid view.

Getting more dynamic

I now had an application that did everything on the requirements list, but I wanted something that would make the application more dynamic. While browsing the flickr API documentation I discovered the ability to search for recently changed pictures. If you go to and keep refreshing the page you’ll see the latest pictures that people have uploaded. I was astonished to learn that Flickr gets thousands of images uploaded every minute. Last time I looked it was about 5,000 images per minute. That’s over 80 images per second! I was hoping to display all the images as they were uploaded, so you could see Flickr’s "heart rate", but this proved impractical. Even if you had the bandwidth to download 80+ images a second, all you’d see would be a blur. So, I added a new feature, which was a timed search, which displays the most recently uploaded image every 5 seconds. This turned out to be a really compelling feature. It’s quite addictive to watch pictures being uploaded and not knowing what you’ll see next.

This application definitely satisfied my desire to bring "dynamic, interactive and customizable" content into Wonderland. I was quite surprised how compelling it was just to add new art to the world.

If you’re curious to see the app in action, check out the video.

The source code is checked into the wonderland-modules-incubator project:

If you want to use it, you need to obtain your own Flickr API key. Here’s a good place to start:

The Flickr API key goes in the WFS file. Where else? ;)

We’re really collecting a nice collection of apps in the incubator project, including Jordan’s auto-teleporting Portal app, the Batik SVG browser I built, and the hot off the press HTML Viewer that our WPI interns are building. Come join us in our wonderland-mo
dules-incubator sandbox and show off your 2D and 3D Wonderland applications!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: