Concept:
For my midterm project I want to create a piece that resonated with a hobby of mine. I have always enjoyed baking and cooking. It’s such a calming experience, creating something from scratch. Whenever I get stressed out, I turn to my kitchen and let myself get lost in my recipe book, I let it take away my stress and heavy thoughts, therefore I decided to create a small kitchen simulation. I hope that through interacting with my piece users a can get to feel a semblance of the calmness I get to experience when I bake/cook.
I will design it in a way so that the user will get to choose one of 3 recipes, cupcakes, spaghetti and meatballs or an avocado salad, to bake/cook.
Each recipe will be displayed as an icon on the homepage, when pressed it takes the user to the next page to start the preparations. The user will have to drag and drop the ingredients in order to prepare the food and then put it in and take it out of the oven if needed, there will be different steps for each recipe that resemble the actual recipe being followed. I will also try to attach a recipe that the user can download at the end to try the recipe in real life if they’re interested.
Design:
I want to use a soft palette to resonate with the calming experience I am relaying to the users as well as deliver an aesthetically pleasing design. I did a quick sketch to show what I have in mind for the homepage and an example of the following stages, I will add more dynamic objects and interactivity features within my design when I am actually implementing it.
homepage:
cupcake-making page:
Expected Challenges:
I am expecting to have some troubles with the drag and drop feature and the transitions between the screens. I want the transitions to be as smooth as possible without having any awkward jumps or glitches. I also expect to have some troubles with transitioning between different music files when switching different scenes because I do not want to have any weird transitions when switching tracks.
Risk Prevention:
For the drag and drop, I plan on watching several youtube videos, and look at other people’s code to understand how to implement the drag and drop feature as easily and as efficient as possible because I am a bit conflicted on how to make without running into other bugs in the code.
for the transitions, so far I have come up with having multiple screen variables and a function for each screen that would be called at the relevant times to switch to the desired screen. I will also refer to the p5js. reference page and examples page to get some inspiration for the transitions that could be used to make my project as close to perfect as I can.
p5js Sketch:
for now this is what I have created, I am still working on class definitions, function creations and music loading. I have only created the first page, but I have implemented the icon buttons, however they only direct the user to an empty screen right now.
An issue I faced is the decrease in the resolution of the icons when I loaded them onto p5js, which I am trying to fix as well because it completely ruins the visuals.
I have also used MouseIsPressed to implement the buttons, but I realize that this makes the selection harder and not as smooth so I plan on changing it to MouseIsClicked to function better.