Криви на Безие

Криви на Безие

Кривите на Безие се използват в компютърната графика за изчертаване на плавни криви, в CSS анимация и много други.
Въпреки „умното“ име, това е много просто нещо.
По принцип можете да създавате анимация, без да знаете кривите на Безие, но си струва да изучите тази тема поне веднъж, за да използвате този прекрасен инструмент с комфорт в бъдеще. Освен това в света на векторната графика и усъвършенстваните анимации няма начин без тях.

Видове криви на Безие

Кривата на Безие се определя от опорни точки.
Те могат да бъдат два, три, четири или повече. Например:
Две точки:

Три точки:

Четири точки:

Ако се вгледате внимателно в тези криви, ще забележите „на око“:

Точките не винаги са на крива. Това е напълно нормално, ще разгледаме как се изгражда кривата малко по-късно.
Степента на кривата е равна на броя точки минус един. За две точки това е линейна крива (т.е. права), за три точки е квадратна крива (парабола), за четири точки е кубична.
Кривата винаги е вътре в изпъкналия корпус, образуван от опорните точки:

Благодарение на последното свойство в компютърната графика е възможно да се оптимизира проверката на пресичането на две криви. Ако изпъкналите им корпуси не се пресичат, кривите също не се пресичат.
Основната стойност на кривите на Безие за рисуване е, че чрез преместване на точките кривата може да бъде променена и кривата се променя по интуитивен начин.
С малко практика става ясно как да позиционирате точките, за да получите формата, която искате. И като свържете множество криви, можете да получите почти всичко.
Ето няколко примера:

Кривите на Безие имат математическа формула.
Както ще видим по-късно, няма специална нужда да го знаем, за да използваме криви на Безие, но за пълнота, ето го.

Координатите на кривите са описани в зависимост от параметъра t⋲ [0,1]

За четири точки:

Вместо Pi трябва да замените координатите на i-та контролна точка (xi, yi).
Тези уравнения са векторни, т.е.за всяка от координатите:

Вместо x1, y1, x2, y2, x3, y3 се заместват координатите на три контролни точки и докато t преминава през множеството от 0 до 1, съответните стойности (x, y) образуват кривата.

Това обаче е твърде научно, не е много ясно защо кривите са абсолютно еднакви и как те зависят от опорните точки. Друг, по-визуален алгоритъм ще ни помогне да разберем.

Рисунка "de Casteljo"

Методът на Де Кастельо е идентичен с математическата дефиниция на крива и ясно показва как е конструиран.

Алгоритъм за изграждане на крива по метода "de Casteljo":

Начертайте опорни точки. В горния пример това е 1, 2, 3.
Сегментите са изтеглени между опорните точки 1 → 2 → 3. На снимката по-горе те са кафяви.
Параметърът t варира от 0 до 1. В горния пример се използва стъпка 0,05, т.е. в цикъл 0, 0,05, 0,1, 0,15,. 0,95, 1.

За всяка от тези t стойности:

Например при t = 0 - точките ще бъдат в началото, при t = 0,25 - на разстояние 25% от началото на сегмента, при t = 0,5 - 50% (в средата), при t = 1 - в края на сегментите.

Тези точки са свързани. На снимката по-долу сегментът, който ги свързва, е показан в синьо.

На получения отсечка се взема точка на разстояние, съответстващо на t. Тоест, за t = 0,25 (първа фигура) получаваме точка в края на първата четвърт на сегмента, за t = 0,5 (втора фигура) - в средата на сегмента. На снимките по-горе тази точка е маркирана в червено.

Докато t преминава през последователността от 0 до 1, всяка стойност t добавя точка към червената крива. Множеството от такива точки за всички стойности на t образуват крива на Безие.

Това беше процес на изготвяне на три точки. Но същото се случва с четири точки.
Алгоритъм:

Точките са свързани по ред чрез сегменти: 1 → 2, 2 → 3, 3 → 4. Оказва се три кафяви сегмента.
На сегментите се вземат и свързват точките, съответстващи на текущия t. Оказва се два зелени сегмента.
На тези сегменти се вземат и свързват точките, съответстващи на тока t. Оказва се един син сегмент.
На синия сегмент се взема точката, съответстваща на текущия t. Когато изпълнявате горния пример, той е червен.
Тези точки описват кривата.

Този алгоритъм е рекурсивен. За всяко t от интервала от 0 до 1, съгласно това правило, свързващи точки на съответното разстояние, 3 са направени от 4 сегмента, след това 2 са направени от 3, след което е точка, описваща кривата за дадена стойност на t направени от 2 сегмента.
Тъй като алгоритъмът е рекурсивен, кривите на Безие от по-висок ред могат да бъдат конструирани по подобен начин: от пет точки, шест и т.н. На практика обаче те са по-малко полезни. Обикновено се използват 2-3 точки, а за сложни линии са свързани няколко криви. Това е много по-лесно от гледна точка на подкрепа и изчисления.