Blooming
In Blooming, you will enter a magical garden and explore the delicate cycles and ecological balance of the natural world. This unique game allows you to experience the fascinating interaction between the life cycle of flowers and the flow of energy. Each area is randomly assigned with flowers or fertilizer, and your task is to trigger the cycles and guide the growth and decay of the flowers.
Group Project
Contribution
Team
Date
Tools
Research
Writing
Coding
Editing
Web Intro Page Layout
Web Interaction Design
Herbie Kuang
Yingxin Xue
Tingxuan Wu
Mingjun Xie
HTML
CSS
JavaScript
Photoshop
2023
CONTEXT
The theme for this project is "EMERGENCE," which explores the concept of unexpected global outcomes arising from local rules operating within a confined environment.
Each group is tasked with designing and developing a webpage that showcases emergence. The webpage should incorporate the following elements using HTML, CSS, JavaScript, and SVG knowledge.
Design Challenge
How to design the webpages and game rules to allow the audience to better experience the fascinating interaction between the life cycle of flowers and the flow of energy. However, during the coding process, many technical issues arose, resulting in the initial visuals not meeting our envisioned perfection.
The Outcome
Through careful selection of intro page images and game elements, alignment of colors with the theme, and multiple iterations of code adjustments, we successfully crafted a game that meets our satisfaction.
SITUATION
When flowers lack nutrients, they wither and transform into fertilizer, providing valuable nourishment to the surrounding flowers. However, when the nutrients around the flowers become excessive, they also wither due to nutrient overload, transforming into fertilizer.
Fertilizers also have their cyclic life cycle. When the nutrients around the fertilizer are abundant, they burst into new life, growing into fresh blossoms. At the same time, flowers also spread as seeds, allowing the surrounding fertilizers to grow into new flowers.
TASK
Background research
Theme color selection
Game rule formulation
Rule introduction
Report writing
Page interactive function design
ACTION
Intro Page Design
Undesirable & Edge Cases
Game Rules
RESULT
Reflection
For me, designing the introductory page and incorporating interactive elements that align with the theme were the most challenging aspects. I chose a photo I captured at the Vancouver Flower Festival for the cover image and utilized layering techniques in Photoshop to enhance its integration with the scrolling design of the page. Below the page, buttons generate a pink halo upon mouse click, echoing the floral elements within our game.
As a team, we divided tasks equally based on everyone's strengths. We conducted background research, developed the game's theme, searched for assets, and iteratively modified the code together. I played a more significant role in defining the visual style of the introductory page and implementing interactive features.