[베지어 곡선] 수정

7-animation/1-bezier-curve/article.md

@@ -8,7 +8,7 @@
 
 [베지어 곡선](https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%A7%80%EC%97%90_%EA%B3%A1%EC%84%A0)은 조절점(control point)을 사용해 정의합니다.
 
-조절점의 개수는 2개나 3개, 4개가 될 수 있고 이보다도 더 많을 수 있습니다.
+조절점의 개수는 2개나 3개, 4개가 될 수 있고 이보다도 많을 수 있습니다.
 
 조절점이 두 개인 베지어 곡선을 살펴봅시다.
 
@@ -61,36 +61,36 @@
 
 **3점 베지어 곡선을 만드는 카스텔조 알고리즘**은 다음과 같습니다.
 
-1. 조절점을 찍습니다. 데모에선 조절점을 각각에 '1', '2', '3'이라는 이름을 붙여주었습니다.
-2. 조절점 1과2, 2와 3을 잇는 선분(<span style="color:#825E28">갈색</span>선)을 만듭니다.
+1. 조절점을 찍습니다. 데모에선 조절점 각각에 '1', '2', '3'이라는 이름을 붙여주었습니다.
+2. 조절점 1과2, 2와 3을 잇는 선분(<span style="color:#825E28">갈색선</span>)을 만듭니다.
 3. 매개변수 't'의 값을 '0'부터 시작해 '1'이 되도록 증가시킵니다. 데모에선 't'가 '0.05'씩 증가해 `0, 0.05, 0.1, 0.15, ... 0.95, 1'이 되도록 하였습니다.
 
     `t`값을 사용해 다음과 같은 추가 작업을 할 수 있습니다.
 
-    <span style="color:#825E28">갈색</span>으로 표시한 각 선분의 시작점에서 `t`와 비례하는  위치에 점을 찍습니다. 선분이 두 개이기 때문에 점 두 개가 만들어집니다.
+    - <span style="color:#825E28">갈색</span>으로 표시한 각 선분의 시작점에서 `t`와 비례하는  위치에 점을 찍습니다. 선분이 두 개이기 때문에 점 두 개가 만들어집니다.
 
         예를 들어 설명하면 다음과 같습니다. `t`가 `0`일 땐 두 점이 선분의 시작인 조절점 1과 2에 위치합니다. `t`가 `0.25`일 땐 조절점 1에서 조절점 1과 2를 이은 선분의 길이에 25%를 곱한 값만큼 떨어진 곳에 점이 위치합니다. `t`가 `0.5`일 땐 선분의 중간, `1`일 땐 선분의 끝에 점이 위치합니다.
 
-    - 추가작업을 통해 만든 두 점을 연결합니다. 그림에선 <span style="color:#167490">파란</span>선에 해당합니다.
+    - 추가작업을 통해 만든 두 점을 연결합니다. 그림에선 <span style="color:#167490">파란선</span>에 해당합니다.
 
 
 | `t=0.25`                 | `t=0.5`                |
 | ------------------------ | ---------------------- |
 | ![](bezier3-draw1.svg)   | ![](bezier3-draw2.svg) |
 
-4. 이제 <span style="color:#167490">파란색</span> 선분에서 `t` 값과 비례하는 위치에 점 하나를 찍습니다. `t`가 `0.25`일 때(왼쪽 그림)는 파란 선분의 4분의 1, `t`가 `0.5`일 때(오른쪽 그림)는 선분의 가운데에 점(<span style="color:red">빨간점</span>)이 생깁니다.
+4. 이제 <span style="color:#167490">파란색</span> 선분에서 `t` 값과 비례하는 위치에 점 하나를 찍습니다. `t`가 `0.25`일 때(왼쪽 그림)는 파란 선분의 4분의 1지점에 <span style="color:red">빨간점</span>을, `t`가 `0.5`일 때(오른쪽 그림)는 선분의 가운데에 <span style="color:red">빨간점</span>)을 찍습니다.
 
 5. `t`가 `0`에서 `1`로 증가하면서 당연히 점도 계속 추가됩니다. 이때 이 점들이 바로 베지어 곡선(빨간색 포물선)을 만듭니다.
 
 지금까진 조절점이 3개인 경우를 살펴보았는데, 조절점이 4개일 때 역시 같은 방식으로 곡선이 만들어집니다.
 
-조절점이 네개 일때의 데모를 살펴봅시다.
+조절점이 네개 일때 데모를 살펴봅시다.
 
 [iframe src="demo.svg?p=0,0,0.5,0,0.5,1,1,1&animate=1" height=370]
 
-조절점이 4개일 때의 카스텔조 알고리즘은 다음과 같습니다.
+조절점이 4개인 경우 카스텔조 알고리즘은 다음과 같습니다.
 
-- 조절점 1과 2, 2와 3, 3과 4를 연결하는 선분을 만듭니다. 총 3개의 <span style="color:#825E28">갈색</span> 선분이 만들어집니다.
+- 조절점 1과 2, 2와 3, 3과 4를 연결하는 선분을 만듭니다. 총 3개의 <span style="color:#825E28">갈색 선분</span>이 만들어집니다.
 - `t`를 `0`부터 시작해 `1`까지 증가시키면서 각 선분에 다음과 같은 작업을 합니다.
     - 선분 시작점에서 `t`에 비례하는 위치에 점을 찍습니다. 이 점들을 연결해 두 개의 <span style="color:#0A0">녹색선</span>을 만듭니다.
     - 두 개의 녹색 선분 위에 `t`에 비례하는 위치에 점을 찍습니다. 이 두 점을 연결 <span style="color:#167490">파란색 선</span>을 그립니다.
@@ -133,7 +133,7 @@ N개의 조절점이 있을 때 알고리즘은 다음과 같습니다.
 어떻게 곡선이 만들어지는지 살펴보세요.
 ```
 
