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.

 

IMG_2431

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.

Playtesting

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.

IMG_2433

Collective Play – Pictionary

This is an assignment for Collective Play, in which neither player should be the leader or the follower – both should lead as closely as possible.

IMG_1485

 

In this game by myself and Hadar Ben-Tzur, two players draw a word together before the buzzer goes off. They need each other to be successful, because 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.

Play yourself!

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

Check out the code here: glitch.com/edit/#!/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.

Diagrams
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.

IMG_1143

 

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.

IMG_1144

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.

Code Documentation

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

Play yourself:
http://dance-party.glitch.me/input/
http://dance-party.glitch.me/output/

See the code:
glitch.com/edit/#!/dance-party