Hi, hypernarrative is a blog by Wilbert Baan about Art, Media and Technology with a focus on interactive storytelling. If you're new here, you may want to subscribe to my RSS feed with Google or Netvibes. I'll post a few messages a week. Thanks for visiting!

Last week I did an experiment with a linear story and loading photos from Flickr. This week I made a second experiment using the same code and adding a map. I will try to tell a second story.

About the story
This story is about how fast urban areas are growing. These growing areas aren’t in the west. Of the 100 fastest growing urban areas only two are located in what we call the western world.

In an era where our lives get globally connected through similar culture, mass production and consumption these emerging areas will play a very important role in the near feature.

I’ll try to tell this in a short linear story with the latest photos loaded from Flickr and a map that shows the lights of the world. I love that map.

Try it yourself http://www.wilbertbaan.nl/flickrcities/

“UN figures for urbanisation, published this week in the State of the World 2007 report, show that more than 60 million people - roughly the population of the UK - are added to the planet’s cities and suburbs each year, mostly in low-income urban settlements in developing countries. Unplanned urbanisation is taking a huge toll on human health and the quality of the environment, contributing to social, ecological, and economic instability in many countries.”

Guardian January 17th 2007

Difficult
The most difficult part in making this animation is to actually tell a complex story in slides. I want to make something that will make you think about things for a while. The previous Flickr project was easy because you didn’t have to pay much attention. It was a collection of things. This one is more a story making it more difficult to make an impression.

Storytelling tips
The most important thing in interactive storytelling is probably to kill your darlings and only use effects, technology and interactivity if you think it will benefit to the story you want to tell.

Make sure to write out what you want to say. It doesn’t have to be final, but it gives you an idea of what you want to do.

Focus on what you want to say. Focus on the impression your story will have.

All data used in the animation is from this list. Hypernarrative won’t be updated until the first week of March.

Share your best tips and tricks to tell an interactive story? How can I make this better?

Today I experimented with the Flicrk API. An API is an external programmable interface that connects to a database, it allows external developers to access the content in the database. In this case I can access the photos on Flickr by using a free license (API-key).

2.269.526.982 photos
Everyday millions of photos are uploaded to Flickr. While writing this post 4.871 pictures are uploaded every minute and the total of photos uploaded to Flickr is 2.269.526.982. Most of these photos are tagged with meta information, like a title, description, user generated tags and device generated (shutter speed, type of camera, coordinates). That’s a lot of information.

Slideshow experiment
For this first experiment I use thirteen slides to tell something general about myself. Every slide loads the most recent images from the Flickr database based on a tag that corresponds to the slide.

The slideshow plays by itself and has no interaction, it’s linear, but not static. Every time you play the slideshow the content can be different, the story won’t.

www.wilbertbaan.nl/flickrapi/

How would you combine live data feeds with storytelling?

Last week I made the Aphextwinalizer, a Flash gimmick that uses your webcam to show your photo on the cover of your favorite record. I made it as an experiment. It didn’t take long and I wanted to experiment with Flash, webcams and screenshots.

A colleague had seen the experiment and heard about an article that would be published in todays newspaper. The article would be about the suggested burqa-ban and what partial face covering does to open communication. The motivation behind the burqa-ban is that it obstructs open communication.

The colleague suggested if she could use the aphextwinalizer for this. We took the pictures from the article, photoshopped the journalists face out of it and turned it into an online test. “How does your face look when parts of it are covered?”

Just a gimmick, but since the source file was already there it only took a short amount of time to edit the photos and turn this into an interactive extension of the article. We would have never made this if there wasn’t the experiment in the first place.

Bruce Mau
From the incomplete manifesto for growth by Bruce Mau Design.

4. Love your experiments (as you would an ugly child). Joy is the engine of growth. Exploit the liberty in casting your work as beautiful experiments, iterations, attempts, trials, and errors. Take the long view and allow yourself the fun of failure every day.

I like how easy it is to control a webcam inside flash. A lot of people have a webcam and the flash plugin so you can easily use it for a project or website.

I already did a few experiments with webcams.

1. Fade in- fade out, when you stop moving you will fade out.
2. Time for time. Based on the first experiment this is an installation that will only give you time when you give it time. You have to stop moving.
3. The third experiment I did used motion detection and connected fading logos to motion.
4. For eclectro we started doing DJ-sets using webcams and the Ustream service, I was the first to play.
5. A few years ago I made a short video about war. I recorded television with my webcam and changed meaning.