-재귀성을 띄는 알고리즘 덕분에 우리는 다양한 차수의 베지어 곡선을 얼마든지 만들 수 있습니다. 조절점을 5개, 6개 혹은 그 이상 만들어 곡선을 만들 수 있죠. 그렇지만 실무에선 많은 개수의 조절점은 그다지 잘 쓰이지 않습니다. 조절점은 보통 2~3개이고, 이 조절점을 사용해 만든 곡선을 이어붙여 복잡한 그림을 그리게 됩니다. 이런 방식을 사용하면 개발과 계산 모두 간단해집니다.
+재귀성을 띄는 알고리즘 덕분에 우리는 다양한 차수의 베지어 곡선을 얼마든지 만들 수 있습니다. 조절점이 5개, 6개 혹은 그 이상 있는 곡선을 만들 수 있죠. 그렇지만 실무에선 많은 개수의 조절점은 그다지 잘 쓰이지 않습니다. 조절점은 보통 2~3개이고, 이 조절점을 사용해 만든 곡선을 이어붙여 복잡한 그림을 그리게 됩니다. 이런 방식을 사용하면 개발과 계산 모두 간단해집니다.
 
 ```smart header="조절점은 '통과하는' 곡선은 어떻게 그리나요?"
 베지어 곡선 모양은 조절점을 사용해 정의되는데, 지금까진 곡선 양 끝을 제외하고 조절점이 곡선 위에 있는 경우는 없었습니다.
@@ -148,7 +148,7 @@ N개의 조절점이 있을 때 알고리즘은 다음과 같습니다.
 
 베지어 곡선은 하나의 수학 공식을 사용해 설명 가능합니다.
 
-사실 이 공식을 알 필요는 없습니다. 대다수의 사람이 마우스로 점을 움직여 원하는 형태의 곡선을 만듭니다. 그렇지만 수학을 좋아하는 분들을 위해 베지어 곡선을 만들 때 사용되는 수학식을 소개해보겠습니다.
+사실 이 공식을 알 필요는 없습니다. 대다수의 사람은 공식 없이 마우스로 점을 움직여 원하는 형태의 곡선을 만듭니다. 그렇지만 수학을 좋아하는 분들을 위해 베지어 곡선을 만들 때 사용되는 식을 소개해보겠습니다.
 
 조절점 <code>P<sub>i</sub></code>의 좌표에 대하여 첫 번째 조절점의 좌표를 <code>P<sub>1</sub> = (x<sub>1</sub>, y<sub>1</sub>)</code>, 두 번째 조절점의 좌표를 <code>P<sub>2</sub> = (x<sub>2</sub>, y<sub>2</sub>)</code> 등이라 정의했을 때, 베지어 곡선을 이루는 점의 좌표들은 `[0,1]`사이의 매개변수 `t`값에 의해 결정됩니다.