Abstract

A while ago, I have had to do a rough simulation for the sea level of the coast of england. Simulation in the sense of, how would the coastline and the territory of Lincolnshire (a county in the east of England) be reshaped approximately by a rise or decline of the sea level due to Global Warming?

While I was trying to figure out how much of Lincolnshire would remain for instance in the case of +6m sea level rise, btw. not that much, I realised that I was very drawn to simulate values beyond “normal” predicted Global Warming sea level projections. As I consider myself a non morbid person, it is safe to rule the voyeurism for catastrophes out. It is the notion of imagine the implications of such transformed/speculative landscapes, which intrigues me.

Because I really enjoyed to browse this “alternative” worlds, I decided to revisit the project to create a series of animations of various “dramatic” changes of a world reshaped by a monumental rise or decline of the sea level. All animations below have been created with the “Speculative Sea Level Explorer” application. The app (+ source code)  is available for download at the bottom of the page, so you can start with your own explorations right away.

When I showed the animations to others, I was asked quite a few times whether this simulation is accurate? Short answer is “yes” in a rough way, especially for the large scale changes like the ones I am showing in the animations. The simulation is based on an elevation data set called “SRTM30 Plus” by the Scripps Institution Of Oceanography, which is an extended version of the original NASA Shuttle Radar Topography Mission (often abbreviated SRTM, land elevation only) enhanced with bathymetry (underwater evaluation). But there are also many limitations e.g. the cost region of the Netherlands is obviously wrong (it is on a rise of “+0″ already coloured blue). Altogether it is just a very basic and rough simulation based on the raw elevation, anything else in not put into consideration.

Legend (meters above sea level)

London

+/-500m / 2m steps

Paris

+/-1000m / 5m steps

Zürich

+/-1000m / 5m steps

Honolulu

+3600m / -6000m / 30m steps

Seoul

+/-1000m / 5m steps

Jerusalem

+/-1000m / 5m steps

LA

+/-1000m / 10m steps

Download – Speculative Sea Level Explorer App

The Speculative Sea Level Explorer App runs on OSX, Windows and Linux. You can download a zip-file which contains the plattform specific application e.g. “application.macosx.zip”. Source code and the zip files are available on github.com/b-g/Speculative-Sea-Level-Explorer.

Inside the github repository there is a SRTM-file for central europe, see “data/w020n90.Bathymetry.srtm”. Run the app and press the “Load SRTM File” button to load the SRTM-file  to get started. You can download other SRTM tiles for the rest of the world at the website of the Scripps Institution Of Oceanography. With the interactive map below you can lookup the filenames. Please note, the SRTM files around the Antarctic currently don’t work correctly.

The app has a few sea level change presets, like the following ones:

• +4 to 6 m – Melting of the Ice Sheets
• -60m – Early Holocene
• -130m – Last Glacial Maximum
• +150m* – The Hunger Games
  “There would still be a civlization, but with much hardship and a much smaller population on a smaller continent, after the ice caps melt and the sea moves in.”
• +1000m* – Waterworld
  “The polar ice caps have completely melted, and the sea level has risen many hundreds of meters, covering nearly all the land”

*my estimations, no hard numbers available. Does anyone have other interesting numbers? If so please drop a note!

Please note, the app is a rough sketch, don’t expect a super sophisticated piece of software. It is basically just the tool is used to produce the animations, I never had the intention to make an app out of it in the first place. Nevertheless I still think it is worth to share it. Feedback is welcome!

SRTM30 Plus Tiles

All SRTM30 Plus tiles courtesy of Scripps Institution Of Oceanography, San Diego, USA.

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

In my ongoing Design Interactions Master my classmates and me recently had the opportunity to do an industry project in cooperation with Intel. We were asked to research, analyse, prototype, test and realize new perspectives and directions for Social Computing. The term Social Computing is very fuzzy, but refers in a general sense to the intersection between social behaviour and computational systems. According to this, pretty everything which is related to human interaction, society and culture then somehow relates to social computing. So you could imagine that the beginning of my research was quite meandering, the scope of this topic is just huge.

After a while I got interested in the area of location based social data and stigmergy. I was particular fascinated in all kinds of “space memory traces” e.g. cowpaths, shortcuts or the mechanisms of ants and pheromone traces. You could argue that the pheromone traces of ants are a form of social data and the ability of ants to “read” this location based date is just possible, because they have enhanced senses beyond the traditional ones humans possess. This thought brought me to an interesting hypothetical question:

• Is it possible to create a new human sense for social computing?
• What if humans could have a sensation of location based social data?

