Ripples


For my final Creative Coding sketch, I wanted to create something simple, interactive, and therapeutic. In the p5.js web editor, I used a for loop to create circles that change in diameter and stroke with each frame. This creates a peaceful rippling effect.




My first draft consists is a sketch that creates a ripple with each mouse release. The previous ripple disappears before the next one even begins.

Explore the code and comments here


For my final draft, I wanted to add a behavior where when you release the mouse, it doesn’t eliminate the previous ripple. I wanted the ripples to stack on top of each other. For this, I used an array. I also wanted to create a more organic rippling effect. >
I replaced line 53 from my first draft with:

var diam = outerDiam - (50 * sin(i/2)). 

The result is a series of rings that get further apart and then closer together according to the sine wave.


Explore the code and comments here

Cargo Collective 2017 — Frogtown, Los Angeles