Project B

Mood Garden

Live Sketch: https://starwu123.github.io/CClab/ProjectB/

Sketch code: https://github.com/StarWu123/CClab/blob/main/ProjectB/sketch.js

Initial Concept

Mood Garden was conceived as an emotional time capsule—a digital landscape that grows from the moods of its visitors. The idea was to capture the transient nature of human emotions and preserve them in a poetic, visual form. Each mood submitted by a user would blossom into a unique plant, contributing to a collective garden that reflects the emotional ambience of our time. The initial designs featured a static garden with pre-defined plant types representing basic emotions (happy, sad, angry, etc.). However, this approach felt limiting and didn't capture the diversity of human feelings. I also tried making all the plants the same shape with just color differences, but that didn’t express enough variety. After testing, I decided to give each answer choice based on the users mood a more unique plant design, with its own shape and color. 

Design

For the visual design of Mood Garden, I was inspired by the glowing, immersive flower environments created by teamLab. Their use of vibrant flowers in a digital space, especially the way they seem to bloom with light against a dark background, really influenced the look I wanted. I aimed for a similar contrast—bright, glowing mood plants emerging from a dark canvas—to give the garden a sense of depth and life. Unlike my earlier project (Project A), which had a more cartoonish feel with pastel and soft colors, I deliberately chose stronger, more saturated tones to achieve a digital, futuristic aesthetic. I wanted the project to feel more like a living digital artwork than a playful game.

Technical

Mood Garden is structured around four interactive stages, where users answer sets of poetic multiple-choice questions. Each answer corresponds to a visual part of a flower—bottom, middle, side, and top. Behind the scenes, I created arrays (botFlowers, midFlowers, sideFlowers, and topFlowers) that preload the different image assets. Each time a user selects an answer, it stores the index of the chosen image in a variable (e.g., imageBotIndex) and moves to the next stage using the stage variable. After all four parts are selected, a new Flower object is created using those four image indexes and added to an array called flowers. This object combines the selected images and displays them as one complete, layered flower using the displayParts() method inside the Flower class.

The main challenge I had was figuring out how to build the flower in parts and make them appear as one unified object. It was especially hard to get different PNG or GIF images to align and scale properly when they were layered on top of each other. Another major difficulty was saving the flowers into an array and having them reappear on the garden start page. While I eventually got the flowers to save and show up using flowers.push() and storing position variables like gardenX and gardenY, spacing is still a problem—sometimes the flowers overlap or appear too close together. The function stage0() handles the drawing of all saved flowers using a loop. I also created a displaySolo() method to show the full flower in the center after it's finished.

Overall, the logic works like this: input → selection stage → store image index → assemble flower → save to array → render on screen. My code got very long and takes time to load, which I know could be improved by breaking it into separate files and organizing functions more clearly. If I were to redo it, I’d also optimize image loading and find a better method for random placement to avoid collisions between flowers. Still, I’m proud of how each part works together to create a digital object from something as abstract as emotion.

Reflection and Future Development

Reflecting on Mood Garden, I think the project successfully expresses the emotional and poetic concept I originally set out to explore. My goal was to create a digital space where people could leave behind feelings, preserved as uniquely generated flowers. The idea of turning answers to questions into layered, glowing flowers worked well, and the overall aesthetic feels meaningful and intentional. However, there are still areas I want to improve. During critique, classmates mentioned that the sets of questions were visually hard to read and that the layout could be more engaging. I’ve started improving the appearance of the text and answer buttons to make them clearer and easier to interact with. From my instructor, I received feedback to push the emotional storytelling even further—by making each flower more readable as a representation of someone’s mood and adding interactive features so users could see and understand each other's emotional entries. That idea really stuck with me. In future versions, I’d like to build features that let users hover over or click flowers to learn what emotions they represent, and maybe even leave responses or reflections. I also want to improve how the flowers are saved and placed, and possibly create a shared public garden to make the experience more social and connective.