Project A: The Harmonious Bloom

I. Project Description

Project Title: The Harmonious Bloom
Project Subtitle: A Digital Symphony of Petals in Resonance with Sound

Link: https://king-raphael.github.io/CClabProjects/project-a-draft/

Abstract:
The “Harmonious Bloom” invites viewers into an enchanting interaction where sound and visual form blend seamlessly. This digital artwork features a unique species of lily, “Lilium Harmonia”, which blooms in response to specific melodies or soft auditory rhythms. As users engage with the piece, the lilies react in gentle synchrony, unfurling their petals and shifting colors from a soft pink at the core to a pure white at the edges. The piece draws upon ideas of harmony, connection, and the unseen relationships between nature and human expression. It offers viewers a moment of introspection about the quiet, responsive beauty present in the world around us, and how subtle shifts in our environment can elicit profound changes.

II. Process: Design and Composition

The design process of “The Harmonious Bloom” began with the concept of creating a visual response to auditory stimuli, which inspired by the Chinese band Sound Toy. I wanted to explore how digital elements could mimic organic responses found in nature. Inspired by the rhythmic opening and closing of flowers, I aimed to design lilies that bloom in response to music.

Initially, the layout was simplistic, with a single lily reacting to sound. However, as the project progressed, I realized that incorporating multiple blooms would create a more dynamic interaction, encouraging users to explore how each flower reacts. I experimented with different designs for the petals and adjusted the animations to ensure the blooms opened gradually and fluidly. One challenge was achieving a balance between realism and stylization, opting for a soft transition in color and motion to enhance the organic feel.

III. Process: Technical

My code generates an interactive scene in which animated circles and blooming lilies create a visually engaging experience. This interactive artwork allows the user to influence the behavior of elements through their mouse movements and clicks. In the following sections, I’ll explain the code’s logic, how each part works, the challenges faced, and potential improvements for future iterations.

Code Breakdown and Logic

1. Initialization and Setup
   • The code begins by defining variables for circles, lilies, control nodes, and parameters such as speed, colors, and the number of elements.
   • Circles: numCircles and circles[] define a set of moving circles, each initialized with random properties like size, speed, and color. Circles also have an originalPositions array to track their starting positions, allowing for animations that oscillate around these points.
   • Lilies: Each lily is stored in the lilies[] array, with attributes like position (x and y), stem length, spread angle, leaves, and growth progress. I added logic to prevent lilies from overlapping horizontally using a minimum distance (minDistance).
   • Nodes: Control nodes are created and updated to follow the mouse, adding an additional layer of interactivity.
2. Drawing the Background and Visual Elements
   • The draw() function is the core of the visualization, responsible for updating and displaying all visual elements on the canvas. A smooth background color transition is triggered once all lilies have fully bloomed, signaling the completion of an interactive event.
   • Animating Circles: Each circle is drawn based on its current properties, with its position updated either towards the mouse (in attract mode) or in a circular motion around its original position. This part of the code uses trigonometric functions (cos and sin) to create circular orbits, while lerp() functions blend movements smoothly.
   • Displaying Lilies: Lilies react to the user’s mouse position and clicks. The drawFlower() function uses geometric calculations to draw each lily with petals, stems, and leaves. Extra petals are added based on user interactions, with each layer growing gradually using lerp() functions.
3. Interactivity and Dynamic Growth
   • The code listens for mouse events, allowing lilies to spread their petals and grow additional layers when clicked. When a circle approaches a lily, the end colors of the petals adapt to the circle’s color, creating a dynamic visual interplay between the circles and lilies.
   • Control Nodes: Nodes are designed to follow the mouse smoothly and leave a fading trail behind. The nodes’ positions are updated based on a speed factor using the lerp() function, which results in smooth movements and trails.
4. Collision Detection and Flower Updates
   • The code includes collision detection between circles and lilies, altering the colors of the lilies based on nearby circles. Similarly, nodes have collision detection routines, allowing for further interactive effects to be added in the future.

IV. Reflection and Future Development

Technical Challenges and Solutions

1. Managing Overlapping Lilies: One of the technical challenges was to prevent lilies from overlapping horizontally. This was solved by implementing a loop that checks for overlap and randomizes positions until a suitable non-overlapping location is found. Additionally, a maximum attempt limit (100) was introduced to prevent infinite loops.
2. Smooth Transitions: To achieve smooth animations and transitions, lerp() functions were extensively used to interpolate between values such as angles, colors, and positions. This approach not only smoothens the animations but also avoids abrupt changes that could disrupt the visual harmony.
3. Dynamic Petal Growth: Allowing petals to gradually grow and layers to be added required a balance between interactivity and the visual result. By introducing a growth progress factor (lilyGrowthProgress[]) and linking it with the number of petal layers, a natural-looking growth effect was achieved.

Potential Improvements

• Enhanced Interactivity: While the current interactivity is centered around the mouse, additional inputs (e.g., key presses or audio analysis) could be used to diversify the responses of the lilies and circles, making the experience richer.
• Improved Collision Detection: Currently, the collision detection between circles and lilies is basic. Future versions could include more nuanced interactions, such as dynamic shape deformations or additional visual effects when collisions occur.
• More Natural Flower Movement: To make the flowers appear more realistic, I could introduce subtle swaying movements, simulating the effect of wind. Additionally, implementing multiple blooms on a single stem would create a more organic and visually appealing structure. This could involve using sine wave calculations or Perlin noise to vary the sway, as well as adjusting the stem’s rendering to accommodate multiple flower heads.

Discoveries and Reflections

One significant discovery during this process was the effect of subtle interactivity on creating a more immersive experience. Even small animations and slight color changes due to user interactions can greatly enhance the viewer’s connection with the artwork. Additionally, experimenting with geometric transformations and leveraging simple trigonometric functions led to complex and aesthetically pleasing visuals with minimal computational overhead.

If I were to redo this project, I would explore integrating real-time audio or other sensor inputs to drive the animations, allowing the visuals to react dynamically to environmental changes. This would add a new layer of interactivity and bring the artwork closer to a multi-sensory experience.

V. Credits

This project would not have been possible without the guidance and support of my professor, Viola He, and the valuable assistance provided by the learning assistants. Their insights and feedback helped shape the project both technically and conceptually.