mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-11 13:10:57 +00:00
Merge pull request #349 from rlawns324/master
[Korean Translation] Update Chapter 08, 09, 10
This commit is contained in:
Patricio Gonzalez Vivo
GitHub
commit
710b1d5a5f
113
08/README-kr.md
Normal file
113
08/README-kr.md
Normal file
@ -0,0 +1,113 @@
|
||||
## 2차원 행렬
|
||||
|
||||
<canvas id="custom" class="canvas" data-fragment-url="matrix.frag" width="700px" height="200px"></canvas>
|
||||
|
||||
### 이동
|
||||
|
||||
앞 장에서는 도형을 만드는 방법에 대해 배웠다 - 도형을 움직이는 기법은 좌표계 자체를 움직이는 것이다.
|
||||
간단하게, 각 픽셀의 위치를 나타내는 `st` 변수에 벡터를 더하면 이를 달성할 수 있다.
|
||||
이로 인해 전체 공간 좌표계가 이동하게 된다.
|
||||
|
||||
|
||||
|
||||
백문이 불여일견, 직접 봐보자:
|
||||
|
||||
* 공간 자체가 어떻게 움직이는지 보려면 아래 코드의 35번째 줄의 주석을 해제하라.
|
||||
|
||||
<div class="codeAndCanvas" data="cross-translate.frag"></div>
|
||||
|
||||
이제, 다음 연습을 해보시오:
|
||||
|
||||
* `u_time`을 쉐이핑 함수와 함께 사용하면 작은 십자 모양이 흥미로운 방식으로 이동한다. 관심 있는 특정 움직임을 조사해보고, 십자 모양을 그것와 똑같이 움직이도록 시도해보자.
|
||||
우선, "실제 세계"에서 무언가를 기록하는 것이 도움이 될 수 있다 - 파도가 오고 가는 것, 진자의 움직임, 튀는 공, 가속하는 자동차, 정지중인 자전거 등
|
||||
|
||||
### 회전
|
||||
|
||||
물체를 회전하려면 이동과 마찬가지로 전체 공간을 이해할 필요가 있다. 이를 위해 [행렬](https://ko.wikipedia.org/wiki/%ED%96%89%EB%A0%AC)를 사용할 것이다.
|
||||
행렬은 열과 행으로 구성된 숫자 집합이다.
|
||||
벡터의 값을 수정하기 위해서는 정확한 규칙을 따르는 행렬을 특정 방법으로 곱해야 한다.
|
||||
|
||||
[](https://en.wikipedia.org/wiki/Matrix)
|
||||
|
||||
GLSL은 자체적으로 2,3,4차원 행렬 자료형을 지원한다: [`mat2`](../glossary/?search=mat2) (2x2), [`mat3`](../glossary/?search=mat3) (3x3), [`mat4`](../glossary/?search=mat4) (4x4).
|
||||
또한, GLSL은 행렬 곱셈(`*`)을 지원하고 행렬의 성분별 곱셈 함수 ([```matrixCompMult()```](../glossary/?search=matrixCompMult))도 지원한다.
|
||||
|
||||
행렬의 특성에 의해, 특정 기능을 수행하기 위한 행렬을 구성할 수 있다.
|
||||
예를 들어, 행렬을 사용하여 벡터를 이동할 수 있다:
|
||||
|
||||
|
||||
|
||||
더욱 흥미로운 것은, 행렬을 사용하여 좌표계를 회전할 수 있다는 점이다.
|
||||
|
||||
|
||||
|
||||
다음은 2D 회전행렬을 구성하는 함수에 대한 코드이다.
|
||||
이 함수는 `vec2(0.0)` 지점 주변에서 좌표를 회전하기 위해 다음 [공식](https://ko.wikipedia.org/wiki/%ED%9A%8C%EC%A0%84%EB%B3%80%ED%99%98%ED%96%89%EB%A0%AC)을 따른다.
|
||||
|
||||
```glsl
|
||||
mat2 rotate2d(float _angle){
|
||||
return mat2(cos(_angle),-sin(_angle),
|
||||
sin(_angle),cos(_angle));
|
||||
}
|
||||
```
|
||||
|
||||
여태 배워왔던 도형을 그리는 방식에 따르면, 이것은 정확히 우리가 원하는 것은 아니다. 십자 모양은 캔버스의 중앙에 그려져 있는데, 이는 `vec2(0.5)` 위치에 해당한다. 그렇기 때문에, 공간을 회전하기 전에 도형을 `중심`에서 `vec2(0.0)` 좌표로 이동시킨 후, 공간을 회전하고, 최종적으로 다시 원래 위치로 이동해야 한다.
|
||||
|
||||
|
||||
|
||||
그것은 다음 코드와 같다:
|
||||
|
||||
<div class="codeAndCanvas" data="cross-rotate.frag"></div>
|
||||
|
||||
다음 연습을 해보시오:
|
||||
|
||||
* 위 코드의 45번째 줄의 주석을 해제하고 무슨 일이 일어나는지 보아라.
|
||||
|
||||
* 37, 39번째 줄의 주석 처리를 해보며 회전 전후의 이동에 대해 관찰해 보아라.
|
||||
|
||||
* 이동 예제에서 시뮬레이션한 애니메이션을 회전을 사용하여 개선해보아라.
|
||||
|
||||
### 크기
|
||||
|
||||
공간에서 물체를 이동하고 회전하는데에 행렬이 어떻게 사용되는지 배웠다. (더 정확하게는, 좌표계를 변환하여 물체를 회전시키고 이동시키기 위해). 3D 모델링 소프트웨어나 Processing에서 push 및 pop 행렬 함수를 사용해보면, 행렬이 물체의 크기를 조정하는데에도 사용된다는것을 알게 될 것이다.
|
||||
|
||||
|
||||
|
||||
위 공식에 의해, 다음과 같이 2차원 크기변환 행렬을 만들 수 있다:
|
||||
|
||||
```glsl
|
||||
mat2 scale(vec2 _scale){
|
||||
return mat2(_scale.x,0.0,
|
||||
0.0,_scale.y);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="codeAndCanvas" data="cross-scale.frag"></div>
|
||||
|
||||
이것이 어떻게 작동하는지 더 깊이 이해하기 위해 다음 연습을 해보시오.
|
||||
|
||||
* 공간 좌표계의 크기변환을 보기위해 42번째 줄의 주석을 해제해보시오.
|
||||
|
||||
* 37,39번째 줄에 크기변환 전후로 이동하는 부분을 주석처리 하면 무슨일이 일어나는지 보아라.
|
||||
|
||||
* 회전행렬을 크기변환행렬과 함께 사용해 보시오. 순서에 주의할 것.
|
||||
행렬을 먼저 곱한 다음 벡터를 곱하시오.
|
||||
|
||||
* 이제 여러분은 다양한 모양을 그릴 수 있고, 움직이고, 회전하고, 크기를 조정할 수 있는 방법을 알았으니, 멋진 구성을 만들 때이다. [가짜 UI 또는 HUD(헤드업 디스플레이)](https://www.pinterest.com/patriciogonzv/huds/)를 설계하고 구현해보아라.
|
||||
[Ndel](https://www.shadertoy.com/user/ndel)의 다음 ShaderToy 예제를 통해 영감을 얻고 참조할 수 있다.
|
||||
|
||||
<iframe width="800" height="450" frameborder="0" src="https://www.shadertoy.com/embed/4s2SRt?gui=true&t=10&paused=true" allowfullscreen></iframe>
|
||||
|
||||
### 행렬의 기타 용도: YUV 색상
|
||||
|
||||
[YUV](http://ko.wikipedia.org/wiki/YUV)는 크로미넌스 구성 요소의 대역폭을 줄이기 위해 인간의 인식 범위를 고려한 사진과 비디오의 아날로그 인코딩에 사용되는 색 공간이다.
|
||||
|
||||
다음 코드는 GLSL에서 행렬 연산을 사용하여 한 모드에서 다른 모드로 색상을 변환하는 흥미로운 코드이다.
|
||||
|
||||
<div class="codeAndCanvas" data="yuv.frag"></div>
|
||||
|
||||
보다시피, 색을 행렬과 곱함으로써 벡터로 취급하고 있다.
|
||||
우리는 이런식으로 값들을 이리저리 "옮긴다".
|
||||
|
||||
이 장에서는 행렬 변환을 사용하여 벡터를 이동, 회전 및 확장하는 방법에 대해 알아보았다. 이러한 변환은 이전 장에서 배운 도형들을 사용하여 다양한 구성을 만드는 데 필수적이다. 다음 챕터에서는 지금까지 배운 모든 것을 이용하여 아름다운 절차적 패턴을 만들어 볼 것이다.
|
||||
반복코딩과 응용이 흥미로운 연습이 될 수 있다는 것을 알게 될 것이다.
|
||||
128
09/README-kr.md
Normal file
128
09/README-kr.md
Normal file
@ -0,0 +1,128 @@
|
||||
## 패턴
|
||||
|
||||
쉐이더 프로그램은 픽셀 단위로 실행되므로, 도형을 반복과 무관하게 연산 횟수는 일정하게 유지된다.
|
||||
이는 프래그먼트쉐이더가 타일 패턴에 특히 적합하다는 것을 의미한다.
|
||||
|
||||
[  ](../edit.php#09/dots5.frag)
|
||||
|
||||
이 챕터에서는 지금까지 배운 내용을 캔버스에 반복하며 연습해볼것이다.
|
||||
이전 장과 마찬가지로, 우리의 전략은 공간 좌표(0.0과 1.0 사이)에 곱하는 것을 기초로 할 것이며, 따라서 0.0과 1.0 사이에 반복된 도형이 그려져 그리드를 만들 것이다.
|
||||
|
||||
*"격자망은 인간의 직관과 발명이 작동하고 전복될 수 있는 프레임워크를 제공한다. 패턴은 자연의 혼돈 속에서 대비와 질서의 약속을 제공한다. 초기 도기 무늬부터 로마 목욕탕의 기하학 모자이크까지, 사람들은 삶의 질을 향상시키기 위해 오랫동안 격자망을 장식품으로 사용해 왔다."* [*10 PRINT*, Mit Press, (2013)](http://10print.org/)
|
||||
|
||||
먼저 [`fract()`](../glossary/?search=fract) 함수를 기억해보자.
|
||||
이 함수는 숫자의 소수 부분을 반환하여 본질적으로 `fract()`를 1의 나머지 연산([`mod(x,1.0)`](../glossary/?search=mod))으로 만든다.
|
||||
즉, [`fract()`](../glossary/?search=fract)는 부동 소수점 뒤에 있는 숫자를 반환한다. 우리의 정규화된 좌표계 변수(`st`)는 이미 0.0에서 1.0으로 바뀌어 다음과 같은 작업을 하는 것은 말이 되지 않는다.
|
||||
|
||||
```glsl
|
||||
void main(){
|
||||
vec2 st = gl_FragCoord.xy/u_resolution;
|
||||
vec3 color = vec3(0.0);
|
||||
st = fract(st);
|
||||
color = vec3(st,0.0);
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
```
|
||||
|
||||
그러나 정규화된 좌표계를 3배 확대하면 0-1 사이의 세 가지 선형 보간 시퀀스를 얻을 수 있다.
|
||||
첫 번째는 0-1 사이의 부동 소수점, 두 번째는 1-2 사이의 부동 소수점, 세 번째는 2-3 사이의 부동 소수점
|
||||
|
||||
<div class="codeAndCanvas" data="grid-making.frag"></div>
|
||||
|
||||
27번째 줄의 주석을 해제하여 각 부분 공간에 무언가를 그려보자. (x와 y에 똑같이 곱하기 때문에 공간의 가로 세로 비율은 변하지 않고 모양도 예상대로 된다.)
|
||||
|
||||
더 깊이 이해하기 위해 다음 연습 중 몇 가지를 시도해 보십시오:
|
||||
|
||||
* 공간에 다른 숫자를 곱해보아라. 부동 소수점 값과 x,y 서로 다른 값을 사용해 보시오.
|
||||
|
||||
* 이 타일링 트릭을 재사용 가능한 함수로 만드시오.
|
||||
|
||||
* 공간을 3개의 행과 3개의 열로 나눈다. 스레드가 어떤 열과 행인지 알고 이를 사용하여 표시되는 모양을 변경할 수 있는 방법을 찾는다. 틱-택-토를 만들어 보시오.
|
||||
|
||||
### 패턴에 행렬 적용하기
|
||||
|
||||
각 부분 또는 셀은 우리가 이미 사용하고 있는 표준화된 좌표계의 더 작은 버전이기 때문에, 내부 공간을 변환, 회전 또는 확장하기 위해 행렬 변환을 적용할 수 있다.
|
||||
|
||||
<div class="codeAndCanvas" data="checks.frag"></div>
|
||||
|
||||
* 이 패턴을 애니메이션화하는 흥미로운 방법들을 생각해 보시오. 애니메이션 색, 모양 및 움직임을 고려하시오. 세 개의 다른 애니메이션을 만드시오.
|
||||
|
||||
* 여러 도형을 구성하여 더욱 복잡한 패턴을 재현해보시오.
|
||||
|
||||
|
||||
[](../edit.php#09/diamondtiles.frag)
|
||||
|
||||
* 다양한 패턴 레이어를 결합하여 자신만의 [스코티쉬 타탄 패턴](https://www.google.com/search?q=scottish+patterns+fabric&tbm=isch&tbo=u&source=univ&sa=X&ei=Y1aFVfmfD9P-yQTLuYCIDA&ved=0CB4QsAQ&biw=1399&bih=799#tbm=isch&q=Scottish+Tartans+Patterns)을 구성해보아라.
|
||||
|
||||
[  ](http://graphicriver.net/item/vector-pattern-scottish-tartan/6590076)
|
||||
|
||||
### 오프셋 패턴
|
||||
|
||||
우리가 벽돌담을 흉내내기를 원한다고 가정해보자. 벽을 보면, 행마다 벽돌의 반절만큼 x의 간격 차이를 볼 수 있다.
|
||||
어떻게 만들까?
|
||||
|
||||
|
||||
|
||||
첫 단계로, 행이 짝수인지 홀수인지 알아야 한다. 그래야 그 행에서 x의 오프셋 여부를 결정할 수 있기 때문이다.
|
||||
|
||||
____우리는 다음 두 단락을 함께 수정해야 한다.____
|
||||
|
||||
행이 홀수인지 짝수인지를 판단하기 위해 `2.0`의 [`mod()`](../glossary/?search=mod)를 사용하고 그 결과가 `1.0` 이하인지 아닌지를 확인할 것이다. 다음 공식을 보고 마지막 두 줄의 주석을 해제해보시오.
|
||||
|
||||
<div class="simpleFunction" data="y = mod(x,2.0);
|
||||
// y = mod(x,2.0) < 1.0 ? 0. : 1. ;
|
||||
// y = step(1.0,mod(x,2.0));"></div>
|
||||
|
||||
보다시피 [삼항 연산자](https://ko.wikipedia.org/wiki/%3F:)를 사용하여 2.0의 `mod()` 가 1.0 미만인지(두 번째 줄) 확인할 수 있다.
|
||||
또는 이와 유사하게 동작은 같지만 속도는 더 빠른 [`step()`](../glossary/?search=step) 함수를 사용할 수 있다. 왜 그럴까? 각 그래픽 카드가 어떻게 코드를 최적화하고 컴파일하는지는 알 수 없지만 내장 함수가 비 내장 함수보다 빠르다고 가정해도 무방하다. 내장함수를 사용할 수 있을 때마다 사용하여라!
|
||||
|
||||
이제 홀수 공식이 있으므로 홀수 행에 오프셋을 적용하여 타일에 *벽돌* 효과를 부여할 수 있다. 다음 코드의 14번째 줄은 홀수 행을 "탐지"하고 `x`에 반절의 오프셋을 부여하는 함수를 사용하는 곳이다. 짝수 행의 경우, 함수의 결과는 `0.0`이고, `0.0`에 오프셋 `0.5`를 곱하면 `0.0`이 된다. 그러나 홀수 행에서 함수의 결과 `1.0`에 `0.5`만큼 오프셋을 곱하여 좌표계의 `x`축을 `0.5`로 이동시킨다.
|
||||
|
||||
이제 32번째 줄을 주석 처리해보시오. 이 경우 좌표계의 가로 세로 비율이 늘어나 "현대식 벽돌"의 면모를 흉내낼 수 있다. 40번째 줄에 주석을 달면 좌표계가 빨간색과 녹색으로 매핑되는 모습을 볼 수 있다.
|
||||
|
||||
<div class="codeAndCanvas" data="bricks.frag"></div>
|
||||
|
||||
* 오프셋을 시간에 따라 이동하여 애니메이션을 시도해 보시오.
|
||||
|
||||
* 짝수행은 왼쪽으로 이동하고 홀수행은 오른쪽으로 이동하는 애니메이션을 만들어보자.
|
||||
|
||||
* 이 효과를 행이 아닌 열에 적용해 볼수 있는가?
|
||||
|
||||
* `x`축과 `y`축의 오프셋을 조합하여 다음과 같은 값을 얻도록 한다:
|
||||
|
||||
<a href="../edit.php#09/marching_dots.frag"><canvas id="custom" class="canvas" data-fragment-url="marching_dots.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
## Truchet 타일
|
||||
|
||||
이제 셀이 짝수 또는 홀수 행 또는 열에 있는지 확인하는 방법을 배웠으므로, 위치에 따라 단일 설계 요소를 재사용할 수 있다. 단일 설계 요소를 다음과 같은 네 가지 방법으로 표시할 수 있는 [Truchet Tiles](http://en.wikipedia.org/wiki/Truchet_tiles)의 경우를 고려해 보자:
|
||||
|
||||
|
||||
|
||||
여러 타일에 걸쳐 패턴을 변경함으로써 무한히 복잡한 설계 집합을 구성할 수 있다.
|
||||
|
||||
|
||||
|
||||
공간을 네 개의 셀로 나누고 각 셀에 회전 각도를 할당하는 함수 `rotateTilePattern()`를 주의깊게 관찰해 보아라.
|
||||
|
||||
<div class="codeAndCanvas" data="truchet.frag"></div>
|
||||
|
||||
* 새로운 디자인을 구성하기 위해 69~72줄의 주석, 주석해제를 해보아라.
|
||||
|
||||
* 다른 요소의 흑백 삼각형을 반원,회전사각/선과 같은 것으로 변경해보아라.
|
||||
|
||||
* 각 위치에 따라 요소가 회전하는 패턴을 만들어보아라.
|
||||
|
||||
* 각 위치에 따라 다른 성질을 바꾸는 패턴을 만들어보아라.
|
||||
|
||||
* 본 섹션의 원리를 적용할 수 있는 패턴이 아닌 다른 패턴을 생각해 보시오. (예: I Ching 육각)
|
||||
|
||||
<a href="../edit.php#09/iching-01.frag"><canvas id="custom" class="canvas" data-fragment-url="iching-01.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
## 나만의 규칙 만들기
|
||||
|
||||
절차적 패턴을 만드는 것은 최소한의 재사용 가능한 요소들을 찾는 정신적인 훈련이다. 이러한 관습은 오래되었다; 우리는 한 종족으로서 오랫동안 격자무늬와 무늬를 사용하여 직물, 바닥, 사물의 테두리를 장식해 왔다: 고대 그리스의 만다르 양식에서부터 중국의 격자무늬에 이르기까지, 반복과 변화의 즐거움이 우리의 상상을 사로잡는다. [장식](https://archive.org/stream/traditionalmetho00chririch#page/130/mode/2up) [패턴](https://www.pinterest.com/patriciogonzv/paterns/)을 살펴보고 아티스트와 디자이너가 어떻게 질서의 예측 가능성과 변동과 혼란의 놀라움 사이에서 미세한 가장자리를 탐색해 온 오랜 역사를 가지고 있는지 살펴보시오. 아랍의 기하학적인 패턴에서부터 멋진 아프리카 직물 디자인에 이르기까지, 배울 수 있는 패턴의 전 세계가 있다.
|
||||
|
||||
|
||||
|
||||
이 챕터를 마지막으로 Algorithmic Drawing 단원을 마친다.
|
||||
다가올 챕터에서는 쉐이더에 엔트로피를 주고 [제너러티브 디자인](https://en.wikipedia.org/wiki/Generative_art)을 만드는 방법에 대해 배울 것이다.
|
||||
94
10/README-kr.md
Normal file
94
10/README-kr.md
Normal file
@ -0,0 +1,94 @@
|
||||
# 제너러티브 디자인
|
||||
|
||||
많은 반복과 질서가 있고 난 후에 작가는 약간의 혼란을 느낄 수 밖에 없다.
|
||||
|
||||
## 랜덤
|
||||
|
||||
[ ](http://www.ryojiikeda.com/project/testpattern/#testpattern_live_set)
|
||||
|
||||
랜덤은 엔트로피의 최대 표현이다. 어떻게 하면 예측 가능하고 엄격한 코드 환경 내에서 무작위성을 생성할 수 있을까?
|
||||
|
||||
먼저, 다음 함수를 분석해보자:
|
||||
|
||||
<div class="simpleFunction" data="y = fract(sin(x)*1.0);"></div>
|
||||
|
||||
위 함수는 사인파의 소수점이하를 추출하고 있다. `-1.0`~`1.0` 사잇값을 갖는 [`sin()`](../glossary/?search=sin)의 소수점이하를 자르면 0.0~1.0 사이의 양의 값이 반환된다. 이 현상을 이용하여 이 사인파를 더 작은 조각으로 "분할"함으로써 의사난수를 얻을 수 있다. 어떻게? [`sin(x)`](../glossary/?search=sin)의 결과에 더 큰 숫자를 곱한다. 위에 있는 함수를 클릭하고 0을 추가해보아라.
|
||||
|
||||
`100000.0`에 도달할 때 쯤이면(식은 다음과 같을 것:`y = fract(sin(x)*100000.0)`), 사인파를 더 이상 구분할 수 없게된다. 사인파의 흐름이 부분 부분 세분화로 인해 혼돈의 카오스가 되어버렸다.
|
||||
|
||||
## 카오스 제어
|
||||
|
||||
랜덤을 사용하는것은 어려울 수 있다 - 지나치게 혼란스럽거나, 충분히 무작위적이지 않을 수 있기 때문이다. 다음 그래프를 보아라. 이를 위해 위에서 설명한 대로 정확히 구현된 `rand()`함수를 사용하고 있다.
|
||||
|
||||
자세히 보면 `-1.5707` 및 `1.5707`에서 [`sin()`](../glossary/?search=sin)파의 마루를 볼 수 있다.
|
||||
이제 이해했을 것이다 - 그곳이 바로 사인파의 최대와 최소가 발생하는 곳 이다.
|
||||
|
||||
랜덤 분포를 자세히 살펴보면, 가장자리에 비해 중간주위가 더 집중되어 있다는 것을 알 수 있다.
|
||||
|
||||
<div class="simpleFunction" data="y = rand(x);
|
||||
//y = rand(x)*rand(x);
|
||||
//y = sqrt(rand(x));
|
||||
//y = pow(rand(x),5.);"></div>
|
||||
|
||||
얼마 전 [Pixelero](https://pixelero.wordpress.com)는 [랜덤 분포에 대한 흥미로운 글](https://pixelero.wordpress.com/2008/04/24/various-functions-and-various-distributions-with-mathrandom/))을 출판했다. 이전 그래프에서 그가 사용하는 기능 중 일부를 추가해 여러분이 가지고 놀 수 있도록 했고, 분포가 어떻게 바뀔 수 있는지 알아보도록 했다. 함수의 주석을 해제해보며 어떻게 되는지 확인해보아라.
|
||||
|
||||
[Pixelero's article](https://pixelero.wordpress.com/2008/04/24/various-functions-and-various-distributions-with-mathrandom/)를 읽어보면, `rand()`함수는, 결정론적 난수(의사난수라고도 알려진)임을 강조한다. 즉, 예를 들어 `rand(1.)`는 항상 동일한 값을 반환한다. [Pixelero](https://pixelero.wordpress.com/2008/04/24/various-functions-and-various-distributions-with-mathrandom/)는 모든 호출에 다른 값을 반환하는 비결정론적인 ActionScript 함수 `Math.random()`을 참고한다.
|
||||
|
||||
## 2차원 랜덤
|
||||
|
||||
이제 무작위성을 더 잘 이해했으니 `x`축과 `y`축 모두에 2차원으로 적용해야 할 때이다. 그러기 위해서는 2차원 벡터를 1차원 부동 소수점 값으로 변환하는 방법이 필요하다. 다양한 방법이 존재하지만, 이 경우 [`dot()`](../glossary/?search=dot) 함수가 특히 도움이 된다. 두 벡터의 정렬에 따라 `0.0`에서 `1.0` 사이의 단일 부동 소수점 값을 반환한다.
|
||||
|
||||
<div class="codeAndCanvas" data="2d-random.frag"></div>
|
||||
|
||||
13~15번째 줄을 보면서 `vec2 st`를 또 다른 2차원 벡터(`vec2(12.9898,78.233`)와 어떻게 비교하고 있는지 알아보자.
|
||||
|
||||
* 14행과 15행의 값을 변경해 보시오. 무작위 패턴이 어떻게 변하는지 보고 여기서 무엇을 배울 수 있는지 생각해 보시오.
|
||||
|
||||
* 이 랜덤 함수를 마우스 상호 작용(`u_mouse`)과 시간(`u_time`)에 연결하여 작동 방식을 더 잘 이해할 수 있도록 해보자.
|
||||
|
||||
## 카오스 이용
|
||||
|
||||
2차원 랜덤은 TV의 노이즈와 많이 닮았다. 그렇지 않은가?
|
||||
이것은 이미지를 합성하는 데에는 사용하기 어려운 원료다. 이를 활용하는 방법을 배워보자.
|
||||
|
||||
첫 번째 단계는 그리드를 이것에 적용하는 것이다; [`floor()`](.../glossary/?)search=floor) 함수를 사용하여 셀의 정수 표를 생성할 것이다. 다음 코드, 특히 22번과 23번째 줄을 보시오.
|
||||
|
||||
<div class="codeAndCanvas" data="2d-random-mosaic.frag"></div>
|
||||
|
||||
공간을 10배 확대한 후(21번째 줄에서), 좌표의 정수와 소수 부분을 분리한다. 우리는 이 마지막 작업에 익숙하다. 왜냐하면 공간을 `0.0`~`1.0`의 더 작은 셀로 세분화하기 위해서 이 방법을 사용해왔기 때문이다. 좌표의 정수를 구함으로써 단일 셀처럼 보이는 픽셀 영역에 대한 공통 값을 분리할 수 있다. 그런 다음 공통 정수를 사용하여 해당 영역에 대한 임의의 값을 얻을 수 있다. 랜덤 함수는 결정론적이기 때문에 반환되는 랜덤 값은 해당 셀의 모든 픽셀에 대해 일정하다.
|
||||
|
||||
29번째 줄의 주석을 해제해보면 좌표의 소수 부분을 보존하는 것을 알 수 있고, 그 값을 각 셀 안에 있는 것들을 그리기 위한 좌표계로 사용할 수 있다.
|
||||
|
||||
이 두 값(정수 부분과 좌표의 소수 부분)을 조합해보면 다양성과 질서를 혼합할 수 있다.
|
||||
|
||||
다음은 유명한 `10 PRINT CHR$(205.5+RND(1);: GOTO 10` 미로 생성기의 GLSL 포팅 버전이다.
|
||||
|
||||
<div class="codeAndCanvas" data="2d-random-truchet.frag"></div>
|
||||
|
||||
앞 장(41~47번째 줄)의 `truchetPattern()` 함수를 사용하여 셀의 임의의 값을 사용하여 한 방향으로 선을 그린다.
|
||||
|
||||
50~53행의 블럭을 주석 처리하여 또 다른 흥미로운 패턴을 얻을 수도 있고, 35와 36행에 주석을 해제함으로써 패턴을 애니메이션화할 수도 있다.
|
||||
|
||||
## 랜덤 마스터
|
||||
|
||||
일본의 전자 작곡가이자 시각 예술가인 [Ryoji Ikeda](http://www.ryojiikeda.com/)는 랜덤 사용을 마스터했다. 그의 작품에 감동하고 매료되지 않는 것은 어렵다. 그가 시청각 매체에서 랜덤을 사용하는 것은 성가신 혼란이 아니라 우리 기술 문화의 복잡성의 거울이 되는 방식으로 만들어졌다.
|
||||
|
||||
<iframe src="https://player.vimeo.com/video/76813693?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
|
||||
[Ikeda](http://www.ryojiikeda.com/)의 작업을 살펴보고 다음 연습에 도전하십시오:
|
||||
|
||||
* 랜덤 값으로 움직이는 셀(반대 방향)의 행을 만들어 보아라. 더 밝은 셀만 표시하여라. 행의 속도가 시간에 따라 변화하도록 하여라.
|
||||
|
||||
<a href="../edit.php#10/ikeda-00.frag"><canvas id="custom" class="canvas" data-fragment-url="ikeda-00.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
* 마찬가지로 여러 행을 만들지만, 각 행마다 속도와 방향을 다르게 만들어라. 표시할 셀의 임계값에 마우스 위치를 연동해라.
|
||||
|
||||
<a href="../edit.php#10/ikeda-03.frag"><canvas id="custom" class="canvas" data-fragment-url="ikeda-03.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
* 다른 흥미로운 효과를 만들어 보아라.
|
||||
|
||||
<a href="../edit.php#10/ikeda-04.frag"><canvas id="custom" class="canvas" data-fragment-url="ikeda-04.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
심미적으로 랜덤을 사용하는것(특히, 자연스러워 보이는 시뮬레이션을 만들고 싶어서)은 문제가 될 수 있다. 랜덤은 단순히 지나치게 혼란스럽고 현실에서 `random()`처럼 보이는 것은 거의 없다. 빗물 패턴이나 재고 차트를 보면, 두 가지 모두 꽤 랜덤처럼 보이지만, 이 장 첫머리에 우리가 만든 랜덤 패턴과는 전혀 다르다. 이유는? 랜덤 값은 서로 상관관계가 없지만 대부분의 자연 패턴은 이전 상태에 대한 기억을 가지고 있다.
|
||||
|
||||
다음 챕터에서는 컴퓨테이셔널 카오스를 일으키는 부드럽고 *자연스러워 보이는* 방법인 노이즈에 대해 알아볼 것 이다.
|
||||
Loading…
Reference in New Issue
Block a user