Charlotte Zhang
6 min readSep 7, 2017

1. Context

City, is a word that associated with hustle, but also as a net that tightly connects everyone. In everyday life, we are in the society where we have the responsibility to meet, share, talk and exchange with different people including colleagues, customers, families even strangers, which forced us to be energetic and passionate. However, buried in the rapid work, people are long for a peaceful and tranquil place, where they can stay alone only with themselves.

In everyone’s life-span, during the period of childhood, the person already started developing and maintaining an autonomous self, which is called individuation. According to the research, when people are in the early childhood, they already started distinguishing “self” and “non-self” (Kaplan, 1987). When they become adolescents, the second individuation peak occurs (Blos, 1967, 1979). While teenagers increasingly tended to the social supports rather than remaining dependent to the parents, they also began to desire for the personal space to separate from others. Finally, when they are adults, the privacy becomes one of the most significant things in the world. This fundamental demand of each might sound natural and simple, yet obviously, it is easier said than done, especially with the development of the internet.

Nowadays, the internet has possessed the ability to reach nearly every individual. A speech given by the US former president Barack Obama states,

Almost a third of the world’s population uses the Internet and countless more are touched by it in their daily lives. There are more than four billion digital wireless devices in the world today. Scarcely a half century ago, that number was zero. (as cited in The White House, 2011, p. 3)

The ubiquity of the internet brings enormous benefits in terms of facilitating the life and improving the working efficiency, which drastically speeds up the growth of techniques and economy. With the rapid urban development, more and more individuals move to the city, either from rural areas or from other cities. It is certainly a bridge that leads the individual to the whole world. Massive information overwhelms us like the sound in the city, which we cannot avoid even when we are completely alone but should learn to live with.

As the inhabitants in the city, all of us have countless issues to deal with. By interviewing several people at their early 20s, all the interviewees revealed different problems that they are facing. Take the two types of people as an example, for those who already are living in the same city for years, they prefer the personal space after work or study in the evening. Nevertheless, the internet intrudes their personal space with skype calls, messages, comments on social media, etc. Nobody dares to cut off the connection from the internet since the unwillingness to miss any important notifications. As to those new city residents, although the information fulfils the city life, they are experiencing the inevitable isolation from the current city life, the feelings were enlarged particularly when the night falls and they are alone. The internet can either be the medicine to the loneliness, or on the contrary, it ironically adds on the depression.

2. Ideation

Mind Map

At this phase, a Mind Map helped to discover the relations among three elements.

The Reference

Inspired by Pamela Littky (2010), I focus on drawing the personal space/activities in the room. When the main characters were alone, what will they do? Do they really stay alone? Is it lonely or peaceful?

3. Technique

To visualise and sympathise the context, with the browser art, four elements are involved: city, internet, personal space, noise, the contrast of daytime and night. As mentioned, everyone has a unique life, thus I allow them to appreciate the elements with their own interprets.

There are three basic layers representing the three elements described in the theory. The city element is presented by a video clip filmed in the daytime city, which looks busy and energetic. Nevertheless, when the night falls, the reflection of the city is covered by the shade and darkness of night with a feeling of loneliness. The internet element is a colourful tangled network whose dots are symbols of every individual connected to the world by the digital devices. The network is jittery. When it is about to ceasing in peace, an interruption from the internet triggers another chaos and manic. Finally, the illustrations are the isolated moments. They look peaceful, but they are surrounded by the noise.

Three Layers

Presenting the sound using MP3 files at the website is direct to convey the feelings online. The network accelerates when there is a new Twitter post containing the keyword “CITY”. Having clicked on one of the portraits, the viewer can see a related scenario appear. Behind the scenario, the network jitters at a slow pace. A new Twitter message triggers the change of the network’s movement and the noise. The city noise was recorded from an airport, a traffic and a café, corresponding to the reading, writing and having tea scenarios respectively. It is my personal association: I read when I am taking the public transportations including flights, trains and buses; I always hear the street noise when I am writing in the classroom or at home; drinking tea is directly linked to cafés. When images are switched, the relevant sound ceases until another new post generates.

The background video was filmed when I was travelling by car. It was edited into grey colour scheme using Adobe Premiere Pro to not only indicate the isolation happens at night but also take it as a metaphor of memories, reflections and dreams on city life during the daytime.

I implemented the networks on the second layer with front-end techs. The network is drawn on HTML5 (H5) canvas. However, the canvas does not support interactions events e.g. mouse events. In addition, the speed of the network movement was controlled by the sound input, which means the frequent queries to the database made the website very heavy and slow. Therefore, the three portraits are SVG instead of H5 elements so that they can react to the Click event, which involves D3.js.

Meanwhile, to optimise the website performance, the Twitter trigger only works when the viewer clicks on a portrait to see the complete image. The implementation of Twitter API and the audio are presented below (Figure 5). When there is no update from Twitter, the network calms down and no voice appears.


When I am alone, I read, drink tea, write my diary. Nonetheless I find it hard to concentrate when I am doing one thing. My attention is always driven by notifications of messages, news or phone calls. I am still in the crowds, even when I try to have my personal peaceful time. This browser art is for those who have similar feelings to the internet to empathise the feelings, and those who try to keep and protect their inner peace and private space in this chaos.

The future work might allow the viewers to leave their comments at the website. Again, every comment can interfere the network. Also, it would be interesting to see more images contributed by the crowds sharing more experience and feelings towards City and Internet.





1. Bloom-Feshbach, J., and Bloom-Feshbach, S. (eds.), The Psychology of Separation and Loss. Jossey-Bass, San Francisco, CA, pp. 136–164.

2. Blos, P. (1967). The second individuation process of adolescence. Psychoanal. Study Child 22: 162–168.

3. Blos, P. (1979). The AdolescentPassage. International Universities Press, New York.

4. Kaplan, E. (1987). Development of the sense of separateness and autonomy during middle childhood and adolescence.

5. Littky, P. (2010).

6. The White House. (2011). International strategy for cyberspce: Prosperity, security, and openness in a networked world [Data file]. Retrieved from international_strategy_for_cyberspace.pdf