Concept:
Anyone who knows me knows that I love baking and cooking. Being in the kitchen and creating something from scratch is such an amazing experience for me. Even though some people may argue that being in the kitchen is actually stressful, I don’t see it that way. It disconnects me from all the stress and anxiety of the outside world for a while and leaves me feeling relaxed. So for my midterm project, I wanted to create a kitchen simulation to let others feel a semblance of the calmness and joy I get when in the kitchen.
My program is so easy to navigate. At first, the user is prompted to choose one of three recipes, Chocolate Cupcakes, Spaghetti and Meatballs or Avocado salad. After clicking on a recipe, the program takes the user through a few steps to prepare the recipe they chose. The user has to follow all the instructions to successfully deliver the recipe or else they fail and have to start over. After completing a recipe, the user is given two options, to follow a link with the actual recipe, if they want to try it in real life, or to go back to the homepage to start a new recipe. The program also allows users to return to the home page at any given time by pressing esc on the keyboard. I tried to make the program as fun and as engaging as possible. Additionally, I chose a calm music track for the background to add an extra level of tranquility as well as a soft palette of colors to maintain the overall theme of the program which is calming and relaxing.
*open in a new window to hear the music
How it works:
I created my program by creating a function for each screen and calling these functions at the necessary time. I created a list to store the ingredients that are being displayed on the screen and used OOP to define an ingredient class that handles the display and hide-when-clicked methods. I used clip art images for all the icons and pictures included in the program and sized them as necessary to fit the way I want them to. Additionally, I linked a font file to define the font I wanted to use. I chose this font because it looks cute and cartoon-ish even, which makes the program look more fun and gives it an element of style that my program would lack if I had used a standard font.
I included dynamic features where possible and tried to make the motion randomized instead of defined (the dressing drops, the home page animation and the smoke). I handled all the transitions using the mouseClicked() function to determine which screens are displayed when and after which conditions are met. I tried to make my code as modifiable as possible, that is making it easy to add more screens, more ingredients, more functionalities, even more recipes if needed, by using encapsulation and modularity. I found that compressing the functions in p5js made it easier and clearer for me to navigate through the code.
For the smoke screens, I included an internal timer in my code that records the start time and the current time and compares them till the required time has elapsed and then if no action was taken then the smoke screen is displayed. I tried severaltimesto create it with a different logic but it did not work and I found this to be the most appropriate to use in my code.
if (screen === 3) { //screen is the cupcake oven screen
CupcakeOven();
currentTime = millis();
if (currentTime - startTime > cupcakeinterval) { //count the seconds elapsed and //compare it to the allowed interval, if it is greater than the time allowed, //cupcakes burnt so go to smoke screen
screen = 5; //go to the cupcake smoke screen
}
}
Problems faced:
The main problem I faced in the beginning was the transitions. I had all the screens defined and working perfectly, but I could not get them to link together properly without facing so many bugs. I tried so many different ways to get them to call each other from within the functions itself, but I would get stuck on one single screen forever. I tried to link them using mouseButton, it worked partially but I faced so many problems with the ingredients when I implemented it. When I finally decided to use mouseClicked(), I tried to call the functions from within and use if functions to identify when and which screen is needed to be called, but I also faced errors 🙁 It was after a lot of trial and error that I realized having a screen variable that is controlled through the mouseClicked() and then having draw() call the screen functions is the way to go.
Another major problem I faced was implementing the ingredients objects and how to make them disappear when clicked and how to link the screen transitions with the ingredients. At first it was mostly trial and error, but then I decided to take a step back and understand every little detail related to how I am implementing them and come up with a solution that works on paper and then implement it step by step. I am proud of the way I got it to work in the end because it just makes sense to me and makes the whole process smooth and straightforward as well as easy to add/remove/modify the ingredients as needed. It is also worth noting that I originally wanted to implement a drag and drop feature for the ingredients but it was too complicated to use within my program especially that I wanted to use resized images for the ingredients so I settled on mouse clicks instead.
Last but not least, I faced problems with implementing the smoke screens and how to make them appear automatically after the time elapses. It was a bit confusing for me at first to implement it, it never worked at all to the point where I decided to completely disregard the idea of smoke screens, but I managed to get it working in the end. I wanted to add a timer functionality where it displayed the timer on screen so that the user can visually see how much time they have left, but it created so many bugs and did not work effectively, even though it is a straight forward feature, it clashed with my other functionalities, so i decided that the users can count to 5 or 7 themselves.
Future improvements and reflection:
I would love to add more features to make the program more advanced like adding mixing and frosting stages for the cupcakes and adding a stirring stage for the spaghetti as well as some steam while it is cooking. I would also love to add more choices within the recipes so that users can choose what dressing they want for the salad for example. I am overall satisfied with what I have now and I am proud that I got my program to look like what I had initially planned for it.
References:
images:
https://www.vecteezy.com/vector-art/11234689-cocoa-sack-with-seeds
recipes:
https://sallysbakingaddiction.com/super-moist-chocolate-cupcakes/
https://www.onceuponachef.com/recipes/spaghetti-and-meatballs.html
https://www.onceuponachef.com/recipes/summer-avocado-salad.html
music:
https://www.ashamaluevmusic.com/cooking-music
Font: