greentec's blog game designer, scripter, researcher

en kr

Shadertoy 'Creation' 뢄석

Tags:


β€œCreation by Silexars” by Danguafer

Β 

λ„μž…

μ˜€λŠ˜μ€ Shadertoy 의 인기 쉐이더 쀑 ν•˜λ‚˜μΈ β€˜Creation’ 을 뢄석해보렀고 ν•©λ‹ˆλ‹€. 주석을 λΉΌλ©΄ 총 19ν–‰μ˜ 짧은 μ½”λ“œμ΄μ§€λ§Œ μœ„μ˜ μ΄λ―Έμ§€μ—μ„œ 보싀 수 μžˆλ“―μ΄ λ‹¨μˆœν•˜λ‹€λŠ” λŠλ‚Œμ€ λ³„λ‘œ 듀지 μ•ŠμŠ΅λ‹ˆλ‹€.

Shadertoy 뢈 쉐이더 λΆ„μ„μ—μ„œ μ˜λ„μΉ˜ μ•Šκ²Œ 맀우 κΈ΄ 글을 썼기 λ•Œλ¬Έμ— μ΄λ²ˆμ—λŠ” μ‰¬μ–΄κ°€λŠ” μ˜λ―Έμ—μ„œ 쑰금 짧은 μ½”λ“œλ₯Ό κ³¨λžμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 이번 μ½”λ“œλŠ” 맀우 μΈκΈ°μžˆλŠ” μ½”λ“œλ‘œ, Shadertoy μ—μ„œ μ‘°νšŒμˆ˜λŠ” 13만회(전체 4μœ„), β€˜like’ λ₯Ό 받은 μˆ˜κ°€ 410회(전체 15μœ„)λ‚˜ λ©λ‹ˆλ‹€. μ΄λ ‡κ²Œ 유λͺ…ν•œ μ½”λ“œλ₯Ό λΆ„μ„ν•˜λ €λ‹ˆ κΈ΄μž₯도 μ’€ λ©λ‹ˆλ‹€. κΌΌκΌΌν•˜κ²Œ ν•œ 쀄 ν•œ 쀄 뢄석해보도둝 ν•˜κ² μŠ΅λ‹ˆλ‹€.

Β 

κΈ°λ³Έ μ½”λ“œλ“€

β€˜Creation’ 전체 μ½”λ“œ

4, 5 행은 define λΆ€λΆ„μž…λ‹ˆλ‹€. Shadertoy μ—μ„œλŠ” 같은 자주 μ“°μ΄λŠ” λ³€μˆ˜λ₯Ό μ €μž₯ν•˜κΈ° μœ„ν•΄μ„œλ„ μ“°μ΄μ§€λ§Œ μ΄λ ‡κ²Œ μ½”λ“œλ₯Ό μΆ•μ•½ν•˜κ±°λ‚˜ 더 λ‚˜μ•„κ°€μ„œ Code golf λ₯Ό ν•˜κΈ° μœ„ν•΄μ„œλ„ μ“°μž…λ‹ˆλ‹€. Code golf λž€ 같은 일을 κ°€μž₯ 짧은 길이의 μ½”λ“œλ‘œ μˆ˜ν–‰ν•˜κΈ° μœ„ν•΄ μ½”λ“œλ₯Ό μ••μΆ•ν•˜λŠ” 경쟁적인 κ²Œμž„μž…λ‹ˆλ‹€. λ‹€λ§Œ 이런 μ½”λ“œμ˜ 압좕이 λ„ˆλ¬΄ μ‹¬ν•˜λ©΄ μ½”λ“œλ₯Ό 거의 λͺ» μ•Œμ•„λ³Ό 정도가 될 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. μ—¬κΈ°μ„œλŠ” 예제 μ½”λ“œλ₯Ό μž‘μ„±ν•  λ•Œ ν’€ 수 μžˆλŠ” μ½”λ“œλŠ” 가급적 μ½”λ“œλ₯Ό ν’€μ–΄μ„œ μ‚¬μš©ν•˜λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. 일단 t λŠ” time 으둜, r 은 resolution 으둜 μ“°κ² μŠ΅λ‹ˆλ‹€.

9ν–‰μ—μ„œ z=t λ₯Ό λ„£κ³  μžˆμŠ΅λ‹ˆλ‹€. μš°λ¦¬λŠ” t λŒ€μ‹  time 을 μ“°λ©΄ λ˜κ² μŠ΅λ‹ˆλ‹€.

10ν–‰μ—μ„œλŠ” for loop λ₯Ό i=0,1,2μ—μ„œ 돌리고 μžˆμŠ΅λ‹ˆλ‹€. Shadertoy μ—μ„œ μ‚¬μš©ν•˜λŠ” GLSL 의 Fragment shader μ—μ„œλ„ λ‹€λ₯Έ λ§Žμ€ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ“€μ²˜λŸΌ for loop κ°€ κ°€λŠ₯ν•©λ‹ˆλ‹€. μ €λŠ” μ²˜μŒμ— for loop κ°€ λ˜λŠ” κ±Έ 보고 λ†€λžμŠ΅λ‹ˆλ‹€. ν”½μ…€ λ‹¨μœ„μ΄κ³  병렬 μ²˜λ¦¬λ˜λŠ” μ‰μ΄λ”λΌμ„œ 어쩐지 for loop λŠ” μ•ˆλ  것 κ°™μ•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

for loop 의 계산 κ²°κ³ΌλŠ” 18ν–‰μ—μ„œ 마무리되고, c λ°°μ—΄μ˜ 0, 1, 2 번째 μžλ¦¬μ— 각각 값을 λ„£μ–΄μ€λ‹ˆλ‹€. 20행을 살짝 보면 μ‹€μ œλ‘œ μ»¬λŸ¬κ°’μ„ λ°˜ν™˜ν•˜λŠ” fragColor μ—μ„œ vec4(c/l, t) 값을 μ‚¬μš©ν•©λ‹ˆλ‹€. 이것은 vec4(c[0]/l, c[1]/l, c[2]/l, t) 와 κ°™μŠ΅λ‹ˆλ‹€. for loop λ₯Ό 3회 돌린 μ΄μœ κ°€ RGB 컬러 값을 λ”°λ‘œ κ³„μ‚°ν•˜κΈ° μœ„ν•΄μ„œμ˜€λ‹€λŠ” 것을 μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€.

11-14 ν–‰μ—μ„œλŠ” μ§€κΈˆκΉŒμ§€ 많이 봀던 boilerplate code λ₯Ό 닀루고 μžˆμŠ΅λ‹ˆλ‹€. λ‹€λ§Œ uv 와 p λ₯Ό λ™μ‹œμ— μ •μ˜ν•˜κ³  있고, for loop μ•ˆμ—μ„œ μƒˆλ‘­κ²Œ μ •μ˜ν•˜κ³  μžˆλ‹€λŠ” 점에 μ£Όλͺ©ν•΄μ£Όμ‹œκΈ° λ°”λžλ‹ˆλ‹€. μœ„μ—μ„œ μ‚΄νŽ΄λ³Έ κ²ƒμ²˜λŸΌ for loop λŠ” RGB 채널을 λ”°λ‘œ κ³„μ‚°ν•˜κ³  있고 uv, p μ’Œν‘œλ„ λ…λ¦½μ μœΌλ‘œ κ³„μ‚°ν•˜κ²Œ λ©λ‹ˆλ‹€.

15행은 time 에 for loop λ₯Ό 돌 λ•Œλ§ˆλ‹€ .07 을 더해주고 μžˆμŠ΅λ‹ˆλ‹€. R 채널은 .07, G 채널은 .14, B 채널은 .21 이 λ”ν•΄μ§€κ²Œ λ©λ‹ˆλ‹€. ν”„λ¦¬μ¦˜μ„ 톡과할 λ•Œ 색이 μ‚°λž€λ˜λŠ” μ‹€ν—˜μ„ ν•΄λ³Έ 적이 μžˆμœΌμ‹ κ°€μš”? 이것은 μƒ‰μˆ˜μ°¨ 효과(Chromatic aberration)λΌλŠ” κ²ƒμœΌλ‘œ, 15ν–‰μ˜ μ½”λ“œλŠ” 이λ₯Ό κ°„λ‹¨ν•œ λ²„μ „μœΌλ‘œ μž¬ν˜„ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. β€˜Creation’ 의 정지 이미지λ₯Ό 보면 R, G, B κ°€ μƒ‰μˆ˜μ°¨ 효과처럼 살짝 μ°¨μ΄λ‚˜κ²Œ λ°°μ—΄λ˜λŠ” 것을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

좜처 링크

16ν–‰μ˜ length(p) λŠ” p λ²‘ν„°μ˜ 길이λ₯Ό κ³„μ‚°ν•©λ‹ˆλ‹€. distance λ‘œλ„ length λ₯Ό 계산할 수 μžˆμŠ΅λ‹ˆλ‹€. diatance λŠ” 두 점 μ‚¬μ΄μ˜ 거리λ₯Ό κ³„μ‚°ν•˜κ³ , κ±°λ¦¬λŠ” 곧 길이이기 λ•Œλ¬Έμ— length(p1 - p2) == distance(p1, p2) κ°€ λ©λ‹ˆλ‹€. μ—¬κΈ°μ„œ λ‚˜μ˜¨ length(p) λŠ” length(p - 0) == distance(p, 0) κ³Ό κ°™λ‹€κ³  생각할 수 μžˆμŠ΅λ‹ˆλ‹€. 즉 원점과 p μ‚¬μ΄μ˜ 거리, λ˜λŠ” 원점을 μ€‘μ‹¬μœΌλ‘œ ν•˜λŠ” νλ¦Ών•œ μ›μ˜ μ˜μ—­μ΄λΌκ³  말할 수 μžˆμŠ΅λ‹ˆλ‹€.

그럼 μ§€κΈˆκΉŒμ§€ μ‚΄νŽ΄λ³Έ μ½”λ“œλ“€ 쀑 ν•„μš”ν•œ κ²ƒλ§Œ λ¬Άμ–΄μ„œ κ·Έλ €λ³΄κ² μŠ΅λ‹ˆλ‹€.

μ•ˆμͺ½μ€ 검은색이고 λ°”κΉ₯μͺ½μœΌλ‘œ 갈수둝 λ°μ•„μ§€λŠ” 원이 μƒκ²ΌμŠ΅λ‹ˆλ‹€. 이 원을 step μ΄λ‚˜ floor λ₯Ό μ‚¬μš©ν•΄μ„œ 단계λ₯Ό λ‚˜νƒ€λ‚΄λ„λ‘ ν‘œν˜„ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. β€˜Creation’ 의 핡심 μ½”λ“œλŠ” 이 원을 λ³€ν™”μ‹œμΌœμ„œ μ•„λ¦„λ‹€μš΄ νŒ¨ν„΄μ„ λ§Œλ“­λ‹ˆλ‹€. κ·Έ 방법을 μ§€κΈˆ λ°”λ‘œ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

Β 

17ν–‰

17ν–‰κ³Ό 18행이 이 μ½”λ“œμ˜ ν•΅μ‹¬μž…λ‹ˆλ‹€. 이 μ½”λ“œμ˜ 원리λ₯Ό μ•Œμ•„λ‚΄λ €λ©΄ 이 두 ν–‰μ˜ κ΅¬μ„±μš”μ†Œλ₯Ό 이리저리 바꿔보닀보면 비밀이 풀릴 κ²ƒμž…λ‹ˆλ‹€. μ•„λ‹ˆλ©΄ 컀피 ν•œ μž”κ³Ό ν•¨κ»˜ 천천히 이 λΈ”λ‘œκ·Έ 포슀트λ₯Ό μ½μ–΄λ³΄λŠ” 방법도 μžˆκ² μŠ΅λ‹ˆλ‹€.

uv+=p/l*(sin(z)+1.)*abs(sin(l*9.-z*2.));

λ¨Όμ € 17ν–‰λΆ€ν„° μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€. λ¨Όμ € λˆˆμ— λ„λŠ” 것은 μ•„κ»΄λ’€λ˜ uv λ₯Ό λ“œλ””μ–΄ μ‚¬μš©ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. uv λŠ” 12ν–‰μ—μ„œ p 의 값을 λ³΅μ‚¬ν–ˆκ³  κ·Έ λ’€μ—λŠ” p 만 κ³„μ‚°ν•˜λ‹€κ°€, λ“œλ””μ–΄ uv λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. uv λŠ” 0.0~1.0 μ‚¬μ΄μ˜ 값을 가지고 μžˆμŠ΅λ‹ˆλ‹€.

여기에 p/l, sin(z)+1., abs(sin(l*9.-z*2.)) λ₯Ό μ„œλ‘œ κ³±ν•΄μ„œ λ”ν•΄μ€λ‹ˆλ‹€. λ³΅μž‘ν•΄ λ³΄μ΄μ§€λ§Œ ν•˜λ‚˜μ”© μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

첫번째 ν•­λΆ€ν„° μ‚΄νŽ΄λ³΄λ©΄ p/l μž…λ‹ˆλ‹€. p λŠ” -0.5~0.5 μ‚¬μ΄μ˜ κ°’μœΌλ‘œ, κ°€μš΄λ°κ°€ (0,0) 으둜 κ°€μž₯ μž‘μ€ xy 값을 κ°€μ§‘λ‹ˆλ‹€. 이것을 l 둜 λ‚˜λˆ μ€λ‹ˆλ‹€. l 은 μœ„μ—μ„œ 봀던 κ°€μš΄λ°κ°€ 검은색인 μ›μž…λ‹ˆλ‹€. κ²€λ‹€λŠ” 것은 값이 μž‘λ‹€λŠ” λœ»μž…λ‹ˆλ‹€. λ”°λΌμ„œ 이 원은 λΆ„λͺ¨κ°€ κ°€μž₯ μž‘κΈ° λ•Œλ¬Έμ— κ°€μš΄λ°κ°€ κ°€μž₯ 큰 값을 κ°€μ§ˆ 것이라고 μΆ”μΈ‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

