random (ANIMALS, MONSTERS & HUMANS)

PROJECT TITLE, SUBTITLE
random (ANIMALS, MONSTERS & HUMANS)
A fun grouping game that entails random (shuffling, counting, clustering).

TEAM MEMBERS
Priya Bandodkar & Jun Li

PORFOLIO IMAGES

PROJECT DESCRIPTION

Random (ANIMALS, MONSTERS & HUMANS) is a smartphone-based interactive physical game experience. The game facilitates both person-to-person and person-to-phone interactions. It can be played with 20 players and up, in an open space.

It is a character-based game containing a variety of single and mixed sets of personas, which are either animals, monsters or humans. On hitting start, the code shuffles, randomises and assigns a persona or a mixed set to each player. This is completely random, based on when the participant chooses to stop the shuffle, thus leading to a dynamic range of character-sets on the floor. The host then announces a pairing condition between these animals, monsters and humans (for instance, 1 human, 2 animals, 2 monsters need to form a team). The players now have to group up with other participants in a way that their cluster meets the announced pairing condition. They then advance to the next round. This continues until we have a winner(s).

It was interesting to see how the game playfully turned out to be an integrity test, as some players sneaked in multiple shuffles to find a matching character, and thus survive longer in the game.

PLAY THE GAME

PROJECT CONTEXT

Ideation

We explored and brainstormed to generate concepts that could weave in, what we thought was the essence of this experiment—creating one connecting experience with 20 screens without networking. We also wanted to build an engagement that allowed users to have fun. Some of the ideas that came to our minds were—creating a shopping aisle or gallery of unusual products, and using smartphones as interactive displays. Another one was building a world map installation, while using phones as different regions/cities around the world, and interactively depicting their landscapes, interesting facts. Although these concepts had quite a bit of creative scope and aligned to the initial brief, we realised they lacked the element of fun. We did a second round of ideas, drawing inspiration from ice-breaker games like Musical Chairs.[1] And that’s when we came across the ‘Group in the numbers of…’ game by Michael Hartley.[2] It involves each player to pair up with other participants and total up to match the number announced by the host. It was a simple concept, but had a potential to serve as a footing that we could build on.

Concept Development

Taking this concept further, we thought what if each player was allowed to have a dynamic, random number for each round. Visualising it in the digital context, smartphone was the ideal choice for introducing this twist. 

Prototyping

Looking up for code resources, we realised that the math references could help generate a dynamic number with each click. Here is a process video of testing this out:

Furthermore, to lend an organic feel to the game, we brought character into play instead of numbers. We also sub-categorised the characters into families of animals, humans and monsters (earlier, aliens) with a view to introduce an additional layer of challenge. We further considered adding mixed set of characters to shake up the combination possibilities between participants as drawn below:Here is a process video of testing the functionality with images:

Game Flow Visualisation

We mapped the flow of the game early on for two reasons—gauge the scope and plan for milestones, and foresee possible challenges. It was succinctly visualised as below:

1. The game starts with 20 individual participants in an open area with 1 phone each.
2. The game is established using an animation with the game title and button to proceed and play.
3. The rules of playing the game are explained to participants verbally and/or  including a rule page within the game.
4. The participants trigger the shuffle on their respective phones either by using a phone shake or by tapping the screen.
5. Pictures or animated GIF loops of character start shuffling in a random order.
6. Players tap the screen to stop and stop at one character.
7. The facilitator picks a pairing condition between different characters based on numbers (from a bowl of paper chits, may need to be improvised depending on players left) and announces it. 
8. This requires players to pair up in a different number of groups to meet the announced criteria. Players have 30 seconds to for this.
9. Players pair up quickly form teams. 
10. The ones left out, are eliminated.
11. We continue with more rounds (3-4 rounds) until we have a winner(s).

Code

