Математика ★★☆ Середній

🎯 Криві Безьє

Перетягуйте контрольні точки для формування плавних кривих. Спостерігайте, як алгоритм де Кастельжо рекурсивно інтерполює їх крок за кроком — та сама математика, що лежить в основі шрифтів, SVG-шляхів і CAD-систем.

Ступінь: 3
Контр. точок: 4
t = 0.500
Точка: (–, –)
Крива Безьє Контрольний полігон Лінії де Кастельжо B-сплайн (якщо увімкнено)

Алгоритм де Кастельжо

Крива Безьє ступеня n визначається n+1 контрольними точками P₀, P₁, …, Pₙ. Для параметра t ∈ [0, 1] точка кривої B(t) знаходиться за n раундами лінійної інтерполяції: Pᵢʲ = (1−t)·Pᵢʲ⁻¹ + t·Pᵢ₊₁ʲ⁻¹. Жовті лінії побудови показують проміжні точки, що збігаються до помаранчевої точки на кривій.

Перетягните будь-яку контрольну точку (сині кола), щоб змінити форму кривої. Алгоритм гарантує, що крива залишається у межах опуклої оболонки контрольного полігону та завжди проходить через P₀ і Pₙ.

Про криві Без'є та сплайни

Крива Без'є — гладка параметрична крива, що задається набором керівних точок. Її незалежно один від одного розробили П’єр Без'є (Renault) і Поль де Кастельжо (Citroën) у 1960-х роках для проєктування кузовів автомобілів. Крива степеня n задається многочленом Бернштейна: B(t) = Σ Pᵢ ⋅ C(n,i) ⋅ (1−t)ⁿ⁻ᶦ ⋅ tᶦ, де t ∈ [0,1], C(n,i) — біноміальні коефіцієнти. Алгоритм де Кастельжо обчислює криву геометрично — багаторазовим лінійним інтерполюванням між сусідніми точками, що є чисельно стійким і інтуїтивно зрозумілим.

Симулятор дозволяє додавати керівні точки клацанням, перетягувати їх для зміни форми кривої в реальному часі, з’єднувати кубічні сегменти у гладкі сплайни (C¹ або G¹ неперервність) і спостерігати за «багатокутником підрозділу» на кожному кроці алгоритму де Кастельжо, що анімується під час пробігу параметра t від 0 до 1.

Поширені запитання

Що таке алгоритм де Кастельжо?

Алгоритм де Кастельжо обчислює точку кривої Без'є при параметрі t через багаторазове лінійне інтерполювання між сусідніми керівними точками. Для кубічної кривої (4 точки P₀–P₃): перший тур дає 3 проміжні точки, другий — 2, третій — одну точку B(t). Проміжні точки утворюють трикутник відрізків, де гіпотенуза є дотичною до кривої — це і є «багатокутник підрозділу», видимий в анімації.

Чому кубічні криві Без'є настільки поширені?

Кубічні криві (степінь 3, 4 керівні точки) — мінімальний степінь, що дозволяє незалежно задавати обидва кінці та обидва дотичні напрямки. Криві вищого степеня можуть коливатися (явище Рунге) і ними складніше керувати. Фактично всі векторні формати — SVG, PDF, PostScript, шрифти TrueType/OpenType, CSS-анімації — використовують кубічні криві Без'є як базовий примітив.

Що таке B-сплайн і чим він відрізняється від кривої Без'є?

B-сплайн (базисний сплайн) визначається вузловим вектором, що задає порядок з’єднання поліноміальних ділянок. На відміну від кривої Без'є, кожна керівна точка B-сплайна впливає лише на локальну ділянку кривої (скінченна підтримка). NURBS (неоднорідні раціональні B-сплайни) з вагами є стандартом у CAD-системах типу AutoCAD і SolidWorks.

Як забезпечити гладке з’єднання кубічних сегментів?

Для C¹-неперервності (збіг першої похідної) остання керівна точка сегмента k, перша керівна точка сегмента k+1 і спільна кінцева точка мають бути колінеарними, причому відстані від кінцевої точки — рівними. Це забезпечує збіг напрямку й величини дотичної. Для G¹-неперервності достатньо лише колінеарності (напрямок збігається, але не обов’язково величина) — слабша, але візуально гладка умова, що використовується у дизайні шрифтів.

Що таке многочлени Бернштейна?

Многочлени Бернштейна B(i,n,t) = C(n,i)⋅tᶦ⋅(1−t)ⁿ⁻ᶦ утворюють базис многочленів степеня n на [0,1]. Вони невід’ємні, у сумі дорівнюють 1 і кожен досягає максимуму при t = i/n. Оскільки крива є зваженим середнім керівних точок (ваги = многочлени Бернштейна), вона завжди лежить всередині опуклої оболонки керівного многокутника.

Як криві Без'є використовуються в типографіці?

Шрифти TrueType зберігають контури гліфів як квадратичні криві Без'є (3 точки на сегмент), OpenType — або квадратичні, або кубічні (як у PostScript Type 1). При відображенні растеризатор обчислює криві з потрібною роздільністю і заповнює контур. Один символ ASCII зазвичай складається з 10–30 сегментів Без'є.

Що таке властивість опуклої оболонки?

Опукла оболонка множини точок — найменша опукла область, що містить усі точки. Оскільки криві Без'є є опуклими комбінаціями керівних точок (ваги Бернштейна невід’ємні й у сумі дорівнюють 1), крива завжди лежить всередині опуклої оболонки керівного многокутника. Ця властивість використовується в алгоритмах перевірки зіткнень: якщо промінь не перетинає опукту оболонку, він не може перетнути криву.

Який зв’язок між кривими Без'є і згладжуванням анімації?

