The GLSL function mod() creates a saw tooth shape — think pointy edges repeating over and over.
But what if you want a little more control over the sharpness of the tip of each saw ridge? Enter smoothMod(). When @charstiles came on the stream, she showed us her riff on the idea with the below function.
If you've worked with CSS, it might also be helpful to think of this like you would the border-radius property.
In the CodePen example below, we've commented out an implementation of the regular mod() function so that you can compare the two.
/*
* SMOOTH MOD
* - authored by @charstiles -
* based on https://math.stackexchange.com/questions/2491494/does-there-exist-a-smooth-approximation-of-x-bmod-y
* (axis) input axis to modify
* (amp) amplitude of each edge/tip
* (rad) radius of each edge/tip
* returns => smooth edges
*/
float smoothMod(float axis, float amp, float rad){
float top = cos(PI * (axis / amp)) * sin(PI * (axis / amp));
float bottom = pow(sin(PI * (axis / amp)), 2.0) + pow(rad, 2.0);
float at = atan(top / bottom);
return amp * (1.0 / 2.0) - (1.0 / PI) * at;
}