de Nash Vail

Nerding cu curbe Bezier

Din ultimele zile am încercat să scriu propria mea bibliotecă de animație JavaScript. Știu că știu că nimănui nu-i pasă cu adevărat de o nouă bibliotecă de animație, dar, ideea este că, în procesul în care am dat peste curbele Bezier. Am petrecut câteva ore cercetând, încercând să le înțeleg în timpul cărora am dat peste acest proaspăt articol – „Intuitia matematică din spatele curbelor Bezier”, Care se întâmplă, de asemenea, să fie inspirația pentru acest articol. Este mat și se pare că se adresează oamenilor inteligenți, prin urmare am avut un moment dificil să-mi învăluiesc capul în jurul conceptului. Dar, din fericire, până la urmă am făcut-o și acest lucru a condus la învățarea unui număr de lucruri noi și interesante despre curbele Bezier, pe care sunt foarte încântat să le împărtășesc cu dvs.

Ce veți învăța

Voi începe cu o introducere a curbelor, ce sunt, de ce sunt mișto, reprezentarea lor matematică. Nu vă faceți griji cu privire la matematică, totuși, ca să fiu sincer, cam oarecum îi suge la matematică, așa că trebuie să vin cu modalități de a-mi explica mie și sunt sigur că „căile” vor funcționa și pentru voi :).

Apoi, vom trece la curbele Bezier. Ce sunt și ce le face diferite. Formula lor matematică.

Spre final vom construi propriul nostru motor de desenare a curbei Bezier în JavaScript și SVG. Cat de tare e asta?

Curbe

Nu trebuie să dau o definiție formală a curbei aici, nu? Toate aceste linii sunt curbe, uită-te la ele

Curbele sunt destul de dulci, pot reprezenta o serie de lucruri. De exemplu, curba de mai jos arată numărul de Twitter-ul meu adepți în timp.

Bine, bine, arată ca o linie mâzgălită la întâmplare. Permiteți-mi să adaug un context.

Acum ar trebui să ofere o idee mai bună despre ceea ce reprezintă. Pe axa orizontală este numărul de zile de când m-am alăturat Twitterului și pe axa verticală este numărul de adepți pe care i-am câștigat.

În prima mea zi pe Twitter, am avut 0 adepți, apoi a crescut încet, am pierdut unii, am câștigat unii, apoi în a doua jumătate, după cum puteți vedea, am câștigat un număr de adepți noi. Aceasta nu este singura informație pe care o putem descifra din această curbă. De asemenea, pot afla numărul exact de adepți pe care i-am avut într-o zi dată. Este doar o chestiune de a trasa două linii.

Să presupunem că aș vrea să știu numărul de adepți pe care i-am avut în a 60-a zi.

Trag o linie verticală din 60 pe axa orizontală, apoi din punctul în care această linie intersectează curba trasez o linie orizontală. Această linie orizontală intersectează axa verticală (axa cu numărul de adepți) într-un punct. Valoarea acelui punct de pe axa verticală îmi oferă numărul exact de adepți pe care i-am avut în a 60-a zi, adică 126.

Acum, unde cele două linii roșii se intersectează, este ceea ce se numește a punct. Pe un grafic bidimensional, la fel ca graficul nostru de adepți Twitter, un punct este identificat în mod unic prin două valori, coordonata sa orizontală (X) și coordonata sa verticală (y). Prin urmare scrierea (X y) este tot ce este necesar pentru a reprezenta un punct. În cazul nostru, punctul roșu, unde se intersectează cele două linii roșii, poate fi scris ca (60, 126).

(60 = x / coordonată orizontală, 126 = y / coordonată verticală)

Destul de bine pentru ce este un punct, știai asta deja. Să vorbim despre curbă, care de fapt este un colectarea multor astfel de puncte nu-i așa?

Luați o serie de date, cum ar fi în ziua a 0-a 0 adepți, prima zi 50 adepți … a 10-a zi 76 adepți … a 100-a zi 500 adepți … și așa mai departe Convertiți aceste date în puncte (0, 0) (1, 50) … (10, 76) … (100, 500) … Plasați punctele de pe grafic unindu-le împreună și acolo, aveți o curbă.

Deci, pentru o curbă aveți nevoie de puncte, iar pentru puncte aveți nevoie de valorile corespunzătoare x și y. Prin urmare, acum acordați o atenție deosebită aici, o curbă poate fi reprezentată în mod unic de ceva care poate scuipa valorile x și y pentru noi. Acel „ceva” este ceea ce numim în matematică a funcţie.

