Tile Walk (031)

Tile Walk shuffles the aerial image of a user’s location as they walk, confusing where one is and where one wants to go. The familiar context of trees, streets, and buildings become unrecognizable as they’re bisected and placed in new relationships within the aerial.

The map builds on the earlier Tile Swap (005), but situates the user geographically and at a smaller scale. Interaction is determined by the positioning of the body, distinct from the movement of a computer mouse. As the map only updates with a user’s changing position, it seems to follow you while moving. But with each update, one has to relearn the contents of the map and the relationship to their own position.

At a smaller scale than Tile Swap (005), the shuffling is more disorienting: everything within one’s street-level field of view is shuffled. What one sees and experiences isn’t contained within a single tile but actually split across many.

The exercise explores how representative is an aerial image of its street-level counterpart? Does it matter that the aerial image is shuffled? Are features shown within the aerial identifiable at street level? Without the ability to pan through the map, do users walk further in order to see different aerials?

Technicals

Rendering the shuffled map is achieved in the same way as Tile Swap (005); the original aerial canvas is hidden, but used as a data source to draw re-tiled images to a new canvas element.

The site accesses a device’s geolocation with the navigation.geolocation methods and continually tracks movement using the watchLocation() function. When the position changes, the map pans.

Next Steps
  • Permanently assign what tiles are swapped rather than randomizing the pairs. Because there are only 9 tiles, often one or two remain in their original location when doing a random shuffle.
  • Explore how to smooth the movement from place to place. The updating location is received sporadically which causes the map to appear jumpy.
 Couple With
  • This Is What I See – But Not Really (028)
  • Tile Swap (005)