Depth Perception Browser Add-on

Depth Perception Browser Add-on

I’ve been wondering for a while what the world inside a computer would look like. Would the directory structure form some kind of landscape, with hills and mountains? While I didn’t end up investigating the folder hierarchy on my computer, this question made me look differently at the world of web pages.

Web pages share a similarity to the folder structure inside your computer, which is their hierarchical nature. In addition to that, elements of a web page have dimensions and are part of a visual layout. So will I really discover a landscape this time?

To investigate the structure beneath the surface of a web page, I’ve developed a browser add-on which colors each element based on its  depth in the hierarchy. As you can see in the images below, I’ve applied several color schemes to get a sense of depth. In the night vision color scheme, elements with brighter colors are closer to the viewer (higher) than elements with darker colors. The same holds true for the heat-map color scheme I applied to YouTube.

Still in search of a landscape, I fantasized I might discover islands in an ocean if I were to opt for a geology inspired elevation map color scheme. When I applied this color scheme to my Facebook timeline, it didn’t look very organic or landscape-ish to me. But eventually, when continuing this investigation into three dimensions, I did discover urban landscapes, or structures resembling alien space stations. Take this 3D print of a web page as an example of what Web Spaces look like.

Depth Perception – Google
Night Vision – Depth Perception – Google
Depth Perception – YouTube
Heat map – Depth Perception – YouTube
Depth Perception – Facebook