Математика · Комп'ютерна графіка · CAD
📅 Червень 2026 ⏱ ≈ 10 хв читання 🎯 Середній рівень · Останнє оновлення: 3 липня 2026 р.

Криві Без'є та сплайни: математика плавного дизайну

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

Автор: Команда MySimulator · Редакційна перевірка: Редакція MySimulator

1. Параметричні криві та параметр t

Звичайна функція y = f(x) може описувати лише криві, що проходять тест вертикальної лінії — марно для петель, спіралей чи замкнутих фігур. Параметрична крива натомість виражає як x, так і y (і z у 3D) як функції незалежного параметра t, що зазвичай змінюється від 0 до 1:

P(t) = (x(t), y(t)), t ∈ [0, 1]

При t = 0 крива починається, при t = 1 — закінчується. Проміжні значення простежують шлях неперервно. Швидкість, з якою змінюється t, не впливає на форму, а лише на швидкість обходу — ключова властивість, що полегшує анімацію параметричних кривих.

Вектор дотичної у будь-якій точці — це просто похідна за t:

P'(t) = (x'(t), y'(t))

Знання цієї дотичної є ключовим для плавного з'єднання сегментів кривих та обчислення нормалей до поверхні у 3D-моделюванні.

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

Поль де Кастельжо розробив чудово геометричний спосіб обчислення кривої Без'є без будь-якої явної поліноміальної формули. Маючи n+1 опорних точок P₀, P₁, …, Pₙ, алгоритм послідовно лінійно інтерполює сусідні точки, поки не залишиться одна — ця точка лежить на кривій при параметрі t.

Для квадратичної кривої Без'є (n = 2, три опорні точки P₀, P₁, P₂):

Рівень 1: Q₀(t) = (1−t)·P₀ + t·P₁ Q₁(t) = (1−t)·P₁ + t·P₂
Рівень 2: B(t) = (1−t)·Q₀(t) + t·Q₁(t)

Для кубічної кривої Без'є (n = 3, чотири опорні точки) додається ще один рівень інтерполяції:

Рівень 1: Q₀ = (1−t)P₀ + tP₁, Q₁ = (1−t)P₁ + tP₂, Q₂ = (1−t)P₂ + tP₃
Рівень 2: R₀ = (1−t)Q₀ + tQ₁, R₁ = (1−t)Q₁ + tQ₂
Рівень 3: B(t) = (1−t)R₀ + tR₁

Алгоритм є чисельно стабільним і природно забезпечує механізм підподілу: ліва підкрива використовує проміжні точки лівої гілки, права — правої. Це основа адаптивного рендерингу: підподіляти, доки кожен шматок не стане достатньо пласким, щоб апроксимувати прямою лінією.

Числова перевага: де Кастельжо потребує лише лінійних інтерполяцій (додавань та множень на скаляри між 0 і 1), що робить алгоритм дуже стабільним навіть для кривих високого ступеня, тоді як пряме обчислення полінома страждає від катастрофічного скасування при великих степенях.

3. Поліноми Бернштейна та явна формула

Ту саму криву можна виразити як зважену суму опорних точок, де ваги — це базисні поліноми Бернштейна:

B(t) = Σᵢ₌₀ⁿ C(n,i) · tⁱ · (1−t)ⁿ⁻ⁱ · Pᵢ

де C(n,i) = n! / (i! · (n−i)!) — біноміальний коефіцієнт

Скалярна вага i-ї опорної точки при параметрі t:

Bᵢ,ₙ(t) = C(n,i) · tⁱ · (1−t)ⁿ⁻ⁱ

Поліноми Бернштейна мають кілька ключових властивостей, що роблять криві Без'є коректно поведеними:

Для кубічної кривої (n = 3) чотири поліноми Бернштейна:

B₀,₃(t) = (1−t)³ B₁,₃(t) = 3t(1−t)² B₂,₃(t) = 3t²(1−t) B₃,₃(t) = t³

Їхня сума дорівнює (1−t+t)³ = 1, що підтверджує розбиття одиниці, а кожен має рівно один максимум у [0,1], надаючи кожній опорній точці виразну зону впливу.

4. Кубічні криві Без'є на практиці

Кубічні криві Без'є — визначені рівно чотирма опорними точками — є основою 2D-графіки. Команда C у SVG, функція CSS cubic-bezier(), шрифти PostScript та контури PDF використовують виключно їх.

