源码链接：https://www.shadertoy.com/view/XdsXRf
#define PI 3.1415926535897932384626433832795
// 绘制线，传入参数，圆心，线的终点， 片元座标
float LineToPointDistance2D( vec2 a, vec2 b, vec2 p)
{
vec2 pa = p - a; //片元座标-圆心座标
vec2 ba = b - a; // 线终点座标-圆心座标
//片元座标到圆心的距离/半径
float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0); //clamp函数会将x限制在minVal和maxVal之间。float clamp(float x, float minVal, float maxVal)
//片元座标减去 半径*片元元座标到圆心的距离/半径，当在圆外时，h为1 ，则长度为 pa-ba
//当在圆内时， 长度大于pa-ba
return length( pa - ba*h );
}
// 传入参数 传入圆心座标，旋转的角度，返回的线终点座标，
//传入了线的初始终点座标，更简单的方式是传入圆的半径来做
vec2 rotatePoint(vec2 center,float angle,vec2 p)
{
float s = sin(angle);
float c = cos(angle);
// translate point back to origin:
p.x -= center.x;
p.y -= center.y;
// rotate point
float xnew = p.x * c - p.y * s;
float ynew = p.x * s + p.y * c;
// translate point back:
p.x = xnew + center.x;
p.y = ynew + center.y;
return p;
}
void getBlips(float radius, out vec2[1] blipsOut)
{
vec2 cen = iResolution.xy/2.0;
float sec = iDate[3];
float mdl = mod(sec,10.0);
//From 1 to 6
float cstepRot = ((sec-mdl)/10.0)+1.0;
float factorRot = cstepRot/6.0;
float factorLen = sin(factorRot)/2.0;
float len = radius*factorLen;//0.5;);
vec2 targetP = vec2(cen.x,cen.y+len);
float ang = PI*factorRot*2.0;
targetP = rotatePoint(cen,ang,targetP);
blipsOut[0] = targetP;
}
float angleVec(vec2 a_, vec2 b_)
{
vec3 a = vec3(a_, 0);
vec3 b = vec3(b_, 0);
float dotProd = dot(a,b);
vec3 crossprod = cross(a,b);
float crossprod_l = length(crossprod);
float lenProd = length(a)*length(b);
float cosa = dotProd/lenProd;
float sina = crossprod_l/lenProd;
float angle = atan(sina, cosa);
if(dot(vec3(0,0,1), crossprod) < 0.0)
angle=90.0;
return (angle * (180.0 / PI));
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 center =iResolution.xy/2.0; //获取片元中心座标
float minRes = min(center.x,center.y); //取x,y中较小的一个为中心，否则圆形会超出canvas的范围
float radius =minRes-minRes*0.1; //半径为最小分辨率值的90%
float circleWitdh = radius*0.02;//圆的宽度为半径*0.02
float lineWitdh = circleWitdh*0.8; //线的宽度为半径*0.8
float angleStela = 180.0; //角度
vec2 lineEnd = vec2(center.x,center.y+radius); //线的终点，初始的时候即为中心点+圆的半径
float blue =0.0;
float green =0.0;//绿色分量默认为0
float distanceToCenter = distance(center,fragCoord.xy);//计算中心到片元的距离
float disPointToCircle=abs(distanceToCenter-radius);//片元到圆心的距离与半径判断
//绘制圆圈，判断 片元到圆心的距离与半径 是否小于圆的宽度
if (disPointToCircle<circleWitdh)
{
green= 1.0-(disPointToCircle/circleWitdh); //如果小于圆的宽度，则证明在圆内，赋值绿色分量
}
// 旋转线，角度=负的实践*1.2
float angle = (-iTime*1.2);
// 旋转点之后，重新获取线的终点
lineEnd = rotatePoint(center,angle,lineEnd);
// 绘制线，传入参数，圆心，线的终点， 片元座标
float distPointToLine = LineToPointDistance2D(center,lineEnd,fragCoord.xy);
//如果点距离线的距离小于线的宽度
if (distPointToLine<lineWitdh)
{
// 1减去 点到线的距离/线的宽度， 当先距离线越近时，颜色越深
green = 1.0-distPointToLine/lineWitdh;
}
// float jg=center.x>390.0?1.0:0.0; //调试使用
fragColor = vec4(0.0,green,blue,1.0);
}