그럼 ν•œλ²ˆ κ·Έλ €λ³΄κ² μŠ΅λ‹ˆλ‹€.

12ν–‰μ—μ„œλŠ” p/l 의 κ²°κ³Όλ₯Ό 일단 κ·Έλ €μ€λ‹ˆλ‹€. p κ°€ vec2 이기 λ•Œλ¬Έμ— μ΅œμ’… μ»¬λŸ¬μ— λ“€μ–΄κ°€λŠ” 4개의 벑터 쀑 R, G 채널을 μ°¨μ§€ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. μ˜ˆμΈ‘λŒ€λ‘œ κ°€μš΄λ°μ—μ„œ κ°€μž₯ 큰 값을 보여주고 있기 λ•Œλ¬Έμ— 색상이 제일 λšœλ ·ν•©λ‹ˆλ‹€.

그런데 원점을 μ€‘μ‹¬μœΌλ‘œ x+ λ°©ν–₯κ³Ό y+ λ°©ν–₯의 색상은 맀우 λšœλ ·ν•΄μ„œ 거의 1에 κ°€κΉŒμš΄ 값이 λ‚˜μ˜€λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. 이λ₯Ό ν™•μΈν•˜κΈ° μœ„ν•΄ 13ν–‰μ˜ 주석을 ν•΄μ œν•΄λ³΄λ©΄, μ‹€μ œλ‘œ p/l 의 x λŠ” 이고 인 κ΅¬κ°„μ—μ„œ 1.0 에 κ°€κΉŒμš΄ 큰 값을 κ°–μŠ΅λ‹ˆλ‹€. μ €λŠ” μ²˜μŒμ—λŠ” 이 뢀뢄이 잘 이해가 μ•ˆλμŠ΅λ‹ˆλ‹€λ§Œ, 사싀 l=length(p) 이기 λ•Œλ¬Έμ— l은 p.y=0 일 λ•Œ p.x 와 같은 값이 되기 λ•Œλ¬Έμ— 1.0 이 λ˜λŠ” 게 λ§žμŠ΅λ‹ˆλ‹€. () 그리고 p.y κ°€ μ•„μ£Ό μž‘μ€ 값이 λ˜λŠ” x+ μΆ• μ£Όλ³€μ—μ„œ μ—¬μ „νžˆ 1에 κ°€κΉŒμš΄ 값을 κ°–μŠ΅λ‹ˆλ‹€.

14ν–‰μ˜ 주석을 ν•΄μ œν•΄λ³΄λ©΄ 이 사싀을 μ§κ΄€μ μœΌλ‘œ μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€. x+, y+ μΆ•μ—μ„œ p/l 은 0.999 μ΄μƒμ˜ 값을 κ°–μŠ΅λ‹ˆλ‹€.

15행은 μ‹€μ œλ‘œ uv 에 p/l 을 λ”ν•˜λ©΄ μ–΄λ–€ 값이 λ˜λŠ”μ§€λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€. 16ν–‰μ˜ 주석을 ν•΄μ œν•˜λ©΄ 1에 κ°€κΉŒμš΄ 값이 μ–΄λ–€ λ²”μœ„μ— μžˆλŠ”μ§€λ₯Ό μ’€ 더 μ§κ΄€μ μœΌλ‘œ νŒŒμ•…ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

그럼 λ‘λ²ˆμ§Έ 항인 sin(z)+1. λ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€. z λŠ” time 이고, R,G,B 채널에 각각 .07, .14, .21 의 값을 λ”ν•΄μ€˜μ„œ μƒ‰μˆ˜μ°¨ 효과λ₯Ό λ‚Έλ‹€κ³  μ•žμ—μ„œ μ„€λͺ…λ“œλ ΈμŠ΅λ‹ˆλ‹€. sin 은 μ–΄λ–€ μž…λ ₯이 λ“€μ–΄κ°€λ“  -1.0~1.0 의 값을 좜λ ₯ν•˜κ³ , 여기에 1을 λ”ν•˜λ©΄ 0.0~2.0 의 값을 좜λ ₯ν•©λ‹ˆλ‹€.

일단 μƒ‰μˆ˜μ°¨ νš¨κ³ΌλŠ” λ‚˜μ€‘μ— 넣도둝 ν•˜κ³ , μ§€κΈˆμ€ sin(time)+1. 을 p/l 에 κ³±ν•œ λ‹€μŒ uv 에 λ”ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

