Final Prototype – Ripples

Ripples Playground

by Brian Nguyen


Live Demo:

The Ripples Playground is a fun interactive sketch meant to mesmerize the user by generating colorful, aesthetically pleasing, expanding ‘ripples’ on the screen from the users mouse and input. The ripples speed and color are randomized between a range. There is also a second variant of the ripple called a background ripple that is created on right click which is opaque and has a fill of either white or black. I added this because it gave a kind of wiping the screen look and it looked pretty trippy.

Alongside this, the ripples generate their own unique oscillation frequency, based off their speed. This gives them a slight resemblance of sound or radio waves.

I tried to add a radio button switcher for the oscillation type but since I got the idea last minute experimenting with the types I couldn’t get it fully implemented or cleaned up. You can view the sine and triangle buttons at the bottom of the page.

I chose p5.js for this project because it allowed the sketch to be accessible to lots of devices by not requiring them to download any software and running smoothly as well on many devices. For example, if I used Processing for this I would need to run it in the Processing editor. As well, it allows me to build UI using HTML elements.

The context and idea for this project came from me wanting to experiment and expand on my Sketch_1 with drawing colorful ellipse on the page. After I got them to ripple and expand on the page I thought they kind of looked like sound/radio waves and experimented with the oscillator.