Things we accomplished:
Since Shannel is gone this week for the wedding. I worked on coding on both p5 and Arduino and troubleshooted some sensor problems. She did help create designs for recipes and ingredients when she is away.
The playtesting from last week was quite helpful. Here is things we decided to change:
- Changed game name from “Fusion or Not” to “Authentic or Not”
- Made the instruction less wordy and clearer
- Added prompts to push the button
- Changed “Rotate” into “Turn”
- Showed split screen of indian or chinese recipes that allow people to choose from
- Added sound effects and music to create a more immersive cooking game experience
- Colorized the right and wrong user input in green and red
- Show end result – to be finished
- Decided to not use projection at all.
Here is Shannel’s playtesting when she gets back.
I was scared to make encoder to do two things: one is to select two cuisines, another one is to select the layer under the chosen cuisine. However, I overcame the fear and duplicated my file. It is not impossible. But I did spend a lot of time in figuring out the logic to make the encoder work and wrote down pseudo code to lead my way.
There is one problem I am currently struggle is to reset when the layerName “GameOn” is called. I asked Chelsea about it but still I couldn’t figure that out. The whole point of the code is to hopefully reset since that was the problem I was encountering. However, I solved it in the p5 sketch below.
The original instruction feels too wordy and from playtesting, more people were spending time reading the instructions. Therefore, I minialized the instruction layer into only the first prompt, to “push the button”.
I intentionally created the blinking effect of the “push the button” to make the prompt clearer. With just one instruction, users are more welcomed to play and they don’t have to spend tons of time reading instructions and forgetting them while playing the game.
So I adapted that effect to the second instruction of the GameOn layer. With the feedback from peers that they have no idea of what they are cooking, I added image, cuisine name, as well as another prompt “push to confirm” in yellow to guide them to play.
With the confirmation of the dish they want to create, players are prompted to rotate the encoder to select different ingredients they think go into the traditional cuisine. They only have 60 seconds to do so.
I set a timer function to countdown the number when players start to mimic the actions of cooking. It is quite convenient to use frameCount to determine. Here is the screenshot of the code.
music & sound effects
In order to make the game more engaging. I added several sound effects to make it more like a cooking game. I searched on freesound.org and YouTube and managed to have sound effects such as turning on a gas stove, stirring the pot, sizzling, chopping vegetables, and grinding the salt, and etc.
The problem I was running into was when I had the background music playing, I couldn’t have it continuously playing without it adding another sound track on top it. I went to office hour of Alden and turns out I only have to add the sound.isPlaying() to check if the sound is playing. If it is not playing, then I have to play the sound. It works!
This is quite easy to work on since it just displays the score depending on the type of cuisine they chose in the GameOn mode.
GAMEOVER LAYER- PERCENTAGE AND DETAILS
I refined the percentage of correct results based off Shannel’s code. Originally, when you only choose one correct ingredient and compare it to the right ingredient array, you will get a score of 100%.
Also, when you choose items repeatedly, the score will increase. However, in order to avoid any miscalculation. I used the “[…new Set(arrayName)]” to delete any duplicates. Also, in order to display the right and wrong results in different colors. I had to put the new array without duplicates in an array and compare with the array of the right ingredients.
Originally, I didn’t separate the two functions. It became such a hassle since I wanted to display the percentage of the score in one screen while the detailed ingredients on another. But I succeeded in separating the two of them because of the two functions.
I played around with the percentage score. It used to display both the score and ingredients in the same page. I found it too wordy. Therefore, I added a timer to show the screen in 2 seconds. So on the gameover layer, players will be notified on the score. In the next screen, they will be notified with the detailed information. They will also be prompted to scan the QR code to download traditional cuisine.
The video shows when I was tweaking the code, it started to loop on top of each other and showing the ingredients repeatedly! I then figured out that I had to separate the score and right/wrong ingredients from user input into two functions and call the score function in the gameover layer while the result in the aftergameover layer.
AFTER GAME OVER LAYER
In the last layer, I played around with the placement of the right traditional ingredients and both right and wrong ingredients from users. It was difficult at the beginning when I was working on the array from userIngredients and try to separate the right and wrong result and fill different colors individually. I was thinking way more complicated than I should have. Then, I wrote some pseudo code to remind myself each step I need to take and then came into conclusion with the code below.
There was an issue to reset the code. I learned from several office hours that I had to find a way to reset the code to make sure the problem mentioned in the video won’t show up in the game since my plan is for user to play continuously without me refreshing the page everytime a new player comes along.
Just right before the office hour with Alden, I fixed the issue by myself. I was looking at the variables and realized that I don’t have to do the reset code in Arduino. Instead, I should do it in p5. I then tried to reset the value of the initial layer and layer name as well as the bowl array. Originally, in the AfterGameOver layer, I only have the first two commands: AfterGameOver() and delayTimer=3.
I am so proud of myself! This past week working alone on the code has really developed my skills in coding and thinking logically! I really appreciate the opportunity of figuring out the code on my own.
screen rather than projection mapping
I succeeded in projecting using Syphoner and MadMapper to map the projection. It was not as legible as expected. The transparent acrylic sheet and the bowls make it harder to read the prompts. Also, the projector we used shows a tint of pink.
Moreover, the projector has a problem of lagging when the ultrasonic sensors are detected. It takes very long time to register while the web browser was doing just fine.
Here are the photos of the comparison of the words. Excuse my phone’s weird reaction towards light. We had to test to have white paper on top to see the words clearly.
On several discussions, we decided to use a monitor instead rather than a projector since it will reduce the pleasure for the users due to the lag as well as the ineligibility.
I like working on the code and the whole process means a lot to me. I loved the feeling when I figured out how to solve the problem on my own! I am proud of the project and am so excited to show it in the winter show!