button-fragment.glsl

void main() {
    // We need to adjust the size of the effect to the screen resolution
    vec2 res = (gl_FragCoord.xy + 100.) / (u_resolution.xy * u_scale);
    // Then we access the colors we defined in JS
    vec3 highColor = rgb(u_highColor.r, u_highColor.g, u_highColor.b);
    vec3 lowColor = rgb(u_lowColor.r, u_lowColor.g, u_lowColor.b);
    vec3 color = vec3(0.0);
    
    // Then we do one run through of FBM using various variables we defined
    vec2 fbm1 = vec2(0.);
    fbm1.x = fbm( res ) * snoise(res);
    fbm1.y = fbm( res + vec2(1.0)) / snoise(res) / u_veinDefinition * u_clickLength;
    
    // Then we run FBM again using the mouse position
    vec2 r = vec2(0.);
    r.x = fbm( res + fbm1 * u_time * 0.1 ) + -sin(u_mouse.x) * 2.;
    r.y = fbm( res + fbm1 * u_time * 0.5 ) * -u_mouse.y;
    
    // Then we create a float of FBM again
    float f = fbm(res+r) * 1.2;
    
    // Then we mix the colors
    color = mix(highColor, lowColor, f*12.);
    color = mix(color, lowColor, clamp(length(fbm1),0.0,12.0)); // * snoise(res) * 1.3
    color = mix(color, highColor, clamp(length(r.y), 0., 8.));

    // And finally we produce the final output colors using our color and our float f.
    gl_FragColor = vec4((f*f*f*0.6*f*f+.5*f)*color,1.);
}