|
1 | 1 | # Крива Безьє |
2 | 2 |
|
3 | | -Криві Безьє використовують у комп'ютерній графіці для малювання гладких фігур, для CSS-анімації та у багатьох інших випадках. |
| 3 | +Криві Безьє використовують у комп’ютерній графіці для малювання гладких фігур, для CSS-анімації та у багатьох інших випадках. |
4 | 4 |
|
5 | 5 | Це дуже проста річ, яку варто дослідити одного разу, щоб надалі комфортно почуватись у світі векторної графіки та просунутих анімацій. |
6 | 6 |
|
|
31 | 31 |
|
32 | 32 |   |
33 | 33 |
|
34 | | -Остання властивість дозволяє оптимізувати пошук перетинів у комп'ютерній графіці. Криві не перетинаються, якщо їх опуклі оболонки не перетинаються. Тож попередня перевірка на перетин опуклих оболонок може швидко дати знати про відсутність перетину. Перевірка перетину опуклих оболонок значно легша, оскільки вони мають форму чотирикутника, трикутника тощо (дивіться малюнок вище), значно простіші фігури, ніж сама крива. |
| 34 | +Остання властивість дозволяє оптимізувати пошук перетинів у комп’ютерній графіці. Криві не перетинаються, якщо їх опуклі оболонки не перетинаються. Тож попередня перевірка на перетин опуклих оболонок може швидко дати знати про відсутність перетину. Перевірка перетину опуклих оболонок значно легша, оскільки вони мають форму чотирикутника, трикутника тощо (дивіться малюнок вище), значно простіші фігури, ніж сама крива. |
35 | 35 |
|
36 | 36 | **Головна цінність кривих Безьє для малювання в тому, що пересування контрольних точок змінює криву *інтуїтивно зрозумілим чином*.** |
37 | 37 |
|
|
72 | 72 |
|
73 | 73 | Наприклад, для `t=0` -- обидві точки будуть на початку відрізка, для `t=0.25` -- на відстані 25% довжини відрізка від початку, для `t=0.5` -- 50% (на середині), для `t=1` -- в кінці відрізка. |
74 | 74 |
|
75 | | - - З'єднаймо ці точки. На малюнку нижче цей відрізок забарвлений у <span style="color:#167490">синій</span> колір. |
| 75 | + - З’єднаймо ці точки. На малюнку нижче цей відрізок забарвлений у <span style="color:#167490">синій</span> колір. |
76 | 76 |
|
77 | 77 |
|
78 | 78 | | Для `t=0.25` | Для `t=0.5` | |
|
93 | 93 |
|
94 | 94 | - Поєднаймо контрольні точки відрізками: 1 -> 2, 2 -> 3, 3 -> 4. Отримаємо 3 <span style="color:#825E28">коричневі</span> відрізки. |
95 | 95 | - Для кожного `t` у інтервалі від `0` до `1`: |
96 | | - - Ми беремо точки на цих відрізках на відстані від початку пропорційній до `t`. З'єднаємо ці точки, що дає нам два <span style="color:#0A0">зелених відрізки</span>. |
| 96 | + - Ми беремо точки на цих відрізках на відстані від початку пропорційній до `t`. З’єднаємо ці точки, що дає нам два <span style="color:#0A0">зелених відрізки</span>. |
97 | 97 | - На цих відрізках ми беремо точки, що пропорційні до `t`. Отримуємо <span style="color:#167490">синій відрізок</span>. |
98 | 98 | - На синьому відрізку беремо точку, що пропорційна до `t`. У попередньому прикладі вона <span style="color:red">червоного</span> кольору. |
99 | 99 | - Разом ці точки утворюють криву. |
|
141 | 141 |
|
142 | 142 | Інколи ми маємо інше завдання: намалювати криву, що *проходить крізь декілька точок*, тобто всі точки знаходяться на одній гладкій кривій. Ця задача називається [інтерполяцією](https://uk.wikipedia.org/wiki/Інтерполяція), і тут ми не будемо розглядати її. |
143 | 143 |
|
144 | | -Для таких кривих існують математичні формули, наприклад [багаточлен Лагранжа](https://uk.wikipedia.org/wiki/Многочлен_Лагранжа). У комп'ютерній графіці для побудови гладких кривих, які поєднують багато точок, використовується [інтерполяція кубічними сплайнами](https://uk.wikipedia.org/wiki/Кубічний_сплайн). |
| 144 | +Для таких кривих існують математичні формули, наприклад [багаточлен Лагранжа](https://uk.wikipedia.org/wiki/Многочлен_Лагранжа). У комп’ютерній графіці для побудови гладких кривих, які поєднують багато точок, використовується [інтерполяція кубічними сплайнами](https://uk.wikipedia.org/wiki/Кубічний_сплайн). |
145 | 145 | ``` |
146 | 146 |
|
147 | 147 |
|
|
196 | 196 |
|
197 | 197 | Використання: |
198 | 198 |
|
199 | | -- У комп'ютерній графіці, моделюванні, редакторах векторної графіки. Шрифти також описані кривими Безьє. |
| 199 | +- У комп’ютерній графіці, моделюванні, редакторах векторної графіки. Шрифти також описані кривими Безьє. |
200 | 200 | - У веб-розробці -- для графіки на Canvas, або у форматі SVG. До речі, всі "живі" приклади наведені вище написані на SVG. Насправді це один і той самий SVG-документ, якому точки передані як параметри. Ви можете відкрити його у окремому вікні та переглянути його вихідний код: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1). |
201 | 201 | - У CSS-анімації, щоб описати траєкторію або швидкість анімації. |
0 commit comments