NOC Midterm – Rain Symphony

Link: https://editor.p5js.org/King-Raphael/sketches/BDjNH0FYI

I. Project Overview

Rain Symphony is an immersive generative audiovisual installation designed to simulate the elegant beauty of rain interacting with water surfaces. The installation explores natural rhythms, subtle interactions, and the harmonious interplay between visual aesthetics and ambient soundscapes. Inspired by the poetic simplicity and complexity of nature, Rain Symphony visualizes rainfall through digital droplets creating intricate ripples and gentle splashes.

II. Work Process

Initial Concept & Planning

The project began by identifying key aesthetic and technical elements to authentically capture the essence of rain. This involved creating a mind map to structure ideas clearly and systematically:

Creating Process

After talking with Professor Moon, I started to create the rain and ripples effect in 2D canvas and then trasferd it into 3D. Then I tried to modify the parameters to make the whole process more natural and engaging. At last, I inserted sound files into the project  to make a visual-audio harmony.

Technical Development

I use particle systems to simulate raindrops, ripples, and splashes realistically and employ noise algorithms for generating a natural water surface based on frame count and noise function. In orfer to ensure a smooth accurate interaction between raindrops and the water surface, I try a new kind of Collision Detection which could detect different ripples so that the ripples in a group will not interact and those that are not in a group will gradually disappear and become blue when colliding with other ripples.

For Audio Integration, I Load and dynamically blendiambient and intense rain sounds. For example, each raindrop will have different frequency of sound based on the velocity. And if you switch the rainChance to max, the background sound will become a thunderstorm.

Besides, the use of WebGL (createCanvas(800, 500, WEBGL);) enabled efficient rendering of 3D graphics, flipping the Y-axis (scale(1, -1, 1);) to align visual representations correctly. 

III. Aesthetic Implementation

Visual Harmony

The visual aspect emphasizes:

• Realism & Abstraction: Achieved through balanced use of abstract visual styles and realistic physics-based motion. The ripple and splash effects (new Ripple(), new Splash()) visually dissipated gradually, mimicking real-life interactions. I even created a height for different ripples to make them more naturally.
• Force Dynamics: Particle velocity was affected by gravity, random wind influences (random()), buoyancy forces (createVector(0, 0, 1)), and resistance both in the air and underwater, allowing each droplet to have varying speeds and behaviors.
• Effects: Visual effects included splash generation upon water surface collision, detailed ripple animations with randomized parameters (random(minCount, maxCount + 1)), and careful tuning of visual transparency and interaction effects to enhance visual realism. To improve the performance, I even limit the number of ripples and map it to the rain chance so it wouldn’t stuck when there are many raindrops causing ripples.

Audio-Visual Harmony

Integrated ambient soundtracks and responsive sound effects designed to complement visual intensity variations, creating an immersive experience:

• Background Sounds: Smooth audio transitions from ambient sounds (bgMusic) to intense rainfall (heavyRain) were dynamically controlled based on rain intensity (ui.rainChance).
• Interactive Sounds: Each droplet impact triggered responsive ripple sounds with dynamically adjusted playback rates (sound.rate(rate); sound.play();), enhancing the audiovisual synchronicity.

IV. Reflections & Lessons Learned

I think I successfully captured the delicate visual aesthetics of rain and water interactions and achieved what I want at the proposal time. And the effective integration of visual and audio elements enhance the immersive experience significantly.

For areas that can have further improvement, incorporating user interactions to dynamically influence rain patterns remains a promising area for future expansion. And enhancing the interaction between rainfall intensity and water surface visuals could improve realism—heavier rain causing more chaotic and irregular ripples. Maybe I can paint a very heavy rain. When rainfall intensity reaches extreme levels, optimizing performance by suspending ripple generation could maintain smooth visuals and improve overall system stability. 

Besides, I can add some water surface disturbances. As the rain gets heavier, the water surface will become more unstable and the waves will get bigger.