Измиване с криви на Бези

От последните няколко дни се опитвам да напиша своя малка библиотека за анимация на JavaScript. Знам, че знам, че никой не се интересува от нова анимационна библиотека, но хей, въпросът е, че в процеса се натъкнах на кривите на Безие. Прекарах няколко часа в проучване, опитвайки се да ги разбера, по време на което попаднах на тази нова статия - „Математическа интуиция зад кривите на Безие“, която също е вдъхновението за тази статия. Това е математика и привидно насочена към мозъчни хора, затова ми беше трудно да си увия главата около концепцията. Но за щастие в крайна сметка го направих и това доведе до научаването на редица страхотни нови неща за кривите на Безие, които много се радвам да споделя с вас.

Какво ще научите

Ще започна с въведение в кривите, какви са те, защо са готини, тяхното математическо представяне. Не се притеснявайте за математиката, честно казано, аз някак си смучам математиката, така че трябва да дойда с начини да се опитам да си го обясня и съм сигурен, че "начините" ще работят и за вас :).

След това ще преминем към кривите на Безие. Какви са те и какво ги прави различни. Тяхната математическа формула.

Към края ще изградим свой собствен малък механизъм за чертане на криви на Безие в JavaScript и SVG. Колко готино е това?

Криви

Не е нужно да давам официално определение на кривата тук, нали? Всички тези линии са криви, вижте ги

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

Добре добре, това изглежда като случайно надраскана линия. Позволете ми да добавя малко контекст.

Сега трябва да даде по-добра представа за това, което представлява. На хоризонталната ос е броят на дните, откакто съм се присъединил към Twitter, а на вертикалната ос е броят на последователите, които спечелих.

В първия си ден в Twitter имах 0 последователи, след това бавно се увеличаваше, загубих някои, спечелих малко, след това във втората половина, както виждате, спечелих редица нови последователи. Това не е единствената информация, която можем да разгадаем от тази крива. Също така мога да разбера точния брой последователи, които имах във всеки един ден. Въпросът е само да се нарисуват две линии.

Да предположим, че бих искал да знам броя последователи, които имах през 60-ия ден.

Изчертавам вертикална линия от 60 по хоризонталната ос, след това от точката, където тази линия пресича кривата, чертая хоризонтална линия. Тази хоризонтална линия пресича вертикалната ос (ос с брой последователи) в дадена точка. Стойността на тази точка по вертикалната ос ми дава точния брой последователи, които имах през 60-ия ден, което е 126.

Сега, където двете червени линии се пресичат, е това, което се нарича точка . В двуизмерен график, подобно на графиката на нашите последователи в Twitter, точка се идентифицира уникално чрез две стойности, хоризонталната координата ( x ) и вертикалната координата ( y ). Следователно изписването (x, y) е всичко, което е необходимо за представяне на точка. В нашия случай червената точка, където двете червени линии се пресичат, може да бъде записана като (60, 126).

(60 = x / хоризонтална координата, 126 = y / вертикална координата)

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

Вземате масив от данни като за 0-ия ден 0 последователи, 1-вия ден 50 последователи ... 10-ия ден 76 последователи ... 100-ия ден 500 последователи ... и така нататък. Преобразувате тези данни в точки (0, 0) (1, 50) ... (10, 76) ... (100, 500) ... Начертавате точките на графиката, обединявате ги и там, имате крива.

Така че, за крива се нуждаете от точки, а за точките - съответни стойности x и y. Следователно, сега обърнете внимание тук, кривата може да бъде уникално представена от нещо, което може да изплюе стойностите x и или y за нас. Това „нещо“ е това, което наричаме по математика функция.

В математиката има много стандартни функции. Помислете за синусоидната функция.

При функции като тази изборът на x е наш. Даваме му х , той ни дава у . И заедно формираме точка (x, y). Даваме му още едно х, дава ни още едно у, така че и така нататък се оказваме с колекция от точки, начертаваме ги и получаваме уникална форма.

Функция може да бъде представена и в параметрична форма . В параметрична форма не е необходимо да предоставяме част от координатата на точката, както направихме (x) в предишния пример. Вместо това ние предоставяме параметър / променлива, обикновено написана като t и за всяко t получаваме както координати x, така и y , накратко предоставяме t получаваме точка.

Ще искате да знаете какво представлява параметричната форма, когато говорим за математиката зад кривите на Безие.

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

Кривите на Бези са много специални криви. Математиката и идеята зад тях ме взривиха и вие също трябва да се приготвите да бъдете издухани.

Тъй като четете това, предполагам, че сте дизайнер или разработчик и вече сте се занимавали с криви на Безие, особено с кубични криви на Безие, ще стигнем до това какви са кубичните криви на Безие за секунда. Сега тези криви се използват на различни места, за създаване на векторна графика, пътеки за анимация, криви за облекчаване на анимацията и т.н., само защото са толкова лесни за управление . Не е нужно да знаете много математика, изобщо нито една, за да огънете тези криви според вашите капризи. Помислете, ако кривите на Безие не съществуват и хората трябва да измислят уникални математически функции за криви, за да кажем чертаем векторни графики като шрифтове например, разбира се, кошмар.

Математика?

Добре, време е за малко математика. Ще започна с общата формула за кривите на Безие, на пръв поглед е доста обезсърчително, но ще си проправим път.

„Уау! Уау! Уау! Айнщайн! ”. Хей, чакай, не щраквай. Лесно е, вижте, направих го толкова цветно?

Нека започнем да разбиваме формулата. Можете да пропуснете частите, които вече знаете.

B (t)

