靜態效果圖
動態效果圖
為啥需要旋轉 18 °
如何判斷像素是否落在區域內
組合成五角星
代碼與詳解如下：
<code>#iChannel0 "file://./yeah_0.jpg"
#iChannel1 "file://./yeah.jpg"
vec2 circlePoint(float ang)
{
// 調整五個點所構成的邊的角度
ang -= PIx2 * 0.05; // 18° 正五角星
return vec2(cos(ang), sin(ang));
}
float cross2d(vec2 a, vec2 b)
{
return (a.x * b.y - a.y * b.x);
}
void main(void)
{
vec2 p = gl_FragCoord.xy / iResolution.xy;
vec2 o = p * 2.0 - 1.0; // [-1., 1.]
float progress = sin(PI_HALF * iGlobalTime);
float t = progress * 1.4;
float c1 = star(o, t); // “五角星”
float c2 = star(o, t - 0.1); // 小一點的“五角星”
float border = max(0., c1 - c2);
vec4 col0 = texture2D(iChannel0, p).rgba;
vec4 col1 = texture2D(iChannel1, p).rgba;
gl_FragColor = mix(col0, col1, c1) + vec4(vec3(border), 0.0);
}
// reference from: panda1234lee.blog.csdn.net/article/details/104045591/<code>