Runs once per pixelDrag numbers, or edit the code
#define PETALS 6
#define WARM 1
const float TAU = 6.283185;
float disk(vec2 p) {
return 1.0 - smoothstep(0.1, 0.108, length(p));
}
void main() {
vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
float flower = 0.0;
for (int i = 0; i < PETALS; i++) {
float a = float(i) * TAU / float(PETALS);
vec2 center = vec2(cos(a), sin(a)) * 0.2;
flower = max(flower, disk(p - center));
}
#if WARM
vec3 ink = vec3(0.96, 0.43, 0.30);
#else
vec3 ink = vec3(0.48, 0.83, 0.69);
#endif
vec3 color = mix(vec3(0.06, 0.10, 0.14), ink, flower);
gl_FragColor = vec4(color, 1.0);
}JS sidegl.uniform2f(uResolution, …, …)
#define / #if replace text before compiling; const is a value that cannot change; in WebGL 1 a loop count must be a constant.
Try it
- Change the petal count: every change recompiles
- In the code, change TAU to 3.14 and see how the petals spread