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.



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!/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.

Code Documentation

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

Play yourself:

See the code:!/dance-party