1precision highp float;
2
3uniform float uTime;
4uniform vec2 uResolution;
5uniform float uStep;
6
7void main() {
8 // "UV" is texture-mapping slang: U = horizontal axis, V = vertical.
9 // Not short for anything deeper — just the traditional names for 2D coords.
10 // Here we use the same idea for "where is this pixel on the canvas?" (0–1).
11 vec2 uv = gl_FragCoord.xy / uResolution.xy - 0.5;
12
13 // Iteration 1 — distance from centre as a radial colour gradient
14 if (uStep < 1.5) {
15 vec3 orange = vec3(1.0, 0.5, 0.0);
16 vec3 green = vec3(0.0, 1.0, 0.0);
17 vec3 blue = vec3(0.0, 0.0, 1.0);
18 vec3 violet = vec3(0.56, 0.0, 1.0);
19
20 // Distance from centre (0 → ~0.7 at corners). Scale so ~1.0 at the edges.
21 float d = length(uv) * 2.0;
22
23 float seg = 1.0 / 3.0;
24 vec3 col;
25
26 // Segment by radius (d), not by uv.x — same idea as hello-world's rainbow,
27 // but rings instead of vertical stripes.
28 if (d < seg) {
29 col = mix(orange, green, d / seg);
30 } else if (d < seg * 2.0) {
31 col = mix(green, blue, (d - seg) / seg);
32 } else {
33 col = mix(blue, violet, (d - seg * 2.0) / seg);
34 }
35
36 gl_FragColor = vec4(col, 1.0);
37 return;
38 }
39
40 if (uStep < 2.5) {
41 // Match horizontal units to vertical ones so circles stay round on wide canvases.
42 uv.x *= uResolution.x / uResolution.y;
43
44 vec3 red = vec3(1.0, 0.0, 0.0);
45 vec3 indigo = vec3(0.29, 0.0, 0.51);
46
47 // freq - the number of rings
48 float freq = 60.0;
49 // dist from the center
50 float dist = length(uv) * 2.0;
51
52 // sin() returns -1 → 1, but mix()'s t wants 0 → 1.
53 // 0.5 * sin scales the wiggle to -0.5 → 0.5; adding 0.5 shifts it up to 0 → 1.
54 vec3 col = mix(red, indigo, 0.5 + 0.5 * sin(dist * freq));
55 gl_FragColor = vec4(col, 1.0);
56 return;
57 }
58
59 if (uStep < 3.5) {
60 vec3 deep = vec3(0.02, 0.08, 0.18); // dark water
61 vec3 crest = vec3(0.55, 0.85, 0.95); // pale foam highlight
62
63 // freq — how tightly the rings pack (higher = more ripples)
64 float freq = 30.0;
65 // dist from the centre, scaled so the canvas edge is roughly 1.0
66 float dist = length(uv) * 2.0;
67
68 // Build a 0→1 ripple mask:
69 // sin(dist * freq - uTime * …) — rings in space; subtracting time makes them expand
70 // * max(1.0 - dist, 0.0) — fade amplitude toward the edges (calm far from splash)
71 // 0.5 + 0.5 * … — remap sin's -1→1 into mix-friendly 0→1
72 // Note: * binds tighter than +, so the fade scales only the sin term, then 0.5 shifts it.
73 float wave = 0.5 + 0.5 * sin(dist * freq - uTime * 8.0) * max(1.0 - dist, 0.0);
74 // Crush mid-tones: peaks stay bright, troughs drop toward 0 → thinner foam crests
75 wave = pow(wave, 6.0);
76 vec3 col = mix(deep, crest, wave);
77 gl_FragColor = vec4(col, 1.0);
78 return;
79 }
80}
81