I don't know where my obsession with ripples came from, but I just think they're cool and stuff. They're pretty, they're peaceful, but they're also complex. Mathematically interesting and emotionally compelling...a perfect excuse to mess around with Processing.

I borrowed from some person-on-the-internet's ripple math, but I can no longer find that person's website. ¯\_(ツ)_/¯ Suffice it to say that I cannot derive fluid equations on my own, and that what you see is a watered down (no pun intended?) version of some smart person's approximation of fluid dynamics.

Move your mouse around to disturb the water and let the ripples rid your soul of toxins. Removes twice as many as hot yoga and $18 juice, guaranteed.

The program stores the current velocity of the water at each point (pixel) in a giant array. Every frame, a calculation is done per pixel, averaging the energy of adjacent pixels and bit-shifting the result to "slow" the water down, like so:

for(int x = 1; x < width-1; x++) { for(int y = 1; y < height-1; y++) { int i = y*width + x; int s = i + src; int d = i + dest; int adjacent = ripple[s-1] + ripple[s+1] + ripple[s-width] + ripple[s+width]; ripple[d] = (adjacent >> 1) - ripple[d]; ripple[d] -= ripple[d] >> 5; } }

As the mouse changes position, new ripples are inserted by seeding values into the array. In this case, the initial value is 512 because it's a power of 2, and that makes sense because computers.

for(int x = mx - 2; x < mx + 3; x++) { for(int y = my - 2; y < my + 3; y++) { if(x > 0 && x < width && y > 0 && y < height) ripple[y*width + x + index] = 512; } }

Sadly, it's not as performant in JS as it is in Java, so I kept the canvas fairly tiny. Maybe someday I'll figure out how to do my job better, but until then, enjoy! Take a look at the code if you so desire.