Există multe funcții standard în matematică. Considera sinus funcţie.

În astfel de funcții, alegerea lui x este a noastră. Îi dăm un X, ne oferă o y. Și împreună formăm un punct (x, y). Îi dăm încă un x, ne dă un alt y, așa și așa mai departe ajungem cu o colecție de puncte, le trasăm și obținem o formă unică.

O funcție poate fi reprezentată și în formă parametrică. În formă parametrică nu este necesar să furnizăm o parte din coordonatele punctului așa cum am făcut (x) în exemplul anterior. În schimb, furnizăm un parametru / variabilă, în general scris ca t și pentru fiecare t le primim pe amândouă X și y coordonate, pe scurt oferim un t obținem un punct.

Veți dori să știți ce este forma parametrică atunci când vorbim despre matematica din spatele curbelor Bezier.

Curbele Bezier

Curbele Bezier sunt curbe foarte speciale. Matematica și ideea din spatele lor m-au suflat și ar trebui să te pregătești să fii și tu năucit.

Întrucât citiți acest lucru, presupun că sunteți un designer sau un dezvoltator și ați tratat anterior curbele Bezier, în special curbele Bezier cubice, vom ajunge la curbele Cub Bezier într-o secundă. Acum aceste curbe sunt folosite într-o varietate de locuri, pentru a crea grafică vectorială, căi de animație, animație ușurând curbele etc doar pentru că așa sunt ușor de controlat. Nu este nevoie să cunoașteți o mulțime de matematică, niciunul pentru a îndoi aceste curbe la capriciile voastre. Gândiți-vă dacă curbele Bezier nu existau și oamenii ar fi trebuit să vină cu funcții matematice unice pentru curbe, să zicem să desenăm grafică vectorială precum fonturi, de exemplu, un coșmar, desigur.

Matematica?

Bine, este timpul pentru niște matematici. Voi începe cu formula generală pentru curbele Bezier, este destul de descurajantă la prima vedere, dar ne vom croi drum.

„Whoa! Vai! Vai! Einstein! ”. Hei, așteaptă, nu face clic. Este ușor, uite, l-am făcut atât de colorat?

Să începem să descompunem formula. Puteți sări peste piesele pe care le cunoașteți deja.

B

B pentru că este un Bcurba ezier. După cum sa menționat anterior în articolul despre forma parametrică a curbelor, t este un parametru. Vă conectați t și iese X și y, un punct. În curând vom vedea cum funcționează acest lucru cu ecuația de mai sus. Va fi bine să menționăm aici că pentru Bezier curbe valoarea t ar trebui să fie între 0 și 1, ambele incluse.

Σ / Sigma

Acest simbol, Σ, în Matematică se numește operator de însumare. Modul în care funcționează este astfel, în partea dreaptă a acestui simbol este o expresie cu o variabilă i, iar i pot păstra doar valori întregi. În partea de sus și de jos a simbolului scriem limitele lui i. Pentru fiecare valoare a lui i se evaluează expresia din dreapta și se adaugă la total până când i ajunge la n.

Aici sunt cateva exemple.

Doar o notație mai scurtă pentru ceva mai lung.

Bine, se pare că suntem clari cu sigma.

nCi

Acest C aici este C din Permutări și Combinații. Hai să avem o lecție de combinații improvizate. Acum, în formulă, această parte este ceea ce se numește coeficient binomial. Modul de a citi nCi este așa, n Alege eu. Ceea ce înseamnă a fi date n elemente în câte moduri puteți alege i elemente din acesta (n este întotdeauna mai mare sau egal cu i). Bine, s-ar putea să nu fi avut mult sens, ia în considerare acest exemplu: Am 3 elemente un cerc, un pătrat și un triunghi. Prin urmare, aici, n = 3. În câte moduri pot alege 2 (i = 2) itemi din 3. În limbajul matematicii care ar fi scris ca 3C2 (3 Alegeți 2). Răspunsul este 3.

În mod similar,

Și când i este 0, există doar o singură modalitate de a alege 0 elemente din n, 1, de a alege deloc.

În loc să desenați schițe și să aflați răspunsul la o expresie dată de combinație, există această formulă generalizată.

P sub i

Acesta este elementul important. În formula generală pentru curba Bezier există t, i și n. Nu am atins cu adevărat ce este n. n este ceea ce se numește gradul curbei Bezier. n este ceea ce decide dacă o curbă Bezier este liniară sau pătratică sau cubică sau altceva.

