NOC W03 – Rainy Dawn – Boyan’s Documentation Blog

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

Introduction

In order to develop a simulation that can represent natural phenomena using objects influenced by various forces, I think about some situations happening usually in my life: A rainy damn. Therefore, I integrate several natural phenomena—including rain, lightning, water splashes, and drifting clouds—to create a cohesive and immersive storm scene. Below, I detail my work process, share screenshots and video captures, and reflect on key lessons learned

Work Process

1. Conceptualization and Planning

I began with a simple idea: simulate a rainstorm with realistic touches. The initial plan was to create a particle system for rain droplets that interact with forces like gravity and wind. Then, I decided to expand the scene with additional elements: Rain Droplets which are modeled as particles that fall vertically, influenced by gravity and dynamic wind; Water Splashes that are triggered when droplets hit the ground, these splashes expand into a flattened, irregular shape to mimic water ripples; Randomly appearing Lightning with colors ranging from bright yellow to a darker, muted tone. And finally Cloud Layers that added as drifting, semi-transparent ellipses in the sky to enhance the overall mood and provide a cohesive backdrop.

2. Development and Iteration

I tackled the project module by module:

Rain Particles:
I created a Particle class where each particle uses a p5.Vector for position, velocity, and acceleration. Rain droplets are spawned continuously at random horizontal positions above the canvas and fall with variable speed.
Wind Effect:
Noise effect was employed to generate a dynamic wind vector that influences both the rain droplets and the water splashes. This not only adds natural variation but also ties the different elements of the scene together.
Water Splashes:
When rain droplets hit the bottom of the canvas, a Splash object is created at the impact point. The splash is rendered as a flattened, irregular polygon. I also introduced randomness in vertex positions to avoid a perfect, uniform shape.
Lightning:
The Lightning class simulates bolts by connecting a series of randomly jittered points. Additionally, the bolt’s color is determined by a random interpolation between a bright and dark yellow to make it more natural.
Cloud Layers:
Finally, to bring harmony to the scene, I added a Cloud class. Clouds are drawn as groups of semi-transparent ellipses that drift slowly across the canvas. They create a stormy atmosphere.

Reflections & Lessons Learned

Modular Development:

Breaking the project into distinct components (rain, lightning, splashes, and clouds) with “class” made it easier to manage complexity. Each “class” could be developed, tested, and refined independently before integrating into the final scene. Moreover, I can easily modify each class since they are seperated.

Performance Considerations:

With continuous particle generation and so many different classes running, performance was a key concern. I implemented limits on the number of active rain droplets and ensured old particles were efficiently removed by “splice” to keep the simulation smooth and responsive.

Realism through Randomness:

Nature is not a mechanical system. So a major insight was that natural phenomena are inherently imperfect. By introducing randomness in parameters, such as the offsets for splash vertices or the interpolated colors for lightning, the simulation achieves a more organic appearance.

Iterative Enhancement:

Initially, the scene felt somewhat disjointed. Thus, I add the cloud layer and ensure that wind affected both rain and splashes dramatically improved the cohesiveness of the simulation. This iterative process underscored the importance of stepping back and refining the overall aesthetics rather than focusing solely on individual effects.

Reference

Inspired by Moon’s example: NoC S25 3.2 06 Application: Something falling down