We built on the random() functionality tested during prototyping. While developing the code with GIFs, we ran into a roadblock with using random GIF loops in place of the images. The GIFs somehow did not work on both browsers (Safari & Chrome). Looking up for references online about animated GIFs [2] , we encountered a way to play a single GIF, but the same logic did not cater to loading 18+ GIFs. We also realised using a repository of GIFs would take a toll on the loading time of the game due to relatively higher file size. To overcome this predicament, we decided to introduce color in our images. To compliment the idea further, we added a code to that resulted in a different background color, from the selected color palette each time. It thus increased image possibilities by multifolds, and making it less repetitive.

Visual Aesthetics

We were initially exploring graphic styles that would lend well to creating GIF loops. The purpose of including animated characters was essentially because they would add so much more life to the screen. We had narrowed down to the pixel art and the doodle style.

We went ahead with the doodle style (right), because it had more scope to bring out different character personalities using facial expressions. Below is are the character designs and GIF loop:

We were unable to proceed with GIFs midway through the development phase, we decided to alternatively uplift the visual aesthetics by adding colors using a 4-color palette.

The idea of randomising the background color in code led to an even more diverse image repository for the game.

GAME TESTING AND CRITIQUE

We launched the ‘random (ANIMALS, MONSTERS & HUMANS)’ game at the Creation and Computation Experiment 1 Critique on 27 September, 2019. The video features highlights from the round of this game played by our classmates:

Observations during gameplay

• Players that got eliminated in the early rounds were keen on being a part of the game in some other way.
• It was a playful integrity test as some players sneaked in multiple shuffles to find a matching image to stay longer in the game.
• Participants adapted to the game fairly quickly, and were able to pair up in the initial 10 seconds or so.
• There was a glitch in viewing the gameplay on the Android interface leading to cropped images.
• Everyone seemed to have enjoyed. There was a request for more rounds in order to decide a single winner.

LEARNINGS

• Building an interactivity in p5.js using random images with an optimal loading time.
• Working with constraints of screen size for different platforms by adding the background color in the code.
• For Priya: Embracing the steep learning curve that came with coding for the first time, and developing physical computing skills in a span of 20 days.
• For Lee: Applying p5.js to create a working prototype of the idea and learning designing skills from Priya.

CONCLUSION

• Including GIF loops would have made the game experience even more interesting and dynamic.
• We would be able to restrict players from tapping multiple shuffles (read, cheating) in one round by adding the ongoing round number functionality on the screen.
• Rotation and device-shaken functionalities would not be suitable for this game as players need to run and quickly to make groups.
• The game itself was successful, as the players enjoyed and wanted to play more rounds. We thus achieved the objective we had in mind.

TAKEAWAYS FOR FUTURE ITERATIONS

• Including the ongoing ‘number of round’ functionality.
• Finding a way to involve players that get eliminated in the initial rounds.
• Working on including GIFs.
• Adding sound effects to make the game more interesting and playful.
• Making it more versatile to work on different operating systems and browsers.

CODE

https://editor.p5js.org/leelijun961118/present/PBjABRx9C6  (developed for smartphone platform)

GITHUB

https://github.com/LLLeeee/Creation-Computation-Project1/tree/master

REFERENCES

[1] “How to Play Musical Chairs.” wikiHow, 29 Mar., 2019. https://www.wikihow.com/Play-Musical-Chairs.

[2] Hartley, Michael. “Game of Getting Into Groups of Given Numbers | Dr Mike’s Math Games for Kids.” Dr-mikes-math-games-for-kids.com, 2019. http://www.dr-mikes-math-games-for-kids.com/groups-of-given-numbers.html.

OTHER ONLINE RESOURCES

Random functionality: https://p5js.org/reference/#group-Math

Phone functionality: Touches: https://p5js.org/reference/#/p5/touches

Using GIFs in p5.js:

Discussion: https://github.com/processing/p5.js/issues/3380

Library: https://github.com/wenheLI/p5.gif/

Example: https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z

p5.js to GIF:https://www.youtube.com/watch?v=doGFUaw_2yI

Array: https://www.youtube.com/watch?v=VIQoUghHSxU&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=27

Loading Animation: https://www.youtube.com/watch?v=UWgDKtvnjIU