Vedeți, dacă ați folosit instrumentul stilou înainte, faceți clic pe două locații distincte pentru a crea două puncte distincte și apoi controlați curba care se formează între cele două puncte folosind mânere. O curbă Bezier va avea întotdeauna cel puțin două puncte de ancorare, iar restul sunt puncte de control care sunt utilizate pentru a controla forma curbei. De asemenea, ceea ce numiți mânere sunt doar punctele de control conectate de o linie la un punct de ancorare, sunt doar acolo pentru a oferi un model mental mai bun. Deci, atunci când reglați mânerele, în realitate schimbați pur și simplu coordonatele punctelor de control.

Să scăpăm de toate accesoriile și să ne concentrăm asupra miezului.

Curba pe care o vedeți în imaginea de mai sus este a Curba Bezier cubică, sau cu alte cuvinte, gradul curbei Bezier prezentat mai sus este 3 sau în formula generală pentru curbele Bezier conectați n = 3.

n = 1 vă oferă o curbă liniară Bezier cu două puncte de ancorare P0 și P1 și fără puncte de control, astfel încât în ​​esență ajunge să fie o linie dreaptă.

n = 2 vă oferă o curbă Bezier pătratică cu două puncte de ancorare P0 și P2 și un punct de control P1

și în mod similar n = 3 vă oferă o curbă Cub Bezier cu două puncte de ancorare P0 și P3 și două puncte de control P1 și P2. Cu cât este mai mare n, cu atât pot fi desenate forme mai complicate.

Acum vom forma din ecuația generală ecuația pentru curba Cub Bezier care implică înlocuirea n = 3 în formula generală. Ecuația pe care o vom obține va fi în variabilă t care, așa cum am menționat anterior, este un parametru a cărui valoare variază între 0 și 1. De asemenea, pentru ecuație vom avea nevoie de 4 Pis (citiți: Pee eyes) P0, P1, P2 și P3. Alegerea acestor puncte depinde de noi, la urma urmei, când desenăm grafică vectorială, spunem că folosind instrumentul stilou, alegem poziția punctelor de ancorare, iar punctele de control nu-i așa? După modificări, ecuația noastră pentru curba Cubic Bezier arată cam așa.

Folosim puțină concizie aici, în realitate fiecare punct (P) are două coordonate x și y și, de asemenea, la trecerea t la ecuația generală, ar trebui să obținem un punct care are și coordonate x și y. Prin urmare, putem scrie ecuația de mai sus ca

Sunteți pe punctul de a asista la ceva foarte special despre aceste ecuații.

Pentru a recapitula, ecuația menționată este forma parametrică a curbei Bezier cu parametrul t care poate conține valori care variază între 0 și 1. O curbă este o colecție de puncte. Fiecare unic t treci în B oferă un punct unic care creează întreaga curbă Bezier.

Lucrul magic al ecuației este că atunci când t = 0, B (0) = P0 și când t = 1, B (1) = P3, prin urmare, valorile extreme ale t, 0 și 1 dau cele mai multe puncte extreme ale curbă care sunt desigur punctele de ancorare. Acest lucru nu este valabil doar pentru curbele Bezier cubice, pentru o curbă de grad n B (0) = P0 și B (1) = Pn.

Pentru orice altă valoare a t între 0 și 1 (de exemplu, t = 0,2 din figura de mai sus) obțineți un punct care creează curba.

Deoarece întreaga ecuație este dependentă de poziția Pis (ochii Pee), schimbarea poziției lor schimbă forma curbei. Și așa funcționează curbele Bezier.

Acum, că cunoaștem matematica din spatele curbelor Bezier, să folosim aceste cunoștințe.

Am creat un program JavaScript simplu care redă o curbă Bezier cubică, nu există nicio interfață pentru a interacționa cu ea, deoarece nu am vrut ca logica să se estompeze în tot codul UI și, de asemenea, pentru că sunt leneș. Dar asta nu înseamnă că nu poți interacționa cu el :).

A fost un pic prea mult de luat? Am început cu definirea care sunt curbele, de acolo ne-am mutat în puncte și cum sunt elementele de bază ale unei curbe. Apoi am mers la curbele Bezier și am înțeles matematica pentru a găsi puncte care fac o curbă Bezier sus. Sper că ai învățat ceva și ai lăsat acest articol mai inteligent decât atunci când ai început să-l citești.

Codul pentru micul motor personalizat Cubic Bezier poate fi găsit în acesta Repo GitHub.

Actualizați: Generatorul poate genera acum o curbă Bezier de orice grad și nu doar curbe Cub Bezier :).

Căutați mai multe? Public regulat pe blog la nashvail.me. Ne vedem acolo, are unul bun!