time 이 λ“€μ–΄κ°€μž 역동적인 λ³€ν™”κ°€ μƒκ²ΌμŠ΅λ‹ˆλ‹€. p/l 은 0λ°°μ—μ„œ 2λ°°κΉŒμ§€ uv 에 λ”ν•΄μ§‘λ‹ˆλ‹€. 이 뢀뢄은 λ‹¨μˆœν•΄μ„œ μ„€λͺ…ν•  것이 λ³„λ‘œ μ—†μ–΄ λ³΄μž…λ‹ˆλ‹€.

μ„Έλ²ˆμ§Έ 항은 abs(sin(l*9.-z*2.)) μž…λ‹ˆλ‹€. 이것도 z λ₯Ό time 으둜 μΉ˜ν™˜ν•˜μ—¬ κ³„μ‚°ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. 식이 λ³΅μž‘ν•˜λ‹ˆ ν•˜λ‚˜μ”© ν’€μ–΄μ„œ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€.

일단 length(p)*9. 값을 RGB 채널에 λͺ¨λ‘ 넣어보면 μ•„μ£Ό μž‘μ€ 검은색 원이 μƒκΈ°λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. μ²˜μŒμ— length(p) 값을 RGB 채널에 λ„£μ—ˆμ„ λ•Œλ³΄λ‹€ 원이 훨씬 μž‘μ•„μ‘ŒμŠ΅λ‹ˆλ‹€. μž‘μ€ 값은 거의 사라지고 λŒ€λΆ€λΆ„ 큰 값이 된 κ²ƒμž…λ‹ˆλ‹€.

13 ν–‰μ˜ 주석을 ν•΄μ œν•΄λ³΄λ©΄, 검은 ν™”λ©΄λ§Œ λ³΄μ΄λŠ” 것을 μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€. μ‹œκ°„μ€ λΉ λ₯΄κ²Œ μ¦κ°€ν•˜λŠ” 값이기 λ•Œλ¬Έμ— l 값은 μˆœμ‹κ°„μ— μŒμˆ˜κ°€ λ˜μ–΄μ„œ κ²€μ€μƒ‰λ§Œ λ³΄μ΄λŠ” κ²ƒμž…λ‹ˆλ‹€. 그럼 여기에 sin 을 μ”Œμš΄ 14ν–‰μ˜ 주석을 ν•΄μ œν•΄λ³΄λ©΄ μ–΄λ–¨κΉŒμš”?

μ‹ κΈ°ν•˜κ²Œλ„ μ›μ μ—μ„œ λ°”κΉ₯으둜 λ»—μ–΄λ‚˜κ°€λŠ” λ””μŠ€ν¬ νŒ¨ν„΄ 이 λ‚˜μ˜΅λ‹ˆλ‹€. λ°˜λŒ€λ‘œ -time * 2. λŒ€μ‹  +time * 2. λ₯Ό 넣어보면 μ›μ μœΌλ‘œ λ“€μ–΄κ°€λŠ” λ””μŠ€ν¬ νŒ¨ν„΄μ΄ λ‚˜μ˜΅λ‹ˆλ‹€. β€˜Creation’ μ—μ„œ λ³Ό 수 μžˆλŠ” μ›μ μ—μ„œ 끝없이 λ»—μ–΄λ‚˜κ°€λŠ” λ“―ν•œ λŠλ‚Œμ˜ νŒ¨ν„΄μ€ λ°”λ‘œ 이 μ‹μ—μ„œ λΉ„λ‘―λ©λ‹ˆλ‹€.

length(p) 뒀에 κ³±ν•΄μ§€λŠ” 9 λ₯Ό λ‹€λ₯Έ κ°’μœΌλ‘œ λ³€ν™”μ‹œν‚€λ©΄ 각 λ””μŠ€ν¬μ˜ κ΅΅κΈ°λ₯Ό μ‘°μ ˆν•  수 μžˆμŠ΅λ‹ˆλ‹€. κ΅΅κΈ°κ°€ 얇아지면 속도가 λŠλ €μ§€κ³ , ꡡ어지면 속도가 λΉ¨λΌμ§‘λ‹ˆλ‹€. -time 에 κ³±ν•΄μ§€λŠ” 2 도 속도에 κ΄€κ³„λ˜λŠ” λ³€μˆ˜μž…λ‹ˆλ‹€. μˆ«μžκ°€ 컀질수둝 속도가 λΉ¨λΌμ§‘λ‹ˆλ‹€. 60 μ •λ„λ‘œ λ†“μœΌλ©΄ μ‹Έμ΄ν‚€λΈλ¦­ν•œ λΆ„μœ„κΈ°μ˜ 화면을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

