Experiments Featured Interactive Storytelling Live Web Projects

Interactive storytelling experiment #2: The urban areas of tomorrow

We live in Cities

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

“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

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.

We live in Cities

We live in Cities

Thank You

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?

8 replies on “Interactive storytelling experiment #2: The urban areas of tomorrow”

Help me create a better story. This is the text used in the movie

_root.title1 = “We live in cities”;
_root.description1 = “Since 2006 more than half of the world population lives in cities”;
_root.title2 = “Power”;
_root.description2 = “The US elects a new president. The most influential person in the world”;
_root.title3 = “The Consumer Era”;
_root.description3 = “Todays world is shaped by western culture, technology, power and consumption”;
_root.title4 = “Growing in the East”;
_root.description4 = “Cities are growing together creating dense urban areas; Mega Cores”;
_root.title5 = “Beihai, China 10.58% growth”;
_root.description5 = “The fastest growing urban areas are In China, India and Africa”;
_root.title6 = “Ghaziabad, India 5.20% growth”;
_root.description6 = “The projected growth for the fastest growing urban area is over 10% in 2020”;
_root.title7 = “Sana’s, Yemen 5.00% growth”;
_root.description7 = “In a global and mass production era quantity controls the price”;
_root.title8 = “Surat, India 4.99% growth”;
_root.description8 = “The real power is in the consumer, their demand controls world economy”;
_root.title9 = “Kabul, Afghanistan 4.74% growth”;
_root.description9 = “And the new consumer lives in the rapid developing countries”;
_root.title10 = “Bamako, Mali 4.45% growth”;
_root.description10 = “Cities can’t control the growth, creating an architectural and infrastructural freedom vacuum”;
_root.title11 = “Lagos, Nigeria 4.44% growth”;
_root.description11 = “Growing natural and often uncontrolled slum-cities create large, dense urban areas”;
_root.title12 = “Faridabad, India 4.44% growth”;
_root.description12 = “Creating their own local eco-system, jobs and shops”;
_root.title13 = “Dar es Salaam, Tanzania 4.39% growth”;
_root.description13 = “In these new cities lives the new consumers”;
_root.title14 = “Chittagong, Bangladesh 4.29% growth”;
_root.description14 = “Consumer demand controls the world”;

Great! Love it! What about scraping news headlines and bylines … get the headlines mentioning a Country or City, get the byline, and display those. This way you’ll have a truly generic storyteller of current localized events; told in pictures by citizens instead of the professionals. I’ve got some PHP scripts for Google News if you like :) This reminds me of work I did with for ZKM (see Oh Yeah, Maybe it should be a little bit slower, it’s too fast to read the text, marvel at the pictures, and connect the two – in my opinion.

Good idea, I tried to do some things with scraping Google headlines but I couldn’t get it to work my programming isn’t that good.

Thanks for the feedback, i’ll try to slow it down.

Simplest dom + xpath to get all urls from is as follows in php 5:
$dom = new DOMDocument;
$xpath = new DOMXPath($dom);
$titles = $xpath->query(“//div/a”);
foreach($titles as $title) {
$text = $title->nodeValue;
$href = $title->getAttribute(‘href’);
print “$text“;

Enjoy :)

[…] Inspired by Wilbert Baan’s Interactive Story Telling Experiment and a spare hour to code, I made another system using Flickr to generate image to a story. This time the system scrapes headlines from Google News, gets significant terms from Yahoo, and then queries those as tags in Flickr. This way Flickr provides random, though clarifying, pictures to the headlines – let us say the photo editorial is generative but often illuminating. I’ve made it scroll down automatically and reload when all headlines have been flickrified so I can have my spare screen act as an augmented rss-reader / issue-ticker. You can try it yourself at flickrNews. […]

@Erik Wow the FlickrNews ticker is very cool. Sorry for my late reply I was on a holiday.

I don’t really understand the code you wrote above. I understand what it does, but my coding is often based on examples made by others and help files/manuals.

[…] Wilbert @Erik Wow the FlickrNews ticker is very cool. Sorry for my l… Erik Borra Simplest dom + xpath to get all urls from… Wilbert Good idea, I tried to do some things with scraping Google he… Erik Borra Great! Love it! What about scraping news headlines and by… Wilbert Voila: … Wilbert Help me create a better story. This is the text used in the… […]

Comments are closed.