Collective Play: Final Project Playtesting

How might we create something intentional out of the unintentional? For this play test, Hadar and I asked people to leave behind something in their pocket and to leave behind a thought they want to get rid of.



Thought Process

We discussed emotions and dynamics we wanted to create in people. We liked the idea of turning a random action into a purposeful action.


We set up a table underneath one of the TVs in the lounge area with paper and pens. The monitor above gave play instructions. Folks started to leave behind objects and thoughts.


Collective Play – Pictionary

This is an assignment for Collective Play, in which neither player should be fixed as the leader or the follower – both should lead and follow as closely as possible. This game was created by myself and Hadar Ben-Tzur.

Two players must draw a word together before the buzzer goes off. The trick is that only one player can only press the up and down arrow keys, whereas the other player can only press the left and right arrow keys. See links below.

To succeed, they must take turns leading and following. The link to the video below shows people having a good time playing it.


In this game by myself and ,

Play yourself!

  1. One player can only press UP and DOWN arrow keys, and visits!/collectivepictionary/udinput
  2. Second player can only press LEFT and RIGHT arrow keys, and visits!/collectivepictionary/rlinput
  3. Everyone watches by going to!/collectivepictionary/output

Check out the code here:!/collectivepictionary

Collective Play – Dance Off


Rules of Play

In this online project, people can choose to dance on screen by themselves or with partners. Together Stevie, Simon, Nick and I put it together.

As people visit the /input page, the /output page will show the names of people joining the space. Each person can choose to stay in one spot on the screen, move or “dance” around the screen, dance near someone else’s name, and/or dance for a while near someone else’s name.

Depending on what they choose to do, their names change font type, color, or size.

And to move or “dance”, people use their phone’s X and Y orientation data.

Group Goals

As a group we got together to agree on the rules of play, and then created a visual schematic of the relationships between the /input’s sketch.js file, /output’s sketch.js file, and the server.js file. These relationships show how data from people’s phones are being captured, sent to a server, and then “styled” or expressed through javascript code by the /output sketch.js file.

Here is our larger diagram showing how the user interacts with the experience. First they use their own device to enter their name. Then they look up to a projected /output page from a second device, showing their names move around the screen based on the changes in x and y axis of their phones.



This diagram below demonstrates in more detail how code instructs the server and local computers to pass data via sockets so that the users can see results.


Individually, we took on specific roles similar to a team at a tech company. Mimi suggested this arrangement to be sure we were coordinating our code so that it would fit together even if we worked apart Our roles this time were as follows:

Nick – Technical Manager
Stephanie – Front End Developer
Simon – Front End and Back End Developer
Elizabeth – Project Manager

Game Documentation

Here we are playing what we created.

[vimeo video]

Code Documentation

Check out our game online at Glitch. See below for our code with comments.

Play yourself:

See the code:!/dance-party