Abstract

Nowadays our orientation is very often not longer based exclusively on the actual geography and their landmarks. There are loads of alternatives, from street numbers to GPS routing in our smartphones, to guide us to a destination. All of those wayfinding devices have in common that they are abstracted projections of the real world’s spatial arrangement. Which brings us to two interesting implications: First, because abstraction means in this case a decrease of information, something is lost. And second, the longer you are using a device the more you accept it or get used to it. For instance the geographical structure of transportation networks are often reshaped to provide users with more understandable transit maps. These distortions have a major influence on people’s perception of a city’s geography, to the point they get stored mentally and become the collective representation of the real world’s geography.

‘Metrography’ attempts to explore this phenomenon using the most famous of transit maps: the London Tube Map.

Metrography – Print

The piece illustrates the topology of London reshaped according to the underground map. 150cm x 100cm, lambda print.

Inner city area

River around Canary Wharf

Metrography – Web Applet

Interactive version of the print, open in fullscreen

Real Geography of London’s Underground Network

Reshaped Structure According to the London Tube Map

Geography vs London Tube Map

Similar to the process of my MapMap Vauxhall project, all real world geographical locations of stations, railway tracks and thames riverbanks have been matched with the corresponding positions on the London Tube Map. In the image above this process is demonstrated, you can see the mapping of the river thames, victoria line and stations.

First video shows the mathematical deformation mesh, which is applied in the second clip to tube stations, railways and the river thames. Both videos start with the real world geography and blend then gradually over to the Tube Map structure.

With the help of the second clip it is also much easier to understand what the main deformations are. Basically the inner city parts are scaled up and the edges are compressed and marginalized.

Context

Metrography is an outcome of my Design Interactions master, the work is exhibited in the Work-In-Progress Show (1.2.2012 – 6.2.2012) at the Royal College of Art, London.

Abstract

I always was fascinated by mental maps, the idea to ask a person to draw a map from memory, to get an insight of the person’s perception of the world. In my ongoing Design Interactions master we were invited to do a community related project with the local residents of Vauxhall (inner city area of South London), so finally I had a chance to engage myself in this concept.

Furthermore, I was wondering whether it is possible to go with the mental map concept one step further. My idea was not only to collect mental maps of Vauxhall, but also to combine these mental maps with real world map data to “interpolate”, or in a way, to fill the white spots of the mental maps with data of the realities. I was hoping to gain with these mashup maps new insights in terms how people “see” Vauxhall e.g.: how is the space order around them? are there things they would like to change? what is important for them? etc. Or to put it in other, more beautiful words and quote the excerpt or the book You Are Here by Katharine Harmon:

Mapmaking fulfills one of our most ancient and deep-seated desires: understanding the world around us and our place in it.

Because this seems a bit abstract at the first glance, I illustrated the idea/workflow on this poster:

Mental Map Survey

To get people to draw me their mental maps I did this little survey. This project claims not at all to be scientific, so a small sample was enough for my purpose. I ended up to have surveys like this (see below), whereas the example is a very detailed and surprisingly accurate one.

Map/Interpolate Mental to Real World

Next step was to match mental and real world maps. For this purpose I wrote two litte tools (in Processing), MapMap_App and TransformOSM_Droplet. With the first one I was able to create and save a transformation matrix, the procedere is highly subjective and envolves quite a lot of legwork. Btw. a huge thanks to Hartmut Bohnacker for helping me out with the math part, I was not savvy enough to figure it out in such a clever and smart way. The second tool processed then the delta (=transformation matrix) and the OpenStreetMap Data of Vauxhall to a last OpenStreetMap file. In the end I just had to render the file to it’s final visual representation. I decided to style the maps in the google maps style to give them a more “official” look; sidenote: it seems we are already all cognitive branded by google to their particular style. The rendering was done with Maperitive (free desktop app to styple OpenStreetMap files in a quite convenient way).

Video shows the interesting part of the process, the manual matching of the points.

Real World Map – OpenStreetMap

Untouched OpenStreetMap in Google Maps style (bounding box geo coordinates:
-0.131655135, 51.470347, -0.10908757, 51.48923637)

Mashup Maps (Selection) – Mental Maps and OpenStreetMap

Click to enlarge

Click to enlarge

Click to enlarge

Voilà, after this rather long and complicated process I’ve got just another bunch of maps. The maps didn’t  answer all questions I raised at the beginning, but after studying the maps more carefully I really appreciated the fact they look very ambivalent and “real”, which is nice because this reflects that a mental map is also some form of reality (at least of the person who drew it).

But of course you can see in the last map the limitation of the whole idea, if the delta between a mental and real map is too big, the result becomes too complex and is no longer readable. I have the feeling, that this method seems to be a nice starting point to put oneself in the position/world of participants, especially on similar macroscopic levels. Please let me know if you use my toolkit, I would love to see other results.

Download

You can download the source code of both tools (Processing sketches) at GitHub

Context

