Concept
Whenever I’m traveling to someplace new, driving around my hometown, or even walking down a new street, I am always intrigued by that one small, cozy cafe sitting at the corner of the street. The ones with soft, lo-fi music playing in the background with fairy lights hanging all around. For my midterm, I thought of replicating that thought and creating a similar experience but with one important addition: Interaction. I decided to sway away from making games for once and to try something new that i would enjoy just as much. So I came to the conclusion of making a small but interactive cafe experience in p5.
The whole concept behind my idea is to let the user explore the artwork on their own and immerse themselves in the calm environment of the cafe. The way I would make this work is to add small interactable elements in the cafe like books that the user can read, a menu that they can view, or a jukebox that they can use to change the music. All of these elements will be subtle but noticeable enough to make the user want to interact with them. This way, the user will be able to experience something new in every corner.
Design
For this project, I’ve decided to keep the design simple but intuitive. The color scheme would be soft and pastel-like and the overall design of the objects in the canvas would replicate SVG images. I want my cafe to have a calm and relaxing feel to it with soothing music and close-to-real-life sound effects, such as the sound of opening a door when it is clicked, the sound of flipping a page when the user decides to interact with the book and turn its pages, and the familiar sound of brewing coffee in the background.
In order to visualize my design and concept, I started to draw the relevant wireframes on my iPad. These are very minimalistic for now but they give an idea of what the design and feel of the experience would be like.
Frightening / Challenging Aspects
- Switching the user perspective from scene-to-scene. For example, displaying the outside of the cafe at first, and then changing the perspective to view the inside of the cafe when the user clicks on the cafe’s entrance.
- Drawing! All the structures and objects, however big or small, will have to drawn using shapes in p5, this is a very time consuming task.
- Implementing buttons / Highlighted objects on mouse hover: For instance, the cafe’s door would be highlighted in a darker color when the user hovers over it since it stores an interaction. Implementing the different interactable shapes on the canvas as buttons is challenging as well.
Risk Prevention
- In order to tackle the “switching from scene-to-scene” challenge, I started creating layers to keep a track of the different scenes in the experience and to display them at the correct times. Boolean variables would dynamically keep a track of which scene the user is currently in and the relevant objects would be displayed to the user under that layer. For example, if the user is at the first scene, or layer1, the outside of the cafe would be displayed along with the sky and other background objects, but as soon as the user clicks on the cafe’s door, the first layer would be erased (or not be displayed) and the interior of the cafe (the second layer) would be displayed.
- One of the most time-consuming parts of this project would be to design all the individual objects from scratch using basic shapes and lines. Although this seems daunting, I have started to work on different objects simultaneously on different canvases so that I can get them done faster, and also so that I don’t have to scroll endlessly just to find a particular object. In the end, I would combine the different canvases into one project, which would be easier since I’m designing all the layers separately.
- Implementing different objects in the canvas as buttons is also a bit daunting since I would have to compare the mousePos with every single interactable object to see if it is inside the object. Since the objects are made up of different shapes, making the interactions and mouse hovers seem natural would consume a lot of time so I’ve given myself a head-start for working on those interactions as well.