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.
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