像素精灵元素GLSL - 43-鱼泡相连（the elder）

绘制鱼泡相连

看上去有点像三菱图标

示例代码

#ifdef GL_ES
precision mediump float;
#endif

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

float QTR_PI = 0.78539816339;                       // 四分之一PI
float HALF_PI = 1.5707963267948966192313216916398;  // 二分之一PI
float PI = 3.1415926535897932384626433832795;       // PI 
float TWO_PI = 6.2831853071795864769252867665590;  // 2PI
float TAU = 6.2831853071795864769252867665590;  // 2PI
float PHI = 1.618033988749894848204586834;  // 黄金分割率
float EPSILON = 0.0000001;

/** 绘制线条
* @param {float } x 坐标点
* @param {float } s 划线的位置
* @param {float } w 现对与屏幕宽度的线宽
*/
float stroke(float x, float s, float w){
    float d = step(s, x + w * 0.5) - step(s, x - w * 0.5);
    return clamp(d, 0.0, 1.0);
}
/** 填充一个区域
* @param x 坐标点
* @param size 大小 
*/
float fill(float x, float size){
    return 1.0 - step(size,x);
}

/** 绘制星星状的图形
* @param st 坐标点
* @param  V 边数
* @param s 图形大小
*/
float starSDF(vec2 st, int V, float s){
   st = st * 4.0 - 2.0;
   float a = atan(st.y,st.x) / TAU;
   float seg = a * float(V);
   a = ((floor(seg)+0.5) / float(V) + mix(s, -s, step(0.5, fract(seg)))) * TAU;
   return abs(dot(vec2(cos(a), sin(a)),st));
}

/** 绘制一个圆
* @param st 坐标点
*/
float circleSDF(vec2 st){
    return length(st-0.5) * 2.0;
}

/** 旋转
* @param v 坐标值
* @param angle 旋转的弧度
*/
vec2  rotate(vec2 st, float angle){
    float cos_theta = cos(angle);
    float sin_theta = sin(angle);
    vec2 _st =  mat2(cos_theta, -sin_theta, sin_theta, cos_theta) * (st - 0.5);
    return _st + 0.5;
}

float polySDF(vec2 st, int V){
    st = st * 2.0 - 1.0;
    float a = atan(st.x, st.y) + PI;
    float r = length(st);
    float v= TAU / float(V);
    return cos(float(0.5 + a / v) * v - a) * r;

}

float raysSDF(vec2 st, int N){
    st -= 0.5;
    return fract(atan(st.y,st.x) / TAU * float(N));
}

/**
* @param v 坐标值
* @param pct 十字大小
*/
float flip(float v, float pct){
    return mix(v, 1.0 - v, pct);
}

/**
* @param st 坐标值
* @param s 区域大小
*/
float rectSDF(vec2 st, vec2 s){
    st = st * 2.0 -1.0;
    return max(abs(st.x / s.x), abs(st.y / s.y));
}

float vesicaSDF(vec2 st, float w){
	vec2 offset = vec2(w*.5,0.);
	return max( circleSDF(st-offset), circleSDF(st+offset));
}

vec3 bridge(vec3 c, float d, float s, float w){
    c *= 1.0 - stroke(d, s, w * 2.0);
    return c + stroke(d, s, w);
}

float triSDF(vec2 st){
	st = (st * 2.0 - 1.0) * 2.0;
	return max(abs(st.x) * 0.866025 + st.y * 0.5, -st.y * 0.5);
}

float rhombSDF(vec2 st){
	return max(triSDF(st), triSDF(vec2(st.x,1.-st.y)));
}

void main(){
    vec2 st = gl_FragCoord.xy / u_resolution;
    st.x *= u_resolution.x/u_resolution.y;
    st.y *= u_resolution.y/u_resolution.x;
    vec3 color = vec3(0.0);

    float n = 3.0;
    float a = TAU / n;
    for(float i = 0.0; i < n * 2.0; i++){
        vec2 xy = rotate(st, a * i);
        xy.y -=0.09;
        float vsc = vesicaSDF(xy, 0.3);
        color = mix(color + stroke(vsc, 0.5, 0.1), 
                    mix(color,bridge(color,vsc, 0.5, 0.1),step(xy.x, 0.5) - step(xy.y, 0.4)),
                    step(3.0,i)
                    );
    }

    gl_FragColor = vec4(color, 1.0);
}

代码效果

《像素精灵元素GLSL》期待你的关注与点赞