/ You Are Not Alone!

Experiments with Code 4:
Influence over a distance, Networking

CLASSROOM PROJECT

OCAD University

Mentors: Kate Hartman & Nick Puckett

TEAM

Manisha Laroia

Sananda Dutta

Rajat Kumar

Arshia Sobhan

DURATION

2 weeks | 2019

EXPERIMENTS WITH CODE

p5.js & Networking using PubNub, a hosted data stream realt-time network.

/ ABOUT

You Are Not Alone! is a networking experiment designed to create an experience of digital presence and interaction in a shared online space with illustrated on-screen windows based on the metaphor of ‘a window into the other world’.

/ DESCRIPTION

You Are Not Alone! is a networking experiment designed to create an experience of digital presence and interaction in a shared online space. The community in the shared space can light up windows with multiple clicks and have their ghost avatar travel through the windows that others light up. With prolonged inactivity in a pixel area the lit windows slowly started getting darker and turn off.

The visual metaphor was taken from a neighbourhood building, and how people know of each others presence when they see lit windows and of the absence when they see unlit windows. In that space, people don’t communicate directly but know of each others presence. The individual avatar moving through this space was to create an interaction within the present community. The windows were metaphors for windows into other people’s world as they entered into the same space.

/ INSPIRATION

Starting with the brief for the experiment i.e. Online Networking across different physical locations, the two key aspects of networking that struck us were:

the knowledge of each others presence i.e. someone else is alsopresent here;
the knowledge of common shared information i.e. someone else is also seeing what I am seeing;
and how crucial these are to creating the networking experience.

We were inspired by project like Paper Planes, Dear Data, Architectural light graffiti-Finland, and repetitive fidgets that people have like click-baits, turning switches on-off, like those used in Minesweeper.

/ THE PROCESS

We started the project with a brainstorm building on the early idea of networked collaborative creation. We imagined an experience where each person in the network would draw a doodle and through networking they would add to a collaborative running animation. With an early prototyped we realized the idea had technical challenges and moved to another idea of based on shared frames and online presence to co-create a visual. A great amount of delight in the Paper Planes networked experience, comes from the pleasant animation, and knowing other people

are present there and are carrying out activities. We wanted to replicate the same experience in our experiment. We brainstormed several ideas like drawing windows for each user and having text added in it, windows appearing as people join in, sharing common information like number of trees around you or number of windows around you and representing this data visually to create a shared visual. We all liked the idea of windows lighting up with presence and built around the idea, light on meaning present and light off meaning absence or inactivity.

We created the networked digital space in two stages:

One with the windows lighting up on clicking and disappearing on not clicking, and the personal ghost/avatar travelling through the windows.
The other with the shared cursor where each user in the networked space could see each others avatar and move through the shared lit windows.

We built the code in stages, with first creating the basic light on, light off colour changing on click functionality, followed by array of windows, the networking transfer of user mouse clicks and positions, and finally the avatars for the user. Our biggest challenge was to be able to network and make the avatar appear on click after the window is lit and be able to have everyone on the network space.

The shared space loads with a black screen. The visual has windows that light up as one clicks on the screen, each window gets brighter with each click and reaching its maximum brightness on three clicks. Each user in the space can see other windows

light up and know the presence of other users. Each person also sees the windows in the same grid alignment as the rest of the community. Once a window is lit the users can see their avatar in it and can then navigate their avatar across the screen through lit windows along with their cursor movement.

In version 1, of the experience the users cannot see each others avatars moving but can see windows light up as others interact with the screen. The avatar was chosen to be a silhouette so that it could visually appear into the lit windows as compared to the black backdrop and the eyes popping in would create an element of surprise.

In version 2, the windows appears as a user enters the digital space and each user has an avatar that can travel through the other’s windows. When the avatars in the user’s own window it is black and the ghost color is lighter when it is in another user’s window. Unfortunately, we were unable to show both the interactions in the same code program with the network messages for cursor click and cursor position at the same time.

The presence was indicated with a window, a signifier of the window into the other person’s world, like a global building or neighbourhood. The delight comes from the knowing people are there in the same space as you, at the same time and there is something in common.

Choice of Aesthetics
The page loads to a black screen. We tapped into the user’s behaviour to click randomly on a blank screen to find out what comes up on the screen and so we make the windows light up on each click, getting brighter with each click. Turning on and off the light of a window to show presence and also taps into the clickable fidgeter aspect so that visitor in the digital space hang in there and interact with each other.

Another feature was to allow each user to see the other user’s cursor as it navigates on the screen through the lit windows. We kept the visuals to a minimum with simple rectangles, and black color for dark windows and yellow for bright windows. While coding we had to define the click area that would register the clicks on the network to light up the windows.

The pixel area defined varied from screen to screen and would sometimes register clicks for 1 rectangle, for 2 or 3. We wanted to light one window at a time, but we let the erratic click behaviour be as it is, as it added a visual randomness to the windows lighting up.

/ CHALLENGES & LEARNINGS
Networking and sending messages for more than one parameter like shared cursor, mouse position and mouse positions was challenging and we could not have the click and the mouse hover function be sent at the same time. Thus, we could get the code click to light up work but were unable to share the cursor information and the users could not see each others avatars on the network or vice versa.

Another challenge was in being able to have the avatar appear in the window on the click after the window is lit up. We were able to get

the avatar appear in each window in the array and have a common avatar appear on click in one window. The challenge was in managing the clicks and the image position at the same time. We eventually chose to make a shared cursor networking code but that interferred with the click functionality to dim and light the windows with increasing opacity.

Our inexperience with code and networking was also a challenge, but we made visual decisions to make the user experience better,

like chosing a black coloured icon that looked

like a silhouette on the black background so we did not have to create it on click but it would be visible when a window was lit.

If we had time we would surely work on integrating the two codes to create one networked space where the windows followed the grid, all the users saw the same visual output, the windows lit up in increasing opacity and all the users can see all the avatars floating around through the windows.

Github Link for the Project code

/REFERENCES

Shiffman, Daniel. The Nature of Code. California, 2012. Digital.
[2] Shiffman, Daniel. The Coding Train. 7.8: Objects and Images – p5.js Tutorial. 2015. Digital.
[3] Active Theory. Google I/O 2016: Paper Planes. 2016. Digital.
https://medium.com/active-theory/paper-planes-6b0008c56c17