每个像素运行一次拖动数字,或直接改代码
void main() {
vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
float r = length(p);
float a = atan(p.y, p.x);
a += r * 0.000;
float edge = 0.28 + 0.080 * cos(a * 5.000);
float mask = 1.0 - smoothstep(edge, edge + 0.006, r);
float turn = fract(a / 6.283185 + 0.5);
vec3 ink = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), turn);
vec3 color = mix(vec3(0.06, 0.10, 0.14), ink, mask);
gl_FragColor = vec4(color, 1.0);
}JS 这一侧gl.uniform2f(uResolution, …, …)
length 给距离、atan 给角度:换成极坐标后,花瓣、射线、螺旋都只是一行公式。
试一试
- 花瓣数调到 3
- 加一点扭转,变成螺旋
- 找到颜色突然跳变的那条线:atan 在 ±π 处断开