I was really interested in experiencing this “new” sensation personally, so I decided not to speculate too far in the future (in terms of “we all gonna have soon chip implants in our brain”). Instead I  focused in augmenting and enriching our exiting senses with an additional social computing data layer. After quite a lot of attempts like this, the Crime Sounds App was my final proposal to illustrate the idea.

Crime Sounds

Crime Sounds gives you a sense of crime around your current location by enhancing your hearing with a cinematic “soundscape”. Or, to put it in other words, Crime Sounds is literally a Sonification of the crime database published by the UK Police forces for England and Wales.

All crimes within a range of 50 meters are used to generate a soundtrack (the app loads on startup all data in a distance of 750 meters). The volume of four different instruments is controlled by the category and the amount of the crimes within the close range, all other crimes are muted. Because there are 11 crime categories in the database, which is a bit too much for an easy audible differentiation, the categories are grouped from worst to bad into 4 groups, one for each instrument.

The score for the individual soundtracks was composed by Patric Schmidt. Patric and I had quite a long discussion whether we should use abstract sounds or kinematic ones. We both had the feeling that “kinematic” is the better choice, it’s just much more legible to the users. Due to watching movies we are all able to decode immediately whether a musical score emphasis excitement, fear, danger or romance. So hopefully you can decode now easily our final samples:

• Strings
  
• Bass
  
• Drums
  
• Piano
  

Test Run

To get an impression what’s going on if you walk around in the city with crime sounds, the video below shows my test run around the RCA in South Kensington in London. I walked this route.

Implications

After wandering around some time in London with my new social sense, I had the feeling such a sense could have interesting or maybe even serious implications. The experience of specific location changes dramatically if you have an ad-hoc sense of threat and crime. I suppose that I probably wouldn’t rent a house if I had been welcomed with a crime sound. Or I thought a few times twice whether it’s really a good idea to walk further at night in some streets … The video illustrates the scenario.

Download

Download Crime Sounds (iOS > 5.0) in Appstore

Many thanks to my friends at 47 Nord Media for publishing the app!

Context

Crime Sounds is an outcome of my Design Interactions master, more background information, context, briefing, and with what my classmates came up etc. can be found in the Social Computing wiki.

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.

The code for these kind of diagrams was mostly based on the programs presented in chapter M. 5 of our book, Generative Gestaltung.

Later on the design of the annual report was honored the iF communication design award.

A book focused on the designer’s point of view

In 2007, Julia Laub and me got together as we were thrilled by the possibilities of this domain. We decided to use our Diploma (Generative Systems) to dive into its essentials and its underlying algorithms. A year later Hartmut Bohnacker and Claudius Lazzeroni teamed up and with the help of Verlag Hermann Schmidt we were finally able to share our thoughts and findings with the rest of the world in form of a book. “Generative Gestaltung” tries to focus especially on the designer’s point of view: the creation of images and visualisations by using code.

Visualizing ideas by using code

Image are no longer created manually but through a visual idea which is translated into rules and then implemented in a programming language in the form of source code. The result is a piece of software which hopefully creates the desired images or even permutations. To cut a long story short: design is created by coding software instead of using software. Sounds a bit abstract, hu? So what can actually be done with? Here a few possible fields of application and related best practice examples.

• Information Visualisations: Eigenfactor Eigenfactor is a interactive visualizations to explore citation patterns between scientific journals. The goal is “to map the structure of science”.
• Corporate Design: COP15 Generative identity for COP15 the United Nations Climate Change Conference held in Copenhagen in 2009. The logo Consists of 192 lines, one pr. member of the United Nations, conceiving the concept of “a world in continuous dynamic chaos unifying to the ideal constellation – a state of perfect balance”.
• Art & Photography: extracts of local distance Existing architectural photography are merged into multilayered shapes. The resulting collages introduce a third abstract point of view next to the original ones of architect and photographer.
• Rapid Prototyping / Fabbing / Fabrication: Reflection Reflection is a CNC-milled sound data sculpture, inspired by a musical piece by Frans de Waard.

… etc, there are a lot more, but i hope you see the potential.

Transforming signals and noise into information and knowledge

My motivation (as one of the authors of “Generative Gestaltung”) was to provide a solid foundation for others on how this modified design process can be used. Or in other words to empower people to do projects like the ones above. Because still a lot of designers think that coding is geeky and complicated stuff. But in my opinion it’s a powerful tool that fuels creative solutions and will help us to solve future problems. Generative Design will become more and more important in order to turn the growing numbers of signals and noise into useful information and knowledge.

