🌊 What is ~ripple?

Ripple is a generative music experience that I have built. It generates relaxing soundscapes by selecting random notes every time you (re)load the site. Along with the sound it also has beautiful visuals that complement the sound.

✨ Creative Inspiration

I built this experience with one thing in mind, the relaxation a person feels while watching random ripples happening in any waterbody. It has no meaning and no definite pattern, yet it soothes the mind of the person who views it. By complementing such visuals with relaxing music, I tried building such experience with particles that react like ripples when a musical note is triggered. The site plays new melody from random notes every time someone visits or reloads it. With no control and stress of choosing the music for focusing and relaxing, you can just load the website and let it do all the work while you can truly relax & surrender to the flow of randomness.

🎵 The Sound

The single most important aspect of this website was to nail the sound. I started with sound aspect of the site first and was looking for solutions that can actually handle and play sound on web. After some research I found Tone.js to be a good library that I can use. But being the perfectionist I am, I was not able to nail the sound in my first try. I was on my laptop everyday tweaking plethora of hyperparameters of synth. This process was so exhausting that I had actually given up midway through the project & was going to can it.

But then I decided to start from scratch & learn the basics of sound design, sound production, to get an idea of what all these parameters did. Though I couldn’t understand everything, I was able to gain some basic understanding to start off.

Before moving forward I would like to clear, generative music though random is not entirely random or it would sound like chaos. For notes and sounds to become music there are some variables I needed to control.

I dissected & identified these elements needed to make beautiful ambient soundscapes

• Notes

  Notes are selected at random from the same scale. As any notes selected from same scale wouldn’t sound odd if played one after the other.

• Tempo

  Ambient sounds have long, drawn out tempos. Most of the space is taken by silence and in there lies the beauty of it. I decided to do the same.

• Sound & Sound effects

  I was aiming for high and delayed reverb sound. The notes aren’t hit very often but their effect(ripple) still remain in the atmosphere due to the reverbs.

• Layering with multiple instruments

  Added some bass synths & chord synths to make sound much full and lively.

• Mixing

  Mixed these different instruments according to the importance in composition & tweaked it to find the right spot for best effect. My friend Tanmay helped big time in this part (Check out his music)

All the generation of sound, adding effects, mixing was done through JavaScript code using tone.js library. So yeah it was not so easy as manipulating sounds in a DAW.

🌸 Visual Inspirations

The visuals of the site is also what I was very excited to explore. Blade Runner movies share one more special trait i.e. outstanding cinematography. Each frame of the movie is worthy of becoming a poster. It is that gorgeous. I also wanted to convey a similar feeling with my website: something screenshot worthy. Having been greatly fascinated by brutalist poster designs, I tried to incorporate such styles while designing the websites. I wanted a retro-mecha-robotic style of website to contrast with the very human-like soothing soundscapes, which is a core question that Blade Runner asks: “what makes us truly human?”

I scoured many brutalist websites/posters to gather inspiration & I already had one simple concept art which I used to start of my designs

👨‍💻 Coding

🎶 Sound

As I mentioned earlier, all the sound related things like playing notes, selecting scales, sound effects & mixing was done via JavaScript code. Though I knew coding since college, this project was a bit different as I was experimenting with sounds on web for the first time, and it’s not so easy. There are a lot of trials and errors, tweakings, revertings, optimizations, etc. that are needed.

✨ Front-end & visuals

The relaxing sea of particles on the website was also coded in JavaScript. It places particles on random points on the canvas & everytime a note is played, a ripple moves in a random bezier curve. I got a really good help in making the front-end of the website from my friend Akash (Akash’s LinkedIn).

If you are curious about the code, you can check it out here: https://github.com/5paceb0i/ripple-experiment

🚀 Launch

#8 product of the day on Product Hunt 15th-Oct-2022