Watch Generating Utopia

»Generating Utopia« is a realtime visualization of social location data, made with Processing. Its aim is
to show what human habitats could look like if it was possible to transform them depending on the location-based
behavior of their residents.

Although current discussions might indicate otherwise, the pictures we draw of ourselves within todays’ social media
channels are no reliable representations of who we are in real life. We select what others get to see from our reality,
and mostly, we share and publicly like only what considerably leaves a good impression on the rest of the world. We
build an utopia, telling the story of what we think our lives should look like. This conclusion is all the more
inspiring, regarding the fact that social networks begin to expand into physical space: we’re not only telling what
we are up to
, but also where we are.

»Generating Utopia« tries to make those individual utopias visible and shows, what human environments could look like if
it was possible to transform them depending on location-based information of their inhabitants. The data was taken from
various users of the social platform »Foursquare«.





The realtime application starts with an airplane view on an existing city in its current topology. By selecting a
dataset from one of its inhabitants, the city will morph into something else, growing mountains and tubes exactly at
those places, where the person checked in with their Foursquare account. From this, one can see in what different ways
persons are »using« their city – respectively what they want their social environment to think they do. A utopian (or
dystopian) version of the cityscape begins to grow from the ground. The city seen in the footage is a middle-sized
German town called Würzburg.

The application, which was made using the Processing programming environment, generates the imagery in realtime and is
completely interactive. One of its key features is that the major part of the visualizations are generated
programmatically from data available online. For example, the buildings are downloaded from the API
as outlines, translated into 3d models and rendered at their according places. This makes it possible to visualize every
possible place on earth just by changing the geocoordinates and adding datasets for that place. There was no custom
modeling involved.

The project was created during the first semester of my master studies at FH Würzburg, Faculty of Design; supervising
professors were Prof. Erich Schöls and Prof. Gerhard Schweppenhäuser.

Data sources:






Inspired by utopian urban planning projects since 1920 and science-fiction concept art from the 20th century,
»Generating Utopia« wants to make a more vibrant approach to the field of data visualization – We don’t share exact
to-the-minute updates from our lives in social media. Consequently, focus is put on drawing pictures that leave room for
interpretation as well as imagination rather than an exact mapping of given information.

While the use of atmospheric lighting, soft shading and depth-of-field aims at achieving a picturesque, drawing-like
look of the landscape, the data visualization itself is pretty decent – the colorful growing tubes are not further
defined, yet they might be a hint at how transportation might look like in a utopian future: they might be light rails
for self-driving vehicles, or Futurama-like tubes for transporting people with air pressure – the interpretation is up
to the viewer. Basically, they are the visual representation of a virtual web the user has drawn in the city with the
data he left.


Data visualization

The height of the mountains hints at how frequently a person has visited the according places. Much effort was put into
the algorithm deciding how tall a mountain will be, as the number of Check-Ins differs heavily from venue to venue and
from user to user. When a specific area has many places with few checkins, the hole district will elevate, but it gets
more disrupted than it would be with a single, “big” checkin.

In order to make the growing web more readable and the links easy to distinguish, they are drawn in three different
colors, each representing an attribute as to how the place is most commonly used. For getting the three groups, the
existing 9 categories from Foursquare were thematically reduced to their basic functions: work (red), reacreation (blue)
and transport (yellow). From this, people can get a quick overview on the users behavior without having to read much

Some people want to show their job is important to them, so their work place grows a huge pile, filling its surroundings
with red tubes. Others want to show they are always on the go, so their landscape will fill with dozens of small hills
and links in all colours. Some residents are mostly focused on the center of their city, building huge but compact
structures; other spread out and integrate the city’s borders into the web.

For diving deeper into the user data and being able to comprehend the categorizations, it is possible to switch on
labels for all the visited places. They show the name of the place, how many times the user checked in, and their





Making of

»Generating utopia« was made using the Processing
programming environment. The initial function of the application was to serve as framework generating terrain from real
map data, being able to deform it based on various kinds of location data, and export it as 3d-model for rendering it
with 3d software. Later during the project I decided to make it a realtime application and do the rendering and image
output right from the Processing sketch as well.
A challenging task was to keep the transforming terrain updated in realtime while providing as much detail and rendering
quality as possible. A heightmap keeps track of all the changes and transformations done to the terrain, while the
terrain is a dynamic GL model which is only updated at “changed” positions to keep the performance stable.

As for the lighting, using prerendered lightmaps for realtime-transforming terrain didn’t make sense – to achieve the
“sunsetty” mood a shader was created which changes the lighting depending on the viewing position, so there is always a
smooth balance between light and dark on objects.
The project makes intense use of the advanced OpenGL features implemented into Processing by Andres Colubri. Karsten
Schmidt’s library »toxiclibs« is used for some model calculations.
For the depth-of-field effect, a slightly adapted version of Martin Upitis’ GLSL dof shader was used.

Here’s some screenshots from the creating process:

Sorting and locating the data




Conceptional renderings







Making the realtime app