取餘運算應用(2)-在glsl中

取餘運算應用(2)-在glsl中

初始化,根據到圓心的距離繪製一個圓

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
   
   
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float l = length(uv);
	fragColor = vec4(vec3(l),1.);
}

一、mod(x,1)

只改變mod(x,y) 的x,y 始終等於1

1、情況1,對1取餘

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
   
   
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);

	float f = mod(len, 1.);
	fragColor = vec4(vec3(f),1.);
}

分析:
len的範圍是 0~0.5+, 對1取模後被限制到0~1之間,但是len本身就是這個範圍,所以len值保持不變。

2、情況2,擴大2倍,不取餘

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
   
   
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
	fragColor = vec4(vec3(len*2.),1.);
}

分析:
len的範圍是: 0~1+,在半徑0.5上,len=1;大於半徑0.5,len>1;小於半徑0.5,len<1;

3、情況3,擴大2倍,對1取餘

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
   
   
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
  float f = mod(len*2., 1.);
	fragColor = vec4(vec3(f),1.);
}

分析:
len*2的範圍是: 0~1+,大於1的部分限制成0了,所以大於半徑0.5外面的部分就都是黑色的了。

4、情況4,擴大4倍,對1取餘

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
   
   
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
  float f = mod(len*4., 1.);
	fragColor = vec4(vec3(f),1.);
}

分析:
len*5的範圍是: 0~2+,所以重複了2次: 0~1,1~2

二、mod(x,y)

改變y.

1、情況1,對0.5取餘

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
   
   
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
  float f = mod(len, 0.5);
	fragColor = vec4(vec3(f),1.);
}

分析:
len的範圍是 0~0.5, 對0.5取模後被限制到0~0.5之間,但是len本身就是這個範圍,所以len值保持不變。大於0.5的部分變成0。

2、情況2,擴大2倍,對0.5取餘

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
   
   
  vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
  float len = length(uv);
  float f = mod(len*2.0, 0.5);
	fragColor = vec4(vec3(f),1.);
}