MapMap Vauxhall is my outcome of the first project of my ongoing Design Interactions master, more background information, context, briefing, and with what my classmates came up etc. can be found in the Design Philanthropy wiki.

This course aims at imparting knowledge concerning the basic principles of the three dimensional space as well as fundamental visualisation techniques to the students. The course is divided in a lecture with practical parts.

Key aspects

• conceptional development of visualisation models which are suited as demonstration of big and complex datasets
• enlargen the set of information to three or more dimensions (traditional visualisation techniques examine most of the times only the possibilites of the two-dimensional space)
• impart knowledge of analytical and methodical skills in three-dimensional thinking and visualisation

Subject of the project

Development of alternative visualisations of hierarchical data in the three-dimensional space

Currently all operating systems use as the only way to display data and folder structures lists and charts. The students develop new and  unconventional approaches to display these data structures far away from lists and charts.

Demo videos

Fabian Kreuzer + Tobias Precht

Mesut Kaya, David Ikuye + Frank Schaeffer

Anja Rapp + Benedikt Burgmaier

Daniel Höll + Philipp Seyschab

Olga Grischtschenko, Jonas Kimmelmann + Julia Staebler

Gero Nicklas, Ralf Retzler + Jan Schlegel

Alexander Wilhelm + Tobias Brossig

Christian Schaaf, Markus Schilling + Carsten Henschel

Jan Barth, Dominik Huber + Roman Grasy

Posters

Mesut Kaya, David Ikuye + Frank Schaeffer

Anja Rapp + Benedikt Burgmaier

Promotion Poster for the new degree programme “Interaktionsgestaltung” (Interaction Design) at the Hochschule für Gestaltung Schwäbisch Gmünd. The Poster shows the long history of digital projects at the HFG Schwäbisch Gmünd over 18 years. Historical projects are stringed together in a helix shaped timeline with starting point in 1990 (bottom) until it ends with recent projects in present (top).The helix shape, the connection lines and the z-axis sorting were done within vvvv. The blank frames were imported to indesign and later filled with project documention screenshots (in correct chronological order) via some indesign scripting.

Detail

During the workout process of our diploma book, we did quite a lot of experiments with generative elements. Because at the end we just could use a limited number of these elements, we decided to design some posters to document these “effects”.

(90,5cm x 128,0cm). Script effect overview poster

All posters are technically done with the Indesign Scripting Interface and a with little help of Processing (recursive area tiling, see end of post). For each “effect” like for instance “connecting all words in one line with all words from the next line”, we programmed always a single script. After we did the book we realised that we got a nice collection of scripts, where you can easily see the spectrum of our experiments. During the diploma-exhibition at the HFG Schwäbisch Gmünd quite a lot of people asked us about these scripts. So we decided to tide up everything and to release this collection in public. Feel free to use and modify these scripts however you wish. Any feedback about modified scripts or projects is very welcome!

Voilá, here it is: MrGenerativeSystemeScriptPack_1.0.zip

Mini demo video

Install notes

• Download and unzip MrGenerativeSystemeScriptPack_1.0.zip
• Copy the “MrGenerativeSystemeScriptPack_1.0″ folder to:
  CS3 -> \Adobe InDesign CS3\Scripts\Scripts Panel
  CS2 -> \Adobe InDesign CS2\Presets\Scripts
• Done. Probably the scripts will work only in CS2/CS3.

How to use it

• Open the “Scripts” Window in Indesign (View -> Automation -> Scripts, or press Alt+Ctrl+F11 this hotkey works only in CS3)
• Select one or multiple textframes
• Run a script by double clicking eg. “MrConnectWord.jsx”
• Some scripts like “MrTweenCharacterPointsize.jsx” accept also selected text

For more informations on Indesign Scripting check hilfdirselbst.ch, adobe forums or the official adobe scripting page. Last but not least, a special “merci” to the hilfdirselbst.ch forum, for answering all our questions so nice!

(90,5cm x 128,0cm). Recursive area tiling algorithmen, various scripts applied on ~300 tiles

(90,5cm x 128,0cm). “MrTweenCharacterPointsize.jsx” and “MrTextlineRest.jsx” in action

(90,5cm x 128,0cm). Recursive area tiling algorithmen, various scripts applied on ~300 tiles

Because Indesign Scripting is sometimes super slow (especially if you try to create a lot of new elements), we decided to use instead Processing for our algorithmen. In Processing everything was way faster, after creating the “tiles” there, we imported it via pdf to Indesign. An online applet of our “recursion tiling algorithmen” can be found here.

Recursive area tiling algorithmen in Processing

Redesign exercise for the exhibition poster “Communicate” – Independent British graphic design since 1960, at the museum für gestaltung zürich. The work was part of my typo class at the HGK Basel.
(90,5cm x 128,0cm)

Redesign exercise for the exhibition poster “trickraum” (museum für gestaltung zürich). The work was part of my typo class at the HGK Basel.

The poster is based on a sequence of images taken in a row. The sequence was processed with custom developed “difference” shader in vvvv. In the end photoshop helped with some final color corrections.