Product Designer

Disintegration Anxiety

Design Journal | code | thought process | Class Homework | Project Documentations & more. WIP workspace. Current Portfolio at:

Collective Play: Introduction to Collective Experiences

This week was all about getting started in understanding and exploring what kind of groups exist. In addition what are the activities these groups do, what common goals brings them together.

In addition we discussed different dynamics of groups; how they behave, what do they do, what roles different individuals play, to what degree they are attached to the group and the intricate differences between a group and a individuals behaviour/goal.

As part of the technical side of things the exploration was on using shell commands. Navigating through the system contents & creating files. In addition the focus was on configuring a personal server using a node module called express. In addition to the server configuration the other learning was using another module called This module let us create websockets in order to communicate and send data over multiple clients(in the scope of this week different browser tabs).

For this weeks assignment I focused on sending my data across clients in 2 JavaScript events:


I wanted to play with 2 different types of devices as it let me open a portal to a different device to send data. The use-case I imaged was weather my iPad is currently in a free fall. The ellipse drawn at the center of the circle is in conjunction with the Z-Acceleration. I used the deviceMoved() event in the p5js library to send data across sockets.

the only issue with making this a practical usecase at this point is the iPad needs to be active(unlocked) to send data across sockets.

and for the second input type I chose finger touch dragging.


For this one I wanted to create a collective drawing/annotating experience. For this I used the touchMoved() event to communicate data across devices.

I also wanted different users to have a unique identity. So I generated random colours for when someone opens as tab and sent the colors across sockets to communicate each clients unique signature.

function touchMoved() {
  // Send information out from the client side to server side to communicate with other client instances.
  // In this case the data being communicated is color and touch     position
  socket.emit('data',  {x: mouseX, y: mouseY, r, g, b, alpha});

Project Code:

You can see the project code here on github.