Apply suggestions from code review

Co-authored-by: Stanislav <[email protected]>

Author: kolumb

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

@@ -2,7 +2,7 @@
 
 Криві Безьє використовують у комп’ютерній графіці для малювання гладких фігур, для CSS-анімації та у багатьох інших випадках.
 
-Це дуже проста річ, яку варто дослідити одного разу, щоб надалі комфортно почуватись у світі векторної графіки та просунутих анімацій.
+Це дуже проста річ, яку варто дослідити один раз, щоб надалі комфортно почуватись у світі векторної графіки та просунутих анімацій.
 
 ## Контрольні точки
 
@@ -25,13 +25,13 @@
 Якщо придивитись до цих кривих, можна одразу помітити наступне:
 
 1. **Точки не завжди знаходяться на кривій.** Це цілком нормально, як саме будується крива ми побачимо пізніше.
-2. **Степінь кривої дорівнює кількості точок мінус один**.
+2. **Ступінь кривої дорівнює кількості точок мінус один**.
 Дві точки дають лінійну криву (по суті пряму лінію), три точки -- квадратичну криву (параболу), чотири точки -- кубічну криву.
 3. **Крива завжди знаходиться всередині [опуклої оболонки](https://uk.wikipedia.org/wiki/Опукла_оболонка), що утворена контрольними точками:**
 
     ![](bezier4-e.svg) ![](bezier3-e.svg)
 
-Остання властивість дозволяє оптимізувати пошук перетинів у комп’ютерній графіці. Криві не перетинаються, якщо їх опуклі оболонки не перетинаються. Тож попередня перевірка на перетин опуклих оболонок може швидко дати знати про відсутність перетину. Перевірка перетину опуклих оболонок значно легша, оскільки вони мають форму чотирикутника, трикутника тощо (дивіться малюнок вище), значно простіші фігури, ніж сама крива.
+Остання властивість дозволяє оптимізувати пошук перетинів у комп’ютерній графіці. Криві не перетинаються, якщо їх опуклі оболонки не перетинаються. Тож попередня перевірка на перетин опуклих оболонок може вказати на відсутність перетину. Перевірка перетину опуклих оболонок значно легша, оскільки вони мають форму чотирикутника, трикутника тощо (дивіться малюнок вище), значно простіші фігури, ніж сама крива.
 
 **Головна цінність кривих Безьє для малювання в тому, що пересування контрольних точок змінює криву *інтуїтивно зрозумілим чином*.**
 
@@ -50,20 +50,20 @@
 ## Алгоритм де Кастельє
 
 Існує математична формула для кривих Безьє, але давайте розглянемо її трохи пізніше, оскільки
-[алгоритм де Кастельє](https://uk.wikipedia.org/wiki/Алгоритм_де_Кастельє) ідентичний математичному визначенню і наглядно показує, як вона будується.
+[Алгоритм де Кастельє](https://uk.wikipedia.org/wiki/Алгоритм_де_Кастельє) ідентичний математичному визначенню і наглядно показує, як вона будується.
 
 Для початку давайте розглянемо приклад з трьох точок.
 
-Ось демонстрація, а за нею слідує пояснення.
+Ось демонстрація, а після неї буде пояснення.
 
 Контрольні точки (1, 2 і 3) можна посунути мишею. Натисніть кнопку "play", щоб запустити її.
 
 [iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370]
 
 **Алгоритм де Кастельє для побудови кривої Безьє з трьох точок:**
 
-1. Намалюймо контрольні точки. На демонстрації вище вони позначені як `1`, `2`, `3`.
-2. Побудуємо відрізки між контрольними точками 1 -> 2 -> 3. На демонстрації вище вони <span style="color:#825E28">коричневі</span>.
+1. Намалюймо контрольні точки. У прикладі вище вони позначені як `1`, `2`, `3`.
+2. Побудуємо відрізки між контрольними точками 1 -> 2 -> 3. У прикладі вище вони <span style="color:#825E28">коричневі</span>.
 3. Параметр `t` рухається від `0` до `1`. Приклад вище використовує крок `0.05`: циклічно отримуємо значення `0, 0.05, 0.1, 0.15, ... 0.95, 1`.
 
     Для кожного з цих значень `t`:
@@ -72,14 +72,14 @@
 
         Наприклад, для `t=0` -- обидві точки будуть на початку відрізка, для `t=0.25` -- на відстані 25% довжини відрізка від початку, для `t=0.5` -- 50% (на середині), для `t=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` (ліве зображення) ми отримуємо точку в кінці лівої чверті відрізку, а для `t=0.5` (праве зображення) -- посередині відрізка. На малюнку вгорі ця точка <span style="color:red">червона</span>.
+4. Тепер на <span style="color:#167490">синьому</span> відрізку знайдемо точку на відстані пропорційній до значення `t`. Тобто для `t=0.25` (зображення ліворуч) ми отримуємо точку в кінці лівої чверті відрізку, а для `t=0.5` (зображення праворуч) -- посередині відрізка. На зображенні вище ця точка <span style="color:red">червона</span>.
 
 5. Поки `t` проходить від `0` до `1`, кожне значення `t` додає одну точку до кривої. Множина таких точок утворює криву Безьє. Це <span style="color:red">червона</span> парабола на малюнку вгорі.
 
@@ -106,7 +106,7 @@
 2. Потім для кожного `t` від `0` до `1`, ми беремо точку у кожному відрізку на відстані, що пропорційна до `t` і поєднуємо їх. Це нам дасть N-2 нових відрізків.
 3. Повторюємо крок 2 доки не залишиться лише одна точка.
 
-Ці одинокі точки утворюють криву.
+Ці точки утворюють криву.
 
 ```online
 **Запускайте і зупиняйте приклади, щоб ясніше побачити відрізки і те, яким чином вибудовується крива.**
@@ -134,14 +134,14 @@
 будується крива.
 ```
 
-Оскільки алгоритм рекурсивний, ми можемо побудувати криву Безьє будь-якої степені, тобто з використанням 5, 6 або й більше контрольних точок. На практиці велика кількість точок не приносить користі. Зазвичай використовується 2-3 точки, а для складних ліній "склеюють" декілька кривих в одну. Це простіше для розробки і розрахунків.
+Оскільки алгоритм рекурсивний, ми можемо побудувати криву Безьє будь-якого ступеню, тобто з використанням 5, 6 або й більше контрольних точок. На практиці велика кількість точок не приносить користі. Зазвичай використовується 2-3 точки, а для складних ліній "склеюють" декілька кривих в одну. Це простіше для розробки і розрахунків.
 
 ```smart header="Як намалювати криву, що проходить *крізь* задані точки?"
 Для задання кривої Безьє використовуються контрольні точки. Як ми бачимо, вони не знаходяться на кривій, окрім першої і останньої.
 
-Інколи ми маємо інше завдання: намалювати криву, що *проходить крізь декілька точок*, тобто всі точки знаходяться на одній гладкій кривій. Ця задача називається [інтерполяцією](https://uk.wikipedia.org/wiki/Інтерполяція), і тут ми не будемо розглядати її.
+Інколи ми маємо інше завдання: намалювати криву, що *проходить крізь декілька точок*, тобто всі точки знаходяться на одній гладкій кривій. Ця задача називається [інтерполяцією](https://uk.wikipedia.org/wiki/Інтерполяція), і тут ми не будемо її розглядати.
 
-Для таких кривих існують математичні формули, наприклад [багаточлен Лагранжа](https://uk.wikipedia.org/wiki/Многочлен_Лагранжа). У комп’ютерній графіці для побудови гладких кривих, які поєднують багато точок, використовується [інтерполяція кубічними сплайнами](https://uk.wikipedia.org/wiki/Кубічний_сплайн).
+Для таких кривих існують математичні формули, наприклад [многочлен Лагранжа](https://uk.wikipedia.org/wiki/Многочлен_Лагранжа). У комп’ютерній графіці для побудови гладких кривих, які поєднують багато точок, використовується [інтерполяція кубічними сплайнами](https://uk.wikipedia.org/wiki/Кубічний_сплайн).
 ```
 
 
@@ -151,7 +151,7 @@
 
 Як ми побачили -- насправді її не потрібно знати, більшість людей просто малюють криву пересуваючи точки за допомогою миші. Але якщо ви захоплюєтесь математикою -- ось вона.
 
-Нехай <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> і так далі. Крива описується рівнянням, що залежить від параметру `t`, який лежить на відрізку `[0,1]`.
+Нехай <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> і так далі. Крива описується рівнянням, що залежить від параметру `t`, який лежить на відрізку `[0,1]`.
 
 - Формула для кривої з 2 контрольними точками:
 
@@ -180,7 +180,7 @@
 
 Тепер коли `t` проходить від `0` до `1`, множина значень `(x,y)` для кожного `t` утворює криву для заданих контрольних точок.
 
-## Підсумок
+## Підсумки
 
 Криві Безьє задаються їх контрольними точками.