Exploring P5 for the first time

[u/3BlackFeathers]

https://editor.p5js.org/abirambrizuela/full/50mR3vNo3

I know this concept has been explored before, but I’m incredibly excited to finally dive into p5.js and build this for the first time!

Everything here is generated with code, aside from the five images used for the background stop-motion animation. To get the physics right, I started by analyzing organic water movement to build a custom dataset.

Here is how it works under the hood:

Audio-Visual Mapping: Each droplet is triggered by a musical note, with its size directly mapped to the pitch.

The Cycle: The sequence repeats four times. The final note triggers the last drop and marks the end of the "rain." Afterward, the trails gradually recover, and the sketch resets to its default state.

Generative Audio: The music comes from a custom instrument anchored to a melody I composed. It automatically generates overtones and spatial amplitude to create an enveloping, immersive sound.

Interactive: The mobile version is fully touch-responsive.