I am currently experimenting with creating an animated gradient effect by blending three separate blobs together in a melting-like fashion, with each blob moving independently. The desired result can be seen in the image provided below.
So far, I have been successful in generating and animating three blobs/circles using the fragment shader code snippet below:
uniform vec2 resolution;
uniform vec3 blobs[3];
uniform vec3 colors[3];
vec3 draw_circle(vec2 position, vec3 color, float size) {
float circle = sqrt(pow(position.x, 2.0) + pow(position.y, 2.0));
circle = smoothstep(size, size + 0.003, 1.0 - circle);
return color * circle;
}
void main() {
vec2 coord = gl_FragCoord.xy / resolution;
vec3 canvas = vec3(0);
for (int i = 0; i < 3; i++) {
vec3 circle = draw_circle(coord - blobs[i].xy / resolution, colors[i], blobs[i].z);
canvas += circle;
}
gl_FragColor = vec4(canvas, 1.0);
}
Now, I am looking for guidance on how to modify my shader and adjust the circles to achieve the level of blurriness seen in the second image provided. Would a different approach be more suitable for this effect?
Current Progress
https://i.sstatic.net/OunwF.png
Desired Outcome
https://i.sstatic.net/1ZdfH.jpg