15행은 이 식에 abs λ₯Ό μ”Œμ›Œμ„œ λ²”μœ„λ₯Ό 0.0~1.0 으둜 λ°”κΎΌ κ²ƒμž…λ‹ˆλ‹€. λ§μ—μ„œ μ–΄λ‘μ› λ˜ 뢀뢄은 얇아지고 밝은 뢀뢄이 λŠ˜μ–΄λ‚œ 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

이제 17ν–‰μ—μ„œ 이 μ„Έ 개의 항을 λͺ¨λ‘ κ³±ν•œ λ‹€μŒμ— uv 에 λ”ν•΄μ€λ‹ˆλ‹€. 주석을 ν•΄μ œν•˜λ©΄, μ›μ μ—μ„œλΆ€ν„° λ°”κΉ₯μͺ½μœΌλ‘œ νΌμ Έλ‚˜κ°€λŠ” 물결이 λ‚˜νƒ€λ‚¬λ‹€κ°€ μ‚¬λΌμ§€λŠ” 것을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. (μ°Έκ³  : 17ν–‰μ—μ„œλŠ” μ•žμ—μ„œ 썼던 l λŒ€μ‹ μ— length(p) λ₯Ό μ¨μ„œ λ³€μˆ˜κ°€ μ˜€μ—Όλ˜μ§€ μ•Šλ„λ‘ ν–ˆμŠ΅λ‹ˆλ‹€.) μ΄κ²ƒλ§ŒμœΌλ‘œλ„ 멋진 것 κ°™μŠ΅λ‹ˆλ‹€λ§Œ, 이제 μ›λž˜ μ½”λ“œμ˜ 18행에 μ–½ν˜€ μžˆλŠ” λ§ˆμ§€λ§‰ 비밀을 ν’€μ–΄μ„œ 이 μ½”λ“œμ˜ 원리λ₯Ό μ˜¨μ „νžˆ 우리의 κ²ƒμœΌλ‘œ λ§Œλ“€μ–΄λ³Ό μ°¨λ‘€κ°€ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

λ§ˆμ§€λ§‰ 주석을 ν•΄μ œν•˜λ©΄ 이런 λͺ¨μŠ΅μ΄ λ©λ‹ˆλ‹€.

Β 

18ν–‰

μ—­μ‹œ 여기도 λ³΅μž‘ν•©λ‹ˆλ‹€.

c[i]=.01/length(abs(mod(uv,1.)-.5));

μ—­μ‹œ ν•˜λ‚˜μ”© ν’€μ–΄λ³΄κ² μŠ΅λ‹ˆλ‹€. 일단 λ“œλ””μ–΄ c 배열에 값을 λ„£κ³  있기 λ•Œλ¬Έμ— λ―Έλ€„λ’€λ˜ for loop λ₯Ό κ΅¬ν˜„ν•΄μ•Ό ν•  것 κ°™μŠ΅λ‹ˆλ‹€. 그리고 μ•ˆμͺ½λΆ€ν„° 듀여닀보면, mod(uv, 1.) 이 λ³΄μž…λ‹ˆλ‹€.

mod(a, b) λŠ” a λ₯Ό b 둜 λ‚˜λˆˆ λ‚˜λ¨Έμ§€μž…λ‹ˆλ‹€. b κ°€ 1 일 λ•Œ, μ •μˆ˜λΌλ©΄ mod 값은 λ‹Ήμ—°νžˆ 0μ΄κ² μ§€λ§Œ, 쉐이더가 λ‹€λ£¨λŠ” μ‹€μˆ˜μ—μ„œλŠ” μ†Œμˆ˜μ μ„ λ‚˜νƒ€λƒ…λ‹ˆλ‹€. 이것은 μœ μ‚¬ λžœλ€κ°’μ„ 계산할 λ•Œ 봀던 fract λ₯Ό μƒκ°λ‚˜κ²Œ ν•©λ‹ˆλ‹€. 사싀 mod(x, 1.) 은 fract(x) 와 λ™μΌν•©λ‹ˆλ‹€. μœ„μ˜ κ·Έλž˜ν”„μ—μ„œ 2ν–‰μ˜ 주석을 ν•΄μ œν•΄μ„œ 두 식이 같은 값인 것을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

그리고 μ—¬κΈ°μ„œ -.5 λ₯Ό ν•΄μ£Όλ©΄, λ²”μœ„λŠ” -0.5~0.5 κ°€ 될 것이고, abs 연산을 ν•΄μ£Όλ©΄ 0.0~0.5 κ°€ 될 κ²ƒμž…λ‹ˆλ‹€. 3, 4 ν–‰μ˜ 주석을 ν•΄μ œν•΄μ„œ 이 연산을 λ”°λΌκ°ˆ 수 μžˆμŠ΅λ‹ˆλ‹€. 4ν–‰κΉŒμ§€ 였면 κ·Έλž˜ν”„λŠ” μ‚μ£½μ‚μ£½ν•œ μ‚Όκ°ν˜•μ΄ λ°˜λ³΅λ˜λŠ” μ‚° λͺ¨μ–‘이 λ©λ‹ˆλ‹€.