CSS і SVG використовують кубічні криві Без'є для задання функцій плавності анімації: cubic-bezier(x₁, y₁, x₂, y₂), де два керівних точки (кінці зафіксовані в (0,0) і (1,1)) визначають, наскільки швидко змінюється анімоване значення. Знайомий «ease-in-out» приблизно відповідає cubic-bezier(0.42, 0, 0.58, 1). Крутий ділянок — швидка зміна, плоска — повільна.

Чи можуть криві Без'є точно описувати кола?

Ні — раціональні криві Без'є (NURBS із ненульовими вагами) можуть точно описувати конічні перерізи, зокрема кола. Але поліноміальні криві Без'є не можуть. Один квадрант кола апроксимується кубічною кривою Без'є з керівними точками (R, kR) і (kR, R), де k ≈ 0,5523. Максимальна похибка становить близько 0,00027R — незамітна для звичайних роздільностей екрана.

Що таке підвищення степеня кривої Без'є?

Підвищення степеня — це представлення тієї самої геометричної кривої з однією додатковою керівною точкою (й вищим степенем) без зміни форми. Лінійний сегмент підвищується до квадратичного, квадратичний — до кубічного тощо. Нові керівні точки обчислюються як зважені середні оригінальних, і процес є точним (без апроксимації). Це корисно, коли потрібно звести всі криві до єдиного степеня перед подальшим алгоритмічним обробленням.

Про цю симуляцію

Цей симулятор показує, як крива Безьє будується з кількох керівних точок за допомогою алгоритму де Кастельжо — того самого рекурсивного методу інтерполяції, що лежить в основі комп'ютерної графіки. Ви можете обрати ступінь кривої від 1 (лінійна) до 5 (п'ятого ступеня), перетягувати кожну керівну точку по полотну та рухати повзунок параметра t, спостерігаючи, як лінії побудови збігаються в точку на кривій. Перемикач також накладає рівномірний кубічний B-сплайн, щоб порівняти обидва підходи напряму.

🔬 Що показано

Сині точки — це керівні точки P₀…Pₙ, а пунктирна сіра лінія — контрольний многокутник, що їх з'єднує. При обраному параметрі t кольорові лінії побудови показують кожен раунд лінійної інтерполяції алгоритму де Кастельжо; вони сходяться в одній помаранчевій точці, яка й прокреслює помаранчеву криву Безьє, поки t пробігає від 0 до 1. Крива завжди починається у P₀, закінчується у Pₙ і ніколи не виходить за межі опуклої оболонки контрольного многокутника.

🎮 Як користуватися

Перетягуйте будь-яку синю керівну точку, щоб змінити форму кривої в реальному часі. Селектор «Ступінь» перемикає кількість керівних точок від 2 до 6 (лінійна — п'ятого ступеня); повзунок t переміщує одну точку вздовж кривої, а кнопка «Грати» анімує t туди-сюди автоматично. Кнопка «Побудова» вмикає чи вимикає жовті лінії де Кастельжо, прапорці ховають многокутник або саму криву, а «Порівняти B-сплайн» накладає зелений рівномірний кубічний B-сплайн через ті самі точки. «Скинути» повертає початкове розташування точок для обраного ступеня.

💡 Чи знали ви?

Криві Безьє незалежно одна від одної розробили на початку 1960-х П'єр Безьє в Renault і Поль де Кастельжо в Citroën — обидва шукали спосіб математично описати кузовні панелі автомобілів для автоматизованого проєктування, задовго до того, як та сама математика почала визначати обриси літер на цій самій сторінці.

Поширені запитання

Що таке алгоритм де Кастельжо?

Алгоритм де Кастельжо обчислює точку кривої Безьє при заданому t шляхом багаторазового лінійного інтерполювання між сусідніми керівними точками. Для кубічної кривої (4 точки) потрібно три раунди інтерполяції, щоб звести точки до єдиної точки B(t) на кривій; кольорові лінії в симуляції показують кожен із цих раундів у процесі.

Чому крива завжди проходить через першу й останню керівні точки, але не через середні?

Крива є зваженим середнім усіх керівних точок, і ці ваги (многочлени Бернштейна) дорівнюють нулю в кожній точці, крім P₀ при t=0 та Pₙ при t=1. Усі інші керівні точки лише притягують криву до себе, ніколи не торкаючись її безпосередньо — тому P₁…Pₙ₋₁ лежать поза кривою, а P₀ і Pₙ — на ній.

Що насправді робить зміна ступеня?

Селектор «Ступінь» визначає, скільки керівних точок задають криву: ступінь 1 використовує 2 точки й малює пряму лінію, ступінь 2 — 3 точки для плавної дуги, а ступені 3–5 додають дедалі більше точок і можливих вигинів. Криві вищого ступеня можуть сильніше «звиватися», але їх складніше передбачувано формувати — тому кубічні криві (ступінь 3) стали галузевим стандартом.

Чим крива Безьє відрізняється від показаного тут B-сплайна?

Помаранчева крива — це справжня крива Безьє, де кожна керівна точка впливає на всю форму — властивість, яку називають глобальним контролем. Зелений B-сплайн, що з'являється при увімкненні порівняння, побудований із тих самих точок іншим методом — рівномірним кубічним B-сплайном, де кожна точка впливає лише на локальну ділянку кривої, тож переміщення однієї точки майже не змінює решту.

Що насправді означає параметр t?

t — це параметр кривої, що набуває значень від 0 до 1. Це не час і не відстань, пройдена вздовж кривої, а просто вхідне значення формули інтерполяції. Пересування повзунка від 0 до 1 переміщує точку B(t) від першої керівної точки до останньої, хоча швидкість цього руху вздовж самої кривої не обов'язково стала.