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 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.

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?

Share this post
Tweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn0Email this to someone
  • http://www.hypernarrative.com Wilbert

    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”;

  • http://www.erikborra.net Erik Borra

    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 govcom.org for ZKM (see movies.issuecrawler.net) 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.

  • http://www.hypernarrative.com Wilbert

    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.

  • http://www.erikborra.net Erik Borra

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

    Enjoy :)

  • Pingback: wordpress.justlol.net » Google News interpretations by Flickr

  • Pingback: Anne Helmond » Dear MTV, I Wanna Be MADE into a killer PHP programmer

  • http://www.hypernarrative.com Wilbert

    @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.

  • Pingback: Back from the snow on hypernarrative.com, a weblog by Wilbert Baan about Art, Media and Technology (v. 3.6)