The above effect is generated by the following fragment shader:
precision mediump float;
uniform float u_time;
uniform vec2 u_resolution;
vec3 palette(float t) {
vec3 a = vec3(0.5, 0.5, 0.5);
vec3 b = vec3(0.5, 0.5, 0.5);
vec3 c = vec3(1.0, 1.0, 1.0);
vec3 d = vec3(0.263, 0.516, 0.557);
return a + b * cos(6.28318 * (c * t + d));
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = (fragCoord * 2.0 - u_resolution.xy) / u_resolution.y;
vec2 uv0 = uv;
vec3 finalColor = vec3(0.0);
for (float i = 0.0; i < 6.2; i++) {
uv = fract(uv * 1.42) - 0.5;
float d = length(uv) * exp(-length(uv0));
vec3 col = palette(length(uv0) + i * .4 + u_time * .2);
d = sin(d * 8. + u_time) / 8.;
d = abs(d);
d = 0.005 / d;
finalColor += col * d;
}
fragColor = vec4(finalColor, 1.0);
}
void main() {
mainImage(gl_FragColor, gl_FragCoord.xy);
}
Note: The uniforms are provided by a
.wasm
compiled from code written in Zig ⚡
Adding mouse position input is as easy as providing a uniform vec2
for this purpose.