Для опорних точок P₀, P₁, P₂, P₃ рівняння кривої у матричній формі:

B(t) = [1 t t² t³] · M_B · [P₀ P₁ P₂ P₃]ᵀ

де M_B (матриця базису Без'є) = [ 1 0 0 0 ] [−3 3 0 0 ] [ 3 −6 3 0 ] [−1 3 −3 1 ]

Перша похідна у кінцевих точках визначає напрямки дотичних:

B'(0) = 3·(P₁ − P₀) ← дотична на початку B'(1) = 3·(P₃ − P₂) ← дотична у кінці

Це означає, що P₁ лежить вздовж дотичної від P₀, а P₂ — вздовж дотичної до P₃. Дизайнери інтуїтивно переміщують маніпулятори P₁ і P₂, щоб керувати кутами входу та виходу кривої.

Анімаційний тайминг у CSS: cubic-bezier(0.25, 0.1, 0.25, 1.0) визначає криву в одиничному квадраті, де P₀ = (0,0), P₃ = (1,1) зафіксовані, а P₁ = (0.25, 0.1), P₂ = (0.25, 1.0) — два маніпулятори. Вісь x — час, вісь y — прогрес анімації; форма кривої задає згладжування.

5. Сплайни, неперервність і B-сплайни

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

Класи неперервності

B-сплайни та NURBS

B-сплайни (базисні сплайни) узагальнюють криві Без'є, розподіляючи опорні точки за вузловим вектором, а не прив'язуючи кожен сегмент рівно до чотирьох точок. B-сплайн ступеня d з n+1 опорними точками та вузловим вектором T = {t₀, …, tₘ}:

S(t) = Σᵢ₌₀ⁿ Nᵢ,d(t) · Pᵢ

де Nᵢ,d(t) визначаються рекурсією Кокса–де Бора:
Nᵢ,₀(t) = 1 якщо tᵢ ≤ t < tᵢ₊₁, інакше 0 Nᵢ,d(t) = (t−tᵢ)/(tᵢ₊d−tᵢ) · Nᵢ,d₋₁(t) + (tᵢ₊d₊₁−t)/(tᵢ₊d₊₁−tᵢ₊₁) · Nᵢ₊₁,d₋₁(t)

NURBS (нерівномірні раціональні B-сплайни) додають вагу wᵢ до кожної опорної точки, уможливлюючи точне представлення конічних перетинів (кіл, еліпсів, парабол). Вони є стандартним обміновим форматом у CAD/CAM та ізостандартах STEP і IGES.

S(t) = Σᵢ (wᵢ · Nᵢ,d(t) · Pᵢ) / Σᵢ (wᵢ · Nᵢ,d(t))

Інтерактивна симуляція кривих Без'є

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

Відкрити симуляцію →

6. Практичне застосування

Типографіка та рендеринг шрифтів

Шрифти TrueType зберігають контури гліфів як квадратичні сегменти Без'є; шрифти OpenType/PostScript використовують кубічні. Одна літера, як-от "g", може складатися з 10–30 сегментів кривої. Растеризатор шрифтів обчислює ці криві з субпіксельною роздільністю, застосовує антиаліасинг і рендерить результат на піксельну сітку. FreeType, бібліотека з відкритим кодом, що живить Linux, Android та вбудовані пристрої, використовує підподіл де Кастельжо для уникнення нестабільності чисел з плаваючою комою на слабкому залізі.

Анімація та шляхи руху

Програмне забезпечення для анімації, як-от Blender, Adobe After Effects та Unreal Engine, зберігає дані ключових кадрів як кубічні сплайни у часі. Аніматор регулює маніпулятори (точки дотичних P₁, P₂), щоб створити ефекти плавного прискорення та сповільнення. Ігрові рушії використовують сплайни Ерміта (еквівалент кубічних Без'є, але параметризовані положеннями кінцевих точок і похідними) для руху персонажів уздовж рейок, шляхів камери та профілів ландшафту.

CAD та виробництво

Панелі кузовів автомобілів, фюзеляжі літаків та профілі лопаток турбін — усі вони проектуються за допомогою поверхонь NURBS — тензорних добутків кривих NURBS у двох параметричних напрямках. Формат ISO STEP передає ці моделі між CAD-системами. Фрезерні верстати з ЧПУ отримують G-код із командами інтерполяції дуги та сплайна, похідними з геометрії NURBS. Допуск виробництва зазвичай контролюється радіусом кривизни поверхні: κ = |B'×B''| / |B'|³.

Роботика та планування траєкторії

Роботизовані маніпулятори та автономні транспортні засоби мають рухатися плавними траєкторіями, щоб уникнути різких прискорень, що напружують механічні з'єднання. Планувальник траєкторії генерує кубічні сплайни у просторі кутів з'єднань, що задовольняють граничні умови швидкості та прискорення у кожній точці шляху, мінімізуючи інтеграл квадрата ривка. Квінтичні (ступінь 5) сплайни Ерміта переважають, коли потрібна також неперервність прискорення.

Симуляція параметричних поверхонь

Подивіться, як двовимірні латки Без'є об'єднуються у гладкі 3D поверхні — технологія CAD-моделювання та шейдерів тесселяції GPU.

Відкрити симуляцію →

Часті запитання

У чому різниця між кривою Без'є та сплайном?

Крива Без'є — це один поліноміальний сегмент, визначений n+1 опорними точками. Сплайн — кусково-гладка крива, що складається з кількох сегментів Без'є, з'єднаних умовами неперервності. Сплайни пропонують локальне керування: переміщення одного маніпулятора впливає лише на сусідні сегменти, тоді як зміна опорної точки Без'є високого ступеня зміщує всю криву.

Чому кубічні криві Без'є переважають над квадратичними чи вищого ступеня?

Чотири опорні точки дають незалежне керування обома кінцевими точками та обома напрямками дотичних — рівно стільки, щоб забезпечити C¹ або G¹ неперервність у з'єднаннях без зайвих обмежень форми. Квадратичні кривки не мають незалежної дотичної на кожному кінці; ступінь 5+ додає зайву складність із мінімальними перевагами.

Як властивість опуклої оболонки допомагає у комп'ютерній графіці?

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

Який ступінь має крива Без'є з n опорними точками?

Крива Без'є, визначена n+1 опорними точками (P₀ до Pₙ), має ступінь n. Дві точки дають лінійну криву (ступінь 1), три — квадратичну (ступінь 2), чотири — кубічну (ступінь 3). Додавання опорної точки підвищує ступінь рівно на одиницю.

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

Ні — поліноміальна крива Без'є не може точно представити коло. Раціональна крива Без'є (з вагами, тобто NURBS) може. Як апроксимація, кубічна чверть-кола з відстанню маніпулятора k ≈ 0,5523 радіуса досягає максимальної радіальної похибки близько 0,027%, що непомітно на екранній роздільності.

Що таке C² неперервність і чому вона важлива?

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

Як CSS використовує криві Без'є для анімаційного тайминга?

Функція CSS cubic-bezier() приймає чотири числа — (x₁, y₁, x₂, y₂) — що визначають дві внутрішні опорні точки кубічної Без'є в одиничному квадраті. Вісь x — нормалізований час, вісь y — нормалізований прогрес анімації. Ключові слова ease, ease-in, ease-out та ease-in-out — це скорочені виклики cubic-bezier().

Що таке алгоритм Кокса–де Бора?

Рекурсія Кокса–де Бора стосується B-сплайнів так само, як алгоритм де Кастельжо — кривих Без'є: це чисельно стабільна рекурсивна схема обчислення базисних функцій B-сплайна. Вона є стандартним алгоритмом у всіх CAD-ядрах і математично еквівалентна повторному вставлянню вузлів.

Що таке NURBS і чому їх використовують у CAD?

Нерівномірні раціональні B-сплайни (NURBS) — це B-сплайни, де кожна опорна точка має вагу wᵢ. Раціональна форма (ділення на суму зважених базисних функцій) дозволяє точно представляти конічні перетини — кола, еліпси, гіперболи, — які поліноміальні криві можуть лише апроксимувати. Тому NURBS є стандартним типом геометрії у форматах обміну CAD — STEP та IGES.

Що таке підподіл і як він прискорює рендеринг?

Алгоритм де Кастельжо при t = 0,5 одночасно обчислює середню точку і розбиває криву на дві підкриві з половиною параметричного діапазону. Повторний підподіл дає все коротші сегменти, що наближаються до прямих ліній. Рендерер зупиняє підподіл, коли відхилення сегмента від хорди менше пікселя, і малює хорду. Цей адаптивний метод рендерить плавні криві значно меншою кількістю відрізків, ніж підхід з фіксованим кроком.

Джерела