源碼鏈接：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);
}