LiquiData

LiquiData

A tangible tabletop on which your movement through the city becomes a liquid surface to touch, explore, and annotate.

Year
2011
Type
Physical computing
Role
Concept · Design · Code
With
Gunnar Friedrich · Pierre La Baume · David Ikuye · Luis Grass
Tech
Processing · GLGraphics · toxiclibs · TUIO · Unfolding Maps · TileMill · OpenStreetMap · Microsoft Surface

LiquiData is a tangible tabletop visualization of your personal movement profile: your traces through a city rendered as a liquid surface you can touch, explore, and annotate. Adding photos and comments from your smartphone turns it into a social system — a way to share engaging places with others, discover new spots in unfamiliar surroundings, and compare your mental map of a city with where you actually went.

Lay your phone on the table and its location history flows out across a darkened city map. Where you have been, the liquid settles and clears the view; everywhere else stays under a veil. A curved line, the Snapper, ties the phone to a nearby place: slide or rotate the phone to pick another, or narrow the choice with the radial menu around it.

Two index fingers trace the bright blue liquid on the dark tabletop map, its streets dotted with small yellow place markers
A phone rests in its glowing ring on the table, a yellow Snapper line running from it to a street of yellow place markers on the blue liquid

Each place is a three-part element of ratings, comments, and photos, and each part grows with what people leave there. A geotagged photo can be swiped from the phone onto the spot where it was taken.

A photo left at a place opens inside a circular frame on the map while a finger drags the yellow arc of the radial selector; yellow place markers line the blue streets around it

The prototype runs on object-trackable tabletops like the Microsoft Surface, written entirely in Processing: the liquid’s aesthetic and behavior come from GLGraphics and toxiclibs, multitouch gestures from TUIO, and the map stack from OSM data, TileMill tiles, and the Unfolding library. The code is on GitHub (MIT), and Gunnar’s Snapper has a repository of its own.

The project started in Till Nagel’s course “Graspable Maps” at FH Potsdam in the summer semester of 2011 (the same course as Lichtreise), together with Gunnar Friedrich, Pierre La Baume, David Ikuye, and Luis Grass. While we were looking for a topic, Pete Warden and Alasdair Allan revealed that the iPhone logs its owner’s locations in a file, consolidated.db, and keeps them indefinitely. Instead of sketching another worst case, we asked what that record could do for the person it describes.

An early Processing applet plotting a log of location points as red dots, clustered over central Berlin and trailing south, on a gray map of Berlin and Potsdam

We pictured the table wherever travelers cross paths — a hotel lobby, say, where guests back from a walk pour out their day, see which places other guests have marked, and leave photos and comments of their own. Visitors without a smartphone can still browse the places others have uncovered.

Pencil storyboard in 16 panels with German captions: a phone logs a man’s walk through the city, into a bar and, the next day, a park he photographs; at the table his phone pours out his traces and he adds the photo and a comment on the bar; later two strangers to the city find the comment and decide to go

The course ended with a first presentation at FH Potsdam, but I saw more potential in the idea and talked Gunnar into continuing; the two of us then carried it to a working prototype. Getting the fluid feeling onto the Surface was its own story — GLSL shaders that ran beautifully on my machine hit an unfixed driver issue on the table’s ATI Radeon, so we ended up building a geo-location-driven particle engine wrapped in an isocontour instead, similar to the SearchGeometry library. Parts of the process are on Flickr, and the course’s German process documentation is on Incom.

Christopher Pietsch stands at the Microsoft Surface table against a saturated blue wall, touching the tabletop with both index fingers; a smartphone lies on the surface beside a thin blue trace of liquid

The following winter, Gunnar and I designed Cycle Mail with Florian Schulz, and I later worked with Till again on Border Bumping and cf. city flows.

The whole tabletop seen from above: a band of blue liquid crosses the dark street map, a photo opens inside a circle with a yellow arc, and a phone in its glowing ring is tied to it by a thin yellow line while a hand reaches across the surface
One hand sets a phone into a glowing ring on the dark map while the other grips the table’s rim; a thin yellow Snapper line curves from the phone to a cluster of yellow place markers on the blue liquid
A fingertip touches a place opened into a large yellow blob with three small white icons on a blue street, smaller yellow place markers scattered along the streets around it
Two German comment cards, signed and dated 04.06.2011, open over the blue streets of a place inside a circle with a yellow arc; a finger touches one of them
Design render: a phone showing a photo grid sits in a ring on a dark map of central Berlin, and white curved lines fan out from it to orange heart-shaped place markers on a pale blue liquid, one line picked out in orange
Interface design render
A large sheet of grid paper with pencil-drawn streets and loops and a paper phone cut-out hatched in red and blue, with several felt-tip markers lying at the top edge
Paper prototype
A Processing test window titled particleTest1mbtiles: a dark teal street map of central Berlin shows through a winding liquid-shaped band while everything around it stays dimmed, and a black debug box with pixelated text sits near the top
Processing test of the liquid reveal
Two hands on a bright, nearly empty tabletop: one holds a phone inside a faint circle, the other points beside it, and a thin orange curved line arcs away from the phone
Snapper test
A phone showing a grid of photos for »Görlitzer Park1« lies in a purple-tinted ring on a light gray street map, an orange line running from it to long clusters of yellow place markers
Light-map interface variant
A wall-mounted screen plays the LiquiData video, a phone in its ring tied to a place on the blue map, beside wall text in Chinese and English headed »流体数据« and »Liquidata« that credits Till Nagel, Christopher Pietsch, Gunnar Friedrich, Pierre La Baume, Luis Grass and David Ikuye

Images: Photo: David Ikuye
Credits
Christopher Pietsch — concept · design · code · with Gunnar Friedrich · Pierre La Baume · David Ikuye · Luis Grass
Link
Watch the video →