EAT ME! – Creation & Computation

• project title

EAT ME!

• names of group of members

Neo Chen & Rajat Kumar

• project description

This game that we created was first inspired by the classic game ——SNAKE, which we believed that most people have played before. We want to bring this game into a more physical interactive form. It is a game that requires all the players to use their phones, and the number of players is preferably to be even since the game plays in pairs in each round. (When there’s a player singled out, he/she will be given an extra number to balance out the game.)

Instruction:

Shake the device to generate your random number and don’t let anyone else see it 🙂

You will be competing in pairs, show your number to your opponent

The person with bigger number wins

The person who loses will have to follow the winner for the rest of the game(forming the snake)

But that doesn’t mean your game is over

Ever since you joined the winner, your number goes to the winner

So when they go to the next round, they are comparing numbers including the loser’s number

Same for the rest of the rounds, the person who singled out will get extra points towards the total to balance out the game

The last person standing wins the game!

Extra: The final winner will have a long line of “losers” following behind, forming the shape of the SNAKE, the winner will be asked to take a selfie with everyone else standing behind.

• visuals (photographs & screenshots)

5fd94222-be73-42d2-8cc9-cbed9fb7d4bd

we found some existed code online for creating face tracking and filter in P5js that we wanted to collaborate with, but unfortunately it could only work on the website and when we try on the phone, the image we got was lagging and the filter would not show up, this is not what we were looking for, so we decided to give up on this as part of our game.

•edited video of the 20 screen experience (1 minute or less)

•code https://github.com/Rajat1380/CODE_OCAD/tree/master/EXPERIMENT_1

• Project Context

Our first intention was to make a mini ice breaker game since all of us just joined the program and barely know each other, so we did some research on the social games and was looking for a good one to transform into our game, but we could not agree on one that represents our idea the most. One day this thought just popped up in my mind, why don’t we have everyone to play the snake game that the most of us have been played before, but this time, we are giving it a twist so that players are given more chances to be interactively involved.

After finalizing the concept of our game we brokedown development into the minimum viable product of coding to function the game. We first prioritized the random number generation and started building. Preload function came to rescue us and initially, it was working fine with 4-5 images to generate randomly but failed with 21 images. We spend most of the time figuring it out and then Jun Lee came to us and pointed the error out. The main problem was with the for loop, It ran fast before loading all the images and we see nothing on the screen. We have to preload all the images manually. Images showing on the desktop but not on the mobile. The problem was that we were previewing in the present mode and it got solved by previewing in fullscreen mode. We had to fight with adobe XD for 3 hours to get the png format for the images.

untitled-2

%e6%9c%aa%e5%91%bd%e5%90%8d%e4%bd%9c%e5%93%81-3

We originally wanted the game to be a combination of the snake game and the bluffing game by granting the players to bluff about the number they randomly draw, which would also be more challenging, like a psychological game. But it’s going to lengthen the game time for each round and we were having trouble with how to get people in pairs (which we decide later to use the hand written card for help). Not getting to use the network between phones was no doubt a huge issue we faced because we wanted to lower the chance of people drawing the same number, to solve this, we came up with the solution of having the ones who compete for each other and have the same number to redraw. (Although the chance for people to get the same number and also getting paired are pretty low.)

We implemented the random number generation with device shake ability. We have MVP of our game and we tested game with the numbers. We did playtest with more number of players and found one flaw in our game. We did the math of pairing and after the 3rd and 4th round of game one player got left out. We need to balance the gameplay in order to maintain the fun aspect of the game.

After some maths, we decided to give 15 points in 3rd and 25 in 4th round to the player who got left out.

img_0148-2

Then we decided to develop some more functionality. We implemented the button, as we were thinking about the bluffing aspect of the game. Surprisingly button was showing on the desktop but not on the mobile phone. We searched on StackOverflow and got one clue that there is some openGL that we have to write in HTML. We tried but failed. All we wanted with buttons to hide the number and show them when required. It did not work out, so we shifted our focus to change the background of the number in order to make it less readable. At the end of the game, we thought of creating a selfie function along with a face tracking filter, we found some existed code online for creating face tracking and filter in P5.js that we wanted to collaborate with, but unfortunately it could only work on the website and when we try on the phone, the image we got was lagging and the filter would not show up, this is not what we were looking for, so we decided to give up on this as part of our game.

The major issue we had during the whole process, was to bring what we wrote on the P5js web editor into mobile devices, we found out that a lot of functions that we wanted to put into our game could only work on the computer which limited the final result that we wanted to present.

• Presentation