루프 패턴 만들기

---

🐌 루프 패턴 만들기

float result = 0;
result = length(pos-uv)<size; // draw circle
return(result);

float result = 0;

for (int i = 0; i < nSides; i++)
{
   float angle = (i/ nSides) * 2 * 3.14;
   float2 pos = center+radius * float2(cos(angle), sin(angle));
   result + = length(pos-uv) <size; // draw circle
}

return(result);

 

 

result +=lenght(pos-uv) <size; 로 그리는 작은 원들은 각각 중심점(center)과 반지름(radius)를 더한 위치(position)에 float되고 cos(각도)와 sin(각도)를 곱해 아래와 같은 원을 그릴 수 있게 되는 것이다.

 

원의 둘레에 해당되는 한 점의 x,y 좌표를 구할 때,

 

⭐ cos을 활용하여 x값을 구하기

cos(30도) = 100 / x √3/2 = 100 / x

x = 200 / √3

 

⭐ y값은 sin을 활용하여 구하기

sin(30도) = 100 / y 1/2 = 100 / y

y = 50

 

---

 

🐌 각도 변수를 구하는 식에 대한 단계 별 분석

 

float angle = (i/ nSides) * 2 * 3.14;

1. 원의 각도 : 원은 360도 또는 2π 라디안으로 이루어져 있다. 여기서 π의 근사값으로 3.14를 사용한다.
2. 각 점의 분포 : 원을 그리기 위해 원주(원의 둘레) 위에 점들을 일정한 간격으로 배치해야 한다. 이 점들은 중심에서 동일한 각도만큼 떨어져야 한다.
3. 각 점의 각도 계산 : nSides는 원을 구성하는 다각형의 변 개수, 즉 점의 개수이다. 각 점 사이의 각도 간격은 전체 원의 각도 2π를 nSides로 나눈 값이다. 각 점의 각도를 계산하기 위해서는 i번째 점이 원의 몇 번째 위치에 있는 지를 알아야 한다. 여기서 i/nSides는 전체 원주를 몇 등분으로 나눌 것인지 나타낸다. 이를 2π 곱하면 해당 점의 각도가 나온다.

 

ex) nSides가 4인 경우,

(라디안 값을 도(degree) 단위로 변환하려면 라디안 값에 180/π 한다.)

 

 

nSides가 5인 경우, nSides가 5인 경우에는 72도 간격.. (5/360 =72)

 

 

 

 

 

 

 

🐌 Ref. 

https://charlezz.com/?p=46165