形状（极坐标）携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情极坐标

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

极坐标

通常我们都用的是经典笛卡尔坐标，但是有些场景极坐标更合适，如果你想画一圈一圈的效果，和旋转角度渐变之类的效果，极坐标就比较合适了。

极坐标，每个坐标也是两个要素，（ρ, θ） θ表示角度，一般来说，起始轴就是对应x轴，逆时针， ρ表示到原点的距离。这里就直接用atan()函数求角度了，其返回值域为 [- π,π ]。

先来个简单的角度渐变，

#ifdef GL_ES
precision mediump float;
#endif
# define PI 3.1415927

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float square(vec2 st, float a){
    return step(abs(st.x),a)* step(abs(st.y),a) ;
}

float circle(vec2 st, float r){ 
	return 	step ( dot(st,st),r*r) ;
}

float sige(vec2 st){ 
	return step(st.x * st.y, 0.) ;	
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    st -= vec2(.5) ;
    float len = length(st);
    float angle = atan(st.y,st.x);
    
    // st *= 5.;
    vec3 color1 = vec3(0.116,0.330,1.000) ; 
    vec3 color3 = vec3(1.000,0.300,0.805) ;

    vec3 color = mix(color1,color3, smoothstep(-PI,PI, angle));
    vec3 color2 = vec3(.2,.4,.6) ;
    gl_FragColor = vec4(color,1.0);
}

上篇说过周期，我们就来进行周期改造。因为原本的值域是一个周期，同样这里把他放大即可

angle *=3. ;
vec3 color = mix(color1,color3, smoothstep(-PI,PI, angle));

可以看到，之前的渐变重复了三次，并且单个渐变的周期其实被压缩到了原本的1/3。虽然这个图不太好看，但是，道理是一样的

我们现在用极坐标画一个圆，当圆心在x轴上，且圆过原点时，这个方程十分容易就是 ρ = 2r cos(θ) ;

float circle (float a, float r , vec2 st){
      float c =  length(st)- 2.*r*cos(a);
      // return   step( c,0. )     ; 
      return smoothstep(.001 ,-0.001 ,c );
}

说实话这个圆画的让我有点不解，不过不要紧，这不是重点，我们来增加一下周期这个e就是要增加的系数。


float circle (float a, float r , vec2 st,float e){

      float c =  length(st)- 2.*r*cos(a*e);
      // return   step( c,0. )     ; 
      return smoothstep(.001 ,-0.001 ,c );
}

来试图，解释一下这个图是怎么来的，一开始，我们就画了一个紫色的圆，外圆是背景。用的极坐标，极角的取值范围是 [0, 2π]，当我改变 ρ = 2r cos(k * θ) ;中的k时，这个函数的完整周期就变了，一个完整的周期能画出一个完整圆， k=2的时候，周期压缩了，只要180度就是一个完整的周期，结果，我们简单想像一下把一把360度的圆扇，合到180度，上面的图案还是完整的，但是被压缩了。所以结果看到是这样的。后面，完全就是一样，多少个周期就看到了多少花瓣，并且花瓣越来越小。

暂且到这里了。两周一直在搞深度剥离，现在才稍微得空。

形状（极坐标 ）

极坐标

形状（极坐标）