μ›λž˜ 값이 uv μ΄λ―€λ‘œ 아무 것도 μ—†λŠ” uv 에 이런 연산을 ν•˜λ©΄ μ–΄λ–€ λͺ¨μŠ΅μ΄ λ˜λŠ”μ§€ μ‰μ΄λ”λ‘œλ„ κ·Έλ €λ³΄κ² μŠ΅λ‹ˆλ‹€.

R, G 채널에 abs(mod(uv,1.)-.5) λ₯Ό λ„£μœΌλ©΄ μ•ˆμͺ½μ€ μ–΄λ‘‘κ³  λ°”κΉ₯μͺ½μœΌλ‘œ 갈수둝 λ°μ•„μ§€λŠ” ν˜•νƒœμ˜ 화면을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. μ›λž˜ uv 의 λ²”μœ„λŠ” 0.0~1.0 이기 λ•Œλ¬Έμ— μœ„μ˜ κ·Έλž˜ν”„μ—μ„œ 값이 0.5 μ—μ„œ μ‹œμž‘ν•΄μ„œ 0으둜 κ°”λ‹€κ°€ λ‹€μ‹œ 0.5 둜 κ°€λŠ” 것을 ν™•μΈν–ˆλ‹€λ©΄, 화면에 색이 μ΄λ ‡κ²Œ λ°°μΉ˜λ˜λŠ” 것을 μ΄ν•΄ν•˜μ‹€ 수 μžˆμ„ κ²ƒμž…λ‹ˆλ‹€.

κ·Έ λ‹€μŒ 13ν–‰μ˜ 주석을 ν•΄μ œν•΄λ³΄λ©΄, ν™”λ©΄ 크기에 따라 μ•½κ°„ μ˜†μœΌλ‘œ 눌린 검은색 원이 ν˜•μ„±λ˜λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. 이것은 uv μ—λŠ” p μ™€λŠ” 달리 ν™”λ©΄ λΉ„μœ¨μ— λŒ€ν•œ 처리(resolution.x/resolution.y λ₯Ό κ³±ν•΄μ£ΌλŠ” 것)λ₯Ό 해주지 μ•Šμ•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. 이런 λΆˆκ· ν˜•ν•¨μ΄ β€˜Creation’ 의 μ• λ‹ˆλ©”μ΄μ…˜ 쀑간에 μ•½κ°„ 눌린 타원이 λ“±μž₯ν•˜κ²Œ ν•˜μ—¬ μ‹œκ°μ  풍뢀함을 λ”ν•΄μ€λ‹ˆλ‹€.

14ν–‰μ˜ 주석을 ν•΄μ œν•΄λ³΄λ©΄ μ•„μ£Ό μž‘μ€ 뢉은 원을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. 기쑴의 값을 μ—­μˆ˜λ‘œ κ³±ν•΄μ£Όκ³  μ•„μ£Ό μž‘μ€ 값인 .01 만 λΆ„μžμ— 남겼기 λ•Œλ¬Έμ— 0보닀 μ»€μ„œ λˆˆμ— λ³΄μ΄λŠ” κ°’μ˜ 면적은 맀우 μž‘μ•„μ‘ŒμŠ΅λ‹ˆλ‹€.

이제 μ§€κΈˆκΉŒμ§€ λͺ¨μ€ μ •λ³΄λ‘œ 18 행이 μ–΄λ–€ μ˜λ―ΈμΈμ§€ ν•΄μ„ν•΄λ³΄μžλ©΄ μ•„μ£Ό 쒁은 타원 μ˜μ—­μ„ λ§Œλ“œλŠ” κ²ƒμž…λ‹ˆλ‹€. ν•˜μ§€λ§Œ 이 쒁은 타원 μ˜μ—­μ€ 17ν–‰μ—μ„œ λ°›λŠ” uv λ₯Ό 기반으둜 ν•˜κΈ° λ•Œλ¬Έμ— λ””μŠ€ν¬ ν˜•νƒœλ‘œ μ›μ μ—μ„œ λ°”κΉ₯μͺ½μœΌλ‘œ 퍼질 수 μžˆμŠ΅λ‹ˆλ‹€. 그럼 이제 λ§ˆμ§€λ§‰μœΌλ‘œ 17, 18 행을 μ‘°ν•©ν•˜λ©΄ β€˜Creation’ 이 μž¬ν˜„λ  κ²ƒμž…λ‹ˆλ‹€.

