Embedded Files
Mood Garden Prototype
For this project I wanted to work on the most uncertain interaction and mechanism for me, of choosing different answer choices leads to different flowers. As well as, how to set up different stages of the game so every stage can display their own elements. I started by setting up different functions for each stage, in total 5 stages, with two start and end pages and three question pages. For the time being I've decided to make only two working buttons for stages 1 to 3 that has the questions. I used the distance function to calculate if the mouse is within the circle.
And I used a mouseClicked function to trigger the change of different stages based on if you clicked an answer choice or not. I first tested the change of colors in three rectangles depending on if you clicked the right or left circle the rectangle color would change.
For the time being I used images I found on the internet in place of what my actual images will be.
Soon after I thought this would be too confusing to change into images so I changed the display function into a class that would display the flower at stage four. I split the flowers into bot, mid, and top and for the image gave them variables of what image, x value, and y value, as well as the scale for the images.
Clicking on the left or right buttons would give a value to those variables so I can change the size and position of each the images more easily than translating the whole image.
One of the main challenges of my project is how to get the mix and matched flowers to be lined up or pieced together with each other without the whole flower seeming out of place. During the class exercises of importing images I was curious and imported a GIF image to see if it would work and decided to use that for my flowers. That would give my flowers a more interesting design and movement. But it would still be part to piece part of the flower together using online images or AI generated images. So I decided to try making a 3D model of my own flower and exporting that animation of the flower with a transparent background, and then turning that video into a GIF. I really liked the outcome of this idea and it gave me more freedom and space to work with making the flowers look more natural. But One issue would be trying to turn the transparent animation into a GIf that would play long enough and seem continuous.
I think my prototype is solid for me to continue adding and changing to it. I got a lot of my uncertain ideas done and have a better idea of how to achieve what I want.
Reflection Prompt
The main class in this project is the Flower class. It acts as a blueprint for constructing a custom flower by combining three image layers: top, middle, and bottom. The class holds image properties (imgTop, imgMid, imgBot) along with unique transformation values (topScale, midScale, botScale, and their respective offsets). In each stage, the user selects one image layer (bottom → middle → top). On each click, mouseClicked() checks the cursor position and updates a global selection variable (selectedBot, selectedMid, selectedTop). Once all parts are selected, a Flower object is created with the chosen images and displayed on screen. This interaction is driven by distance-based detection (dist(mouseX, mouseY, centerX, centerY)) and a stage variable to guide the flow of the experience.
Next Steps:
Work on building flower components
Add more interactive buttons/answer choices
come up with questions related to emotion
Learn how to use store item to have flowers appear on start page
change interactions of answer choices to something more creative
Make interactions with flowers
Page updated
Report abuse