B, защото това е крива на B ezier. Както бе споменато по-рано в статията за параметричната форма на кривите, t е параметър. Включвате t и излиза x и y , точка. Скоро ще видим как работи това с уравнението по-горе. Тук ще бъде добре да споменем, че за кривите на Безие стойността на t трябва да бъде между 0 и 1, включително и двете.

Σ / Сигма

Този символ, Σ, в математиката се нарича оператор на сумиране. Начинът, по който работи, е по този начин, вдясно на този символ е израз с променлива i и мога да съхранява само цели числа. В горната и долната част на символа пишем границите на i. За всяка стойност на i изразът вдясно се оценява и добавя към сумата, докато i достигне n.

Ето няколко примера.

Просто по-кратка нотация за нещо по-дълго.

Добре, изглежда, че ни е ясно със сигмата.

nCi

Това C тук е C от Permutations и C ombitions. Нека имаме импровизиран урок по комбинации, нали. Сега, във формулата тази част е това, което се нарича двоичен коефициент. Начинът за четене на nCi е такъв, n Изберете i. Което ще рече дадени n елемента по колко начина можете да изберете i елементи от него (n винаги е по-голямо или равно на i). Добре, това може да не е имало много смисъл, помислете за този пример: Имам 3 елемента кръг, квадрат и триъгълник. Следователно тук n = 3. По колко начина мога да избера 2 (i = 2) елемента от 3. На езика на математиката, който ще бъде записан като 3C2 (3 Изберете 2). Отговорът е 3.

По същия начин,

И когато i е 0, има само един начин да изберете 0 елемента от n, 1, да не изберете никакъв.

Вместо да рисувате скици и да откриете отговора на даден Комбиниран израз, има тази обобщена формула.

P sub i

Това е важният бит. В общата формула за кривата на Безие има t, i и n. Всъщност не сме засегнали какво е n. n е това, което се нарича степента на кривата на Безие. n е това, което решава дали кривата на Безие е линейна, квадратна или кубична или нещо друго.

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

Нека се отървем от всички аксесоари и се съсредоточим върху ядрото.

Кривата, която виждате на изображението по-горе, е кубична крива на Безие, или с други думи, степента на кривата на Безие, показана по-горе, е 3, или в общата формула за кривите на Безие включвате n = 3.

n = 1 ви дава линейна крива на Безие с две опорни точки P0 и P1 и без контролни точки, така че по същество тя е права линия.

n = 2 ви дава квадратна крива на Безие с две опорни точки P0 и P2 и една контролна точка P1

и по подобен начин n = 3 ви дава кубична крива на Безие с две опорни точки P0 и P3 и две контролни точки P1 и P2. Колкото по-високо е n, толкова по-сложни фигури могат да бъдат изчертани.

Сега ще формираме от общото уравнение уравнението за кубична крива на Безие, което включва заместване на n = 3 в общата формула. Уравнението, което ще получим, ще бъде в променливата t, която, както споменахме по-рано, е параметър, чиято стойност варира между 0 и 1. Също така, за уравнението ще ни трябват 4 Pis (прочетете: Pee eyes) P0, P1, P2 и P3. Изборът на тези точки зависи от нас, в края на краищата, когато рисуваме векторна графика, казваме, че с помощта на инструмента за писалка избираме позицията на опорни точки, а контролните точки нали? След промените нашето уравнение за кубична крива на Безие изглежда по следния начин.

Тук използваме малко краткост, в действителност всяка точка (P) има две координати x и y, а също така при предаване на t към общото уравнение трябва да получим точка, която също има координати x и y. Следователно можем да запишем горното уравнение като

Предстои да станете свидетели на нещо много специално за тези уравнения.

За да обобщим, споменатото уравнение е параметричната форма на кривата на Безие с параметъра t, който може да съдържа стойности, вариращи между 0 и 1. Кривата е колекция от точки. Всяко уникално t, което предавате на B, дава уникална точка, която изгражда цялата крива на Безие.

Вълшебното в уравнението е, че когато t = 0, B (0) = P0 и когато t = 1, B (1) = P3, следователно екстремните стойности на t, 0 и 1 дават най-крайните точки от крива, които, разбира се, са опорните точки. Това не е вярно само за кубични криви на Безие, за крива от степен n B (0) = P0 и B (1) = Pn.

За всяка друга стойност на t между 0 и 1 (напр. T = 0,2 на фигура по-горе) получавате точка, която изгражда кривата.

Тъй като цялото уравнение зависи от позицията на Pis (Pee eyes), промяната на тяхното положение променя формата на кривата. И по този начин работят кривите на Безие.

Сега, след като знаем математиката зад кривите на Безие, нека използваме това знание.

Създадох проста програма за JavaScript, която изобразява кубична крива на Безие, няма потребителски интерфейс, който да взаимодейства с нея, защото не исках логиката да изчезва във целия код на потребителския интерфейс, а също и защото съм мързелив. Но това не означава, че не можете да взаимодействате с него :).

Беше ли малко прекалено много за поемане? Започнахме с дефинирането на кривите, оттам се преместихме в точките и как те са градивните елементи на кривата. След това продължихме към кривите на Безие и разбрахме математиката, за да намерим точки, които правят кривата на Безие нагоре. Надявам се, че сте научили нещо и сте оставили тази статия по-умна, отколкото когато сте започнали да я четете.

Кодът за малкия персонализиран двигател Cubic Bezier може да бъде намерен в това репо GitHub.

Актуализация: Генераторът вече може да генерира крива на Бези от всяка степен, а не само кубични криви на Безие :).

Търсите още? Публикувам редовно в моя блог на nashvail.me. Ще се видим там, имайте добър!