일단 for loop λ₯Ό κ±°μ³μ„œ time 에 .07 μ”© 더해쀀 후에 c[i]=uv.x; 둜 uv 쀑 ν•˜λ‚˜μ˜ κ°’λ§Œ λ„£μ–΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€. μ•žμ—μ„œ μ„€λͺ…λ“œλ Έλ˜ μƒ‰μˆ˜μ°¨ νš¨κ³Όκ°€ ν¬λ―Έν•˜κ²Œ λ³΄μ΄λŠ” 것을 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. μƒ‰μˆ˜μ°¨ νš¨κ³ΌλŠ” 특히 물결이 μ»€μ§€λ©΄μ„œ μž¦μ•„λ“€κΈ° μ‹œμž‘ν•  λ•Œ κ°€μž₯ 잘 λ³΄μž…λ‹ˆλ‹€.

초기 μ„ΈνŒ…(18, 21ν–‰ 주석)

21ν–‰μ˜ 주석을 ν•΄μ œν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. 20행은 c 값을 RGB 채널에 κ·ΈλŒ€λ‘œ λ„£μ–΄μ£Όκ³  μžˆμ§€λ§Œ, β€˜Creation’ μ—λŠ” 21ν–‰μ²˜λŸΌ λ§ˆμ§€λ§‰μ— c/l 을 λ„£μ–΄μ€λ‹ˆλ‹€. l=length(p) 둜 λ°”κΉ₯μͺ½μœΌλ‘œ 갈수둝 큰 값이기 λ•Œλ¬Έμ—, μ΄κ²ƒμœΌλ‘œ c λ₯Ό λ‚˜λˆ μ£Όλ©΄ μ΄λ―Έμ§€μ˜ νλ¦Ών•œ 뢀뢄이 사라지고 constrast κ°€ λšœλ ·ν•΄μ§€λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. 그리고 μƒ‰μˆ˜μ°¨ νš¨κ³Όλ„ 더 μ§„ν•΄μ§‘λ‹ˆλ‹€.

21ν–‰ 주석 ν•΄μ œ(18ν–‰ 주석)

λ‹€μ‹œ 21행을 μ£Όμ„μ²˜λ¦¬ν•˜κ³ , 18ν–‰μ˜ 주석을 ν•΄μ œν•΄λ³΄λ©΄ μƒ‰μˆ˜μ°¨ 효과λ₯Ό λ‚˜νƒ€λ‚΄λŠ” RGB 의 μž‘μ€ 점듀이 μ›μ μ—μ„œ λ°”κΉ₯μͺ½μœΌλ‘œ νΌμ Έλ‚˜κ°€λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. 18행은 μ•žμ„œ λ³΄μ—¬λ“œλ¦° κ²ƒμ²˜λŸΌ 이미지λ₯Ό μž‘μ€ νƒ€μ›μœΌλ‘œ λͺ¨μ•„μ£ΌλŠ” 효과λ₯Ό κ°–μ§€λ§Œ, 18행을 κ³„μ‚°ν•˜λŠ” uv λŠ” time 을 기반으둜 ν•˜λŠ” z 값에 μ˜ν•΄ λ³€ν•˜κΈ° λ•Œλ¬Έμ— μ—­μ‹œ λ°”κΉ₯μͺ½μœΌλ‘œ νΌμ§€κ²Œ λ©λ‹ˆλ‹€.

18ν–‰ 주석 ν•΄μ œ(21ν–‰ 주석)

이제 λ§ˆμ§€λ§‰μœΌλ‘œ 21ν–‰μ˜ 주석도 ν•΄μ œν•˜λ©΄, μž‘μ•˜λ˜ 점듀이 μ»€μ§€λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. l 은 원점 μ£Όλ³€μ—μ„œ 맀우 μž‘μ€ 값이기 λ•Œλ¬Έμ— 이 κ°’μœΌλ‘œ λ‚˜λˆˆ 값은 μ»€μ§€κ²Œ λ©λ‹ˆλ‹€. λ”°λΌμ„œ 전체적인 κ΄‘μ μ˜ 크기가 컀지고 λ””ν…ŒμΌμ΄ μ‚΄μ•„λ‚˜κ²Œ λ©λ‹ˆλ‹€.

λͺ¨λ“  주석 ν•΄μ œ(μ΅œμ’… 이미지)

μ΄κ²ƒμœΌλ‘œ Creation 의 뢄석을 λ§ˆμΉ˜κ² μŠ΅λ‹ˆλ‹€. λ‹€μŒμ—λ„ 멋진 이미지와 ν•¨κ»˜ λŒμ•„μ˜€κ² μŠ΅λ‹ˆλ‹€. κΈ΄ κΈ€ μ½μ–΄μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€.