This is experiment 6. The Aphextwinalizer. With this webcam application you can make a screenshot with your face on your favorite record cover. Right now there is just one cover by Aphex Twin. I will post this also on the Eclectro blog and ask readers for other great covers, so I can extend the application.

A screenshot of the application, make your own cover at www.wilbertbaan.nl/aphextwinalizer/, have fun.

Help me to make it better
I’m looking for more great covers, if you know a great one, please let me know by leaving a comment with a hyperlink to the image. The minimal resolution should be 500 pixels width/height. And it should be possible to cut out the face.

The original album cover

Eclectro is a website about music. Having a calendar is a great service for such a website. It is often a popular service, but unfortunately also a very labour intensive one. When searching the web to find an easy way to solve this problem I noticed the solution could be found connecting different webservices.

from Last.fm
For promoters and venues Last.fm is the place to reach the right audience. It’s a music marketing sweetspot. Most websavvy promoters know they have to add their schedule to Last.fm, because here is where the fans are.

Unfortunately it would take a lot of time to collect all the data and copy it into an Eclectro agenda. Last.fm uses Audio Scrobbler to control all feeds in and out Last.fm. A lot of Last.fm data is public available.

to Yahoo Pipes
Yahoo Pipes is an online data-aggragator that enables drag and drop programming. You can add feeds from other services, group and remodel the data from the feeds into a new feed. It is a web-based visual programming interface.

Everything you make on Yahoo Pipes is open source. This means everyone can clone your code en learn from it or build upon it. I found some Last.fm examples and adapted it for 15 Dutch venues. The Yahoo Pipe I build scans those venues on Last.fm for events and combines the data into one large iCal (calendar format) feed.

Now we have a feed with a lot of information, interesting but it has a lot of events in it that are irrelevant to the Eclectro audience. They want to know about electronic music.

to Google
Next stop; Google. Google has a calendar function that let’s you share calendars in public or assign multiple owners to the same calendar. The Yahoo Pipes feed with Last.fm information is loaded into Google Calendar. There I’ve created a second calendar called Eclectro.

And here is where the ‘human’ selection and thus the added value comes in. An Eclectro editor filters Eclectro related events and we end up with a simple calendar with very good information. We will add other events to the calendar as well, but the information from Last.fm is a perfect base.

You can even subscribe to this ‘human’ filtered calendar with Google, Apple’s iCal or XML/RSS. Or use this information as a buildingblock for a better calendar.

Wwwww, dddddjjjjjjj duh?
I hope you’re still with me, it is a kind of geeky description for a simple solution. What it actually does is transferring information from one system to another. Making use of several open web applications. It shows what can happen when we use open standards and systems that can easily export and import data. You don’t need to have access to a web server or be a programmer to build something like this. This is the future of information. Free to move and easy to alter.

The last two years Inge and I have organized lists to present the best dance record of the year.

In 2005 we asked experts about their favorite dance record. In 2006 we upgraded the concept, asked experts about their favorite songs and added a second part where everyone could vote on the records.

This year we will ask everyone about their favorite records of 2007 and let everyone vote.

The voting system
Last year I had been reading Critical Mass, how one thing leads to another (a great book if you like statistics). Somewhere in this book there was the notion that the best scientific choice is one out of two. I love simplicity and wanted to do something with this. The dance election looked like the best opportunity to experiment with it. How can you create an advanced voting system that relies on the simplest choice. Right or left, yes or no?

What we build was a voting machine that had over 70 items in its database. Every time you open the website it generates a random playlist of random pairs. Every time you click one item it will update both items in the database in views and give a point to the winning item. The result is a list generated on percentages (views/votes) and as far I know even reasonably scientific correct.

You can listen to previews of the songs and once you make a choice it will show two new songs to make a new choice. To continue, you always have to choose your favorite song out of a random pair.

It sounds really simple, and it is. So far I have found no other system that beats this way of measuring what people like. The list of songs can be indefinite and the number of contributers can be indefinite. Lobby parties are more than welcome, but they should know that every other vote they make counts. You can vote on four records or 600.

Last year we’ve got over 70.000 votes, great media coverage, heavy use of bandwidth and a final list that is a very good representation of what was interesting in electronic music in 2006.

For this years election we connect the election to the Eclectro blog. A Dutch weblog that has a substantial, growing and very smart group of visitors interested in electronic music.

How to improve
This week I am building the system for this years election, how do you think we can make this better? Is there something we forgot? Or do you know a dance song that should be on the list? Let me know.