7in7 – 01 – Invisible Cities, “Eutropia”

My first idea for the project series was to make all of them based on Italo Calvino’s book, Invisible Cities. The book describes 55 imaginary cities, grouped by themes such as “Cities and Memory”, “Cities and Desire” etc. The descriptions may vary from concrete to abstract, but they all seem to convey a metaphor for different aspects of human nature.

The Story
From time to time the citizens of Eutropia move out. Because of that, the city location is always changing. Also, they change their role in the city when they move, choosing different professions, wives and houses. In spite of the changes, the city always stays the same.

1. Sketches
My first sketch for this story is probably from 2009, when I first read this chapter.


I wanted to show the changing elements in the city in a bubble map. Lines would show the flow. Their crossing connections would suggest the shifting elements. The sequential groups of circles would show the repeating pattern.
I also thought about changing this first draft to display icons and make the trading roles more clear. I gave up on that because the concept behind the story is more abstract. There is no sense in presenting it literally.
These were my first sketches:


I thought that it would be a good idea to mimic a real timeline. That would add the time element to the story, and also make it interactive.
The visualization was loosely based on Moritz Stefaner’s project Map Your Moves, and the GUI on the standard NY Times interactive features.

eutropia_inspiration_mapYourMoves  eutropia_inspiration_nyTimes

2. Prototypes
I started to make a Processing sketch. The code basic idea is very simple:
– generate random coordinates for a predefined number of elements, constrained by an area;
– define random sizes for them;
– repeat this same pattern in different locations.
That was easy. The second step was to add interaction. As the user drags the timeline, bubbles should shrink and grow. No problem with that, too.

But making that in a sequence… That was hard. I did a lot of sketches trying to figure out the overlapping pattern and ended up using a sine curve formula.


After that, I added the flow lines. The tricky thing is that they need to connect to a different bubble in the next city. Creating a non-repeating sorting algorithm  took me some time.

3. Final
Then I applied the same algorithm to the lines’s alpha, added a play button and a background map.
Finished project: all variables are parametrized; you can change the number of bubbles, the city size and the number of cities. It’s not working on javaScript mode, but you can download the code here and run it on Processing app.

4. Notes
If I had more time, I would:
– draw curves instead of straight lines.
– draw arrows; it would reinforce the flow idea.
– make it work on processingJS.


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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