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.
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.
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.
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.
Then I applied the same algorithm to the lines’s alpha, added a play button and a background map.
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.