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.

[vimeo video]

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