Pan Pan Pan (works best in Chrome) describes two data handling methods used to pan an image digitally. Six frames pan together synchronously to illustrate how a RGB value and its data structure form an image, either as a single two-dimensional array or as a series of two-dimensional arrays called tiles.
The six frames study different aspects of panning. The first is an image of the full extent with a rectangle locating the cropped frame. The second is the cropped frame at the same scale as the full extent. A pair of images show the cropped area, but one is tiled and the other is not. Lastly, a pair of gridded numbers echo the previous pair to describe the index values of the single array and within each tile.
Panning is a process of showing a sub-extent within a larger image. Yet, a tile is simply another level of order in the same data — an array within an array.
Why Pan
Panning changes adjacency — part of an image is brought into view, while a previously visible part is removed. The visible features form new relationships: a house may have a pool in one instance while it is out-of-frame in another, parks can be boundless or circumscribed, and streets to nowhere end somewhere.
Technicals
The exercise implements a custom tiling system—rather than using Mapbox or Leaflet—which allows for greater flexibility for image processing. The pixels from each frame and within any extent can be captured and evaluated independently but also relatively.
Next Steps
- Introduce 16 tiles. With more tiles, ensure that only those on screen are loaded
- Remove tile number from image
- Make zoom scale the same as Zoom Zoom Zoom (fixed at 1/2 of height and width)
- Solve cross-browser bugs