7in7 – 04 – Invisible Cities, “Ipasia”

The Story
Ipasia, one more from the “Cities and Signs” theme, is a city place where things are found in the exact opposite place where they should be.

1. Sketches
As well as in “Eutropia”, the idea was to express a concept using a visualization. One of my main inspirations for both works was Jaime Serra’s work for La Vanguardia. Serra uses infographics to tell a wide range of stories in an experimental way.


My goal for this one was to use interaction to tell the story, instead. The city concept was simple and straight, great for an interactive version. I thought of a map with upside down controls: zoom out enlarges the view, left leads to right and so on.

2. Prototypes
Since the new Google Maps version doesn’t have left/right buttons, I tried to make that with the dragging-only as well.
Adding the zoom buttons was not a big deal. Except for technical problems: ProcessingJS doesn’t seem able to read an image size. After some time trying to figure out a solution, I found out that svg shapes work fine.

3. Final
Something was still missing to make the concept clear. So I added an intro screen. By pressing “enter”, it closes the window. By pressing the X “close” button, it leads the user to the map. Pretty cool that I could make it with a native javaScript function. I didn’t know that it would work from inside the Processing sketch.
However, it is not working on OpenProcessing versionProbably the website prevents scripts from closing the window.
Update: “scripts can’t close windows that were not opened by script”. That’s what Firefox says and that’s why it won’t happen in any browser. It was working on the javaScript mode preview in Processing because that script WAS opening a new window.
P.S.: yes it is a China map downloaded from Wikimedia Commons. It’s not an accurate representation of the Mongol Empire and the divisions don’t make sense for this case, but that doesn’t matter for what I needed in this project.

ipasia_v06a ipasia_v06b

4. Notes
I probably wouldn’t change anything if I had time, but add more inverted functions — typing backwards, for example.


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s