A foundation to build upon

Last but not least you can get the complete source code as we’ve made it available under an Open Source License. You can grab them from the website that supports the book. We would be glad if you let us know of your experiments, ideas and explorations that might arise from our little seeds.

»In my opinion, Generative Gestaltung is by far the most exciting book that uses Processing published to date. The book is an extraordinary achievement …«

2010-08-24, Casey Reas, co-founder of processing

Generative Gestaltung (de)

Designing, Programming, Visualizing with processing
Hartmut Bohnacker, Benedikt Groß, Julia Laub, Claudius Lazzeroni (Ed.)
published by Verlag Hermann Schmidt, Mainz. ISBN 978-3-87439-759-9
www.generative-gestaltung.de | buy now at Amazon

Design génératif (fr)

Concevoir, Programmer et Visualiser
Hartmut Bohnacker, Benedikt Groß, Julia Laub, Claudius Lazzeroni (Ed.)
published by Editions Pyramid, Paris. ISBN 978-2-35017-215-6
www.generative-gestaltung.de | buy now at Amazon

Generative Design (en)

Visualize, Program, and Create with Processing
Hartmut Bohnacker, Benedikt Groß, Julia Laub, Claudius Lazzeroni (Ed.)
published by Princeton Architectural Press. ISBN 9781616890773
www.generative-gestaltung.de | buy now at Amazon

Generative Gestaltung – the lecture

Because the book was a tremendous success we had the opportunity to give lots of lectures all over in Germany, Austria and Switzerland … a live recording of the lecture (german) goes here:

Generative Gestaltung at decoded 11 conference

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

Visualization of the proximity of the content. Press reload to load a new random set

Page context (ig.hfg-gmuend.de)

The proximity of the content aims at offering to the user an alternative possibility to navigate across the wiki ig.hfg-gmuend.de. Contrary to the conventional hierarchical way to navigate which you can find below “menu” – the focus of that kind of navigation is on the proximity of the content.

Interactions

• drag’n’drop: move and fix the nodes
• click: opens the hyperlink
• alt-click: break the fixation of the node
• Cmd/strg-click: opens the hyperlink in a new window

Proximity calculation

For the calculation of the proximity of the content we primarily needed the necessary data which are provided by the Wiki. This happens by the following way:
We query the data bank as followed: (simplified example) “dear data bank; please search all the pages in our Wiki that fulfil the following conditions”:

• at least 1 tag in common with the current page
• pages, that are linked to the current page
• pages, that are linked with outgoing links on the current page
• pages, that are at a level above in the breadcrumb-navigation

For all the Wikipages that were found, we now will calculate the Tanimoto coefficient to our current page. The Tanimoto coefficient represents the accordance of 2 sets of categories to each other. Example:
The Tanimoto coefficient of the following 2 sets

A: dog, cat, tree
And
B: dog, cat, house
Is 0,666

By applying now these calculated results; we are now able to place, categorize and filter all the provided Wikipages:

• nodes with links or back links to other nodes will be set on a higher rank
• by applying the Tanimoto coefficient, we are now able to create a ranking of all the nodes
• only nodes which correspond more than 5% to the conditions of the central node shall be provided

All the pages that fulfilled these conditions represent now our data basis in order to create our visualisation. The quality of our system depends always on the quality of the authors’ categorisation, because, without having tags we are not able to make any conclusions about the relation of the contents.

Visualization

The red node represents our current page. We call this our central node. The coloured codification – 3 different tones of grey – represent the moment of the last update (view also the legend). Principally, the distance between the nodes represents the distance of the content. Neighboured nodes therefore have the highest agreement. The branching structure of our visualisation is found because we are going in strict rotation through our ranking (ranked after the similarity to our current page). By applying the Tanimoto coefficient we are now trying at every step to find the node that fits the best and to link it afterwards with our current page. We repeat this step until we went through our complete ranking and until all the nodes are created. The positioning of the nodes is calculated by a so-called “force directed layout algorithm”. The idea is that every node repels automatically all the other nodes and every brink behave like a virtual feather. The system tries automatically to achieve a relaxed condition. That is why this algorithm is often used to create networks out of graphs.

XML interface

The data concerning the proximity of the content of a certain page are provided by a simple web service. Consequently, they easily can be found and read by a standard http search. They also can be used by every other application: The data are transferred by using a xml file.

Http Query

The http query is always done by adding “/naehe.xml after the url of a page of the Wiki.

Example: For the current page “medienlabor/inhaltliche-naehe” the url has to be http://ig.hfg-gmuend.de/medienlabor/inhaltliche-naehe.xml

XML Structure

For our current visualisation; we only have used a part of the provided data. We defined the interface as general as possible to allow creating a lot of different visualisations. The structure of a XML file is always categorized as followed:

• <naehe> root node, the highest point in the hierarchy
• <wiki_categories> all the tags of the Wiki (we didn’t use that in our current visualisation)
• <centralnode> the current page
• <breadcrumbs> all the pages of our Wiki that are higher in the hierarchy of the breadcrumb navigation
• <wiki_link_related> all the pages that are linked to our current page of the Wiki
• <category_related> all the other pages of the Wiki which possess an intersection of the tags to our current page

Source

Complete sourcecode Flex (AS 3) Project (16/12/2008).

Links

• Visualizing Data, First Edition by Ben Fry. Copyright 2008 Ben Fry, 9780596514556.
• XPath implementation for ActionScript 3.0
• German translation of this post

The course is part of the basic courses in curriculum of the “Interaktionsgestalter” programm. The course tries to teach the students in a very general way methods of spatial organisation of elements and layout, independent of dimension and media. So it was very obvious to extend in this exercise (see below) the communication medium from a normal screen to other media like light and leds.

Exercise

The Students have to visualize a 20 to 30 seconds long piece of instrumental music. The Visualisation have to be based on a parametersystem to meet objective and subjective criteria. The goal is to translate the syntax of the chosen instrumental into a readable visual equivalent.

Setup: 2×7 LED pannels, each panel with resolution of 72 pixels and 1 meter length

Julian Köhn + David Leßmann. Music: Introduction Et Rondo Capriccioso – Saint Saëns

Lena Irschl + Barbara Saga. Music: Autumn Leaves – Dirk Reichart

Please note, some students chose not to use the leds as their display. You can see their documentation videos underneath:

• Thomas Techert, Philipp Gräßer: Happy End
• Christian van Elten, Kirstin Walker: God Moving Over The Face Of The Waters
• Jürgen Graef, Ulrich Staruszkiewicz, Fabian Gronbach: Jynweythek
• Andreas Brendle, Andreas Burghart: Musikvisualisierung Failure33Object
• Eduard Warkentin, Joao Martins

Original resolution 1280 x 1024 px @ 60 fps

Abstract

We decided not to go the usual way (take an already produced piece of music and do for this an timebased animation with a video editing tool). Instead we composed a minimalistic electro track to have before all possible informations like notes, pitch, volume, length … and our own dramaturgy.

Dramaturgy

Quantity diagram: appearance of all samples

By analysing these informations, we figured out a “set of rules” which maps the musical informations directly to a visual output. For that “mapping” we developed a mini visualizing software. The software is fed via Midi with exactly the same notes (data), like the ones controlling the musical part. For instance, if Midi Note #43 – “Dri Metal” – is played, the visual rule is: Rotate all one step to the right. Everything is based on our system of rules, there is no animation in the common sense at all.

The shown clip is just a live recording during the playback of one pass of the entire track. There was no editing afterwards.

Setup diagram

Official documentation text (german) goes here:
Das Ausstellungsprojekt “Kelten digital – Archäologie und Hochtechnologie” wurde in Zusammenarbeit mit dem Württembergischen Landesmuseum Stuttgart, der Universität Hohenheim sowie der Hochschule für Technik und Wirtschaft Aalen konzipiert, gestaltet und umgesetzt. Anlass für “Kelten digital” war ein interdisziplinäres Forschungsprojekt im Bereich der zerstörungsfreien Untersuchung von archäologischen Objekten. Im Zentrum der Untersuchungen standen drei keltische Skulpturen aus der Viereckschanze von Fellbach-Schmiden. Welche Ergebnisse diese Untersuchungen erbrachten und mit welchen Methoden dies geschah, wurde in “Kelten digital – Archäologie und Hochtechnologie” dargestellt. Das Ausstellungsprojekt wurde von 17 Studenten aus verschiedenen Fachbereichen geplant und realisiert. Interaktive Installationen, Touchscreenanwendungen, Visualisierung von wissenschaftlichen Inhalten, Produktdesign sowie die Gestaltung von Raum, Licht und Kommunikationsmedien waren Teil des umfassenden Projekts. Die Ausstellung war von März – August 2005 in Stuttgart zu sehen und wurde mit einem IF Concepts Award ausgezeichnet

Documentation Clip

Photos

room situation

sliding screen en detail. user interaction via sliding the monitor.

full sliding screen setup.

one of the information terminals.