Bezier Eğrileriyle Nerding Out

Son birkaç gündür kendi küçük JavaScript animasyon kitaplığımı yazmaya çalışıyorum. Kimsenin yeni bir animasyon kitaplığını gerçekten umursamadığını biliyorum ama asıl mesele şu ki, bu süreçte Bezier eğrilerine rastladım. Birkaç saat araştırma yaparak, onları anlamaya çalışarak bu yeni makaleye rastladım - "Bezier Eğrilerinin Ardındaki Matematiksel Sezgi" de bu makaleye ilham kaynağı oldu. Bu matematiksel ve görünüşe göre zeki insanları hedefliyor, bu yüzden kafamı bu konseptin etrafına dolamakta biraz zorlandım. Ama neyse ki, sonunda yaptım ve bu, Bezier eğrileri hakkında sizinle paylaşmaktan çok heyecan duyduğum bir dizi harika yeni şey öğrenmeme yol açtı.

Ne öğreneceksin

Eğrilere, ne oldukları, neden havalı oldukları ve matematiksel temsillerine bir giriş ile başlayacağım. Yine de Math hakkında endişelenmeyin, dürüst olmak gerekirse, Math'a bayılıyorum, bu yüzden bunu kendime açıklamaya çalışmanın yollarını bulmalıyım ve eminim ki "yollar" sizin için de işe yarayacaktır :).

Sonra, Bezier eğrilerine geçeceğiz. Ne oldukları ve onları farklı kılan şey. Matematiksel formülleri.

Sonlara doğru, JavaScript ve SVG'de kendi küçük Bezier eğri çizim motorumuzu oluşturacağız. Ne kadar serin?

Eğriler

Burada eğrinin resmi bir tanımını yapmama gerek yok değil mi? Tüm bu çizgiler eğriler, onlara bakın

Eğriler oldukça tatlıdır, birçok şeyi temsil edebilirler. Örneğin, aşağıdaki eğri, zaman içindeki Twitter takipçilerimin sayısını gösteriyor.

Pekala, bu rastgele karalanmış bir satıra benziyor. Biraz bağlam eklememe izin verin.

Şimdi neyi temsil ettiği konusunda daha iyi bir fikir vermelidir. Yatay eksende Twitter'a katıldığımdan beri geçen gün sayısı ve dikey eksende kazandığım takipçi sayısı.

Twitter'daki ilk günümde 0 takipçim vardı, sonra yavaş yavaş arttı, biraz kaybettim, biraz kazandım, sonra ikinci yarıda gördüğünüz gibi yeni takipçi kazandım. Bu eğriden deşifre edebileceğimiz tek bilgi bu değil. Ayrıca herhangi bir günde sahip olduğum tam takipçi sayısını da öğrenebilirim. Bu sadece iki çizgi çizme meselesidir.

Diyelim ki 60. günde sahip olduğum takipçi sayısını bilmek istiyorum.

Yatay eksende 60'tan dikey bir çizgi çiziyorum , sonra bu çizginin eğriyle kesiştiği noktadan yatay bir çizgi çiziyorum. Bu yatay çizgi, dikey ekseni (takipçi sayısı olan eksen) bir noktada kesişir. Dikey eksendeki bu noktanın değeri bana 60. günde 126 olan tam takipçi sayısını veriyor.

Şimdi, iki kırmızı çizginin kesiştiği noktaya nokta denir . Twitter takipçi grafiğimiz gibi 2 boyutlu bir grafikte, bir nokta iki değerle benzersiz bir şekilde tanımlanır: yatay koordinatı ( x ) ve dikey koordinatı ( y ). Bu nedenle , bir noktayı temsil etmek için gereken tek şey (x, y) yazmaktır. Bizim durumumuzda iki kırmızı çizginin kesiştiği kırmızı nokta (60, 126) olarak yazılabilir .

(60 = x / Yatay koordinat, 126 = y / Dikey Koordinat)

Pekala, amacın ne olduğu için bunu zaten biliyordun. Eğri hakkında konuşalım, aslında bu tür birçok noktadan oluşan bir koleksiyon , değil mi?

0. gün 0 takipçi, 1. gün 50 takipçi… 10. gün 76 takipçi ... 100. gün 500 takipçi… vb. Gibi bir dizi veri alıyorsunuz. Bu verileri (0, 0) (1, 50)… (10, 76)… (100, 500) noktalarına çevirirsiniz ... Grafikteki noktaları birleştirirsiniz ve orada bir eğriniz olur.

Dolayısıyla, bir eğri için noktalara ve noktalar için karşılık gelen x ve y değerlerine ihtiyacınız vardır. Bu nedenle, şimdi buraya çok dikkat edin, bir eğri, bizim için x ve veya y değerlerini ortaya çıkarabilen bir şeyle benzersiz bir şekilde temsil edilebilir. Bu "bir şey" Matematikte fonksiyon dediğimiz şeydir .

Matematikte birçok standart fonksiyon vardır. Sinüs fonksiyonunu düşünün .

Bunun gibi işlevlerde, x seçimi bizimdir. Ona bir x verirsek , bize bir y verir . Ve birlikte bir nokta (x, y) oluşturuyoruz. Ona başka bir x verirsek, bu bize başka bir y verir, ve böylece sonunda bir noktalar toplamı elde ederiz, onları işaretler ve benzersiz bir şekil elde ederiz.

Bir işlev ayrıca parametrik biçimde temsil edilebilir . Parametrik formda, önceki örnekte yaptığımız (x) gibi noktanın koordinatının bir bölümünü sağlamamıza gerek yoktur. Bunun yerine, bir parametre / değişken genel olarak yazılır kaynağı t ve her durum için t her iki olsun x ve y koordinatları, kısa bir kaynağı t bir noktası olsun.

Bezier eğrilerinin ardındaki Matematikten bahsederken parametrik formun ne olduğunu bilmek isteyeceksiniz.

Bezier Eğrileri

Bezier eğrileri çok özel eğrilerdir. Arkasındaki matematik ve fikir beni uçurdu ve sen de uçup gitmeye hazırlanmalısın.

Bunu okuduğunuza göre, bir tasarımcı veya geliştirici olduğunuzu ve daha önce Bezier eğrileriyle, özellikle de Kübik Bezier eğrileriyle uğraştığınızı varsayıyorum, Kübik Bezier eğrilerinin ne olduğunu bir saniyede anlayacağız. Şimdi bu eğriler, sadece kontrol etmeleri çok kolay oldukları için vektör grafikleri, animasyon yolları, animasyon hareket hızı eğrileri vb. Oluşturmak için çeşitli yerlerde kullanılmaktadır . Bu eğrileri kaprislerinize göre bükmek için çok fazla Matematik bilmenize gerek yok. Bezier eğrilerinin var olmadığını ve insanların eğriler için benzersiz Matematiksel işlevler bulması gerekip gerekmediğini düşünün, örneğin yazı tipleri gibi vektör grafikleri çizmek, elbette bir kabus.

Matematik?

Pekala, biraz Math zamanı. Bezier eğrileri için genel formülle başlayacağım, ilk bakışta oldukça ürkütücü, ama yolumuza devam edeceğiz.

"Whoa! Whoa! Whoa! Einstein!". Hey bekle, tıklamayın. Kolay, bak, çok renkli mi yaptım?

Formülü parçalamaya başlayalım. Zaten bildiğiniz kısımları atlayabilirsiniz.

B (t)

B çünkü bu bir B ezier eğrisi. Eğrilerin parametrik formu ile ilgili makalede daha önce bahsedildiği gibi, t bir parametredir. Bu fiş , t ve çıkan x ve y , bir nokta. Yakında yukarıdaki denklemle nasıl çalıştığını göreceğiz. Burada Bezier eğrileri için t değerinin her ikisi de dahil olmak üzere 0 ile 1 arasında olması gerektiğini belirtmekte fayda var .

Σ / Sigma

Matematikteki bu sembol, sum, toplama operatörü olarak adlandırılır. İşleyiş şekli şu şekildedir, bu sembolün sağında i değişkenli bir ifade var ve sadece tamsayı değerleri tutabiliyorum. Sembolün üstüne ve altına i'nin sınırlarını yazıyoruz. Her bir i değeri için sağdaki ifade değerlendirilir ve i n'ye ulaşana kadar toplama eklenir.

İşte bazı örnekler.

Daha uzun bir şey için sadece daha kısa bir gösterim.

Pekala, görünüşe göre sigma konusunda anlaştık.

nCi

Bu C burada, Permutasyonlar ve gelen C C ombinations. Doğaçlama bir Kombinasyonlar dersi verelim mi? Şimdi, formülde bu bölüm Binom katsayısı olarak adlandırılan şeydir. NCi'yi okumanın yolu şöyledir, n i seçin . Bu, n madde verildiğinde, i maddeyi kaç yoldan seçebileceğinizdir (n her zaman i'den büyük veya eşittir). Pekala, bu pek mantıklı gelmeyebilir, şu örneği düşünün: 3 öğem var, bir daire, bir kare ve bir üçgen. Dolayısıyla burada n = 3. 3 maddeden 3C2 olarak yazılacak 2 (i = 2) maddeyi kaç yoldan seçebilirim (3 2 Seçiniz). Cevap 3.

Benzer şekilde,

Ve i 0 olduğunda, n, 1 arasından 0 öğeyi seçmenin tek bir yolu var, hiçbirini seçmiyor.

Eskizler çizmek ve belirli bir Kombinasyon ifadesinin cevabını bulmak yerine, bu genelleştirilmiş formül var.

P sub i

Bu önemli kısım. Bezier eğrisinin genel formülünde t, i ve n vardır. N'nin ne olduğuna gerçekten değinmedik. n, Bezier eğrisinin derecesi olarak adlandırılan şeydir. n, bir Bezier eğrisinin doğrusal mı yoksa ikinci dereceden mi yoksa kübik mi yoksa başka bir şey mi olduğuna karar verir.

Görüyorsunuz, daha önce kalem aracını kullandıysanız, iki farklı nokta oluşturmak için iki farklı konuma tıklarsınız ve sonra iki nokta arasında oluşan eğriyi tutamaçları kullanarak kontrol edersiniz. Bir Bezier eğrisinde her zaman en az iki tutturma noktası olur ve geri kalanlar eğrinin şeklini kontrol etmek için kullanılan kontrol noktalarıdır. Ayrıca, tutamaçlar dediğiniz şey, sadece bir bağlantı noktasına bir çizgi ile bağlanan kontrol noktalarıdır, daha iyi bir zihinsel model sağlamak için oradalar. Yani kolları ayarladığınızda, gerçekte sadece kontrol noktalarının koordinatlarını değiştirmiş olursunuz.

Tüm aksesuarlardan kurtulalım ve çekirdeğe odaklanalım.

Yukarıdaki resimde gördüğünüz eğri bir Kübik Bezier eğrisidir veya başka bir deyişle, yukarıda gösterilen Bezier eğrisinin derecesi 3'tür veya Bezier Eğrileri için genel formülde n = 3 koyarsınız.

n = 1, iki bağlantı noktası P0 ve P1 olan ve kontrol noktası içermeyen doğrusal bir Bezier eğrisi verir, bu nedenle esasen düz bir çizgi olur.

n = 2, iki bağlantı noktası P0 ve P2 ve bir kontrol noktası P1 olan ikinci dereceden bir Bezier Eğrisi verir

ve benzer şekilde n = 3, iki bağlantı noktası P0 ve P3 ve iki kontrol noktası P1 ve P2 olan bir Kübik Bezier eğrisi verir. N ne kadar yüksekse, o kadar karmaşık şekiller çizilebilir.

Şimdi genel denklemden, genel formülde n = 3'ün ikame edilmesini içeren Kübik Bezier eğrisi denklemini oluşturacağız. Elde edeceğimiz denklem, daha önce de belirtildiği gibi değeri 0 ile 1 arasında değişen bir parametre olan t değişkeninde olacaktır . Ayrıca denklem için 4 Pis'e ihtiyacımız olacak (okuyun: Pee eyes) P0, P1, P2 ve P3. Bu noktaların seçimi bize kalmış, sonuçta vektör grafikleri çizdiğimizde, kalem aracını kullanarak bağlantı noktalarının ve kontrol noktalarının konumunu seçtiğimizi söyleyin, değil mi? Değişikliklerden sonra Kübik Bezier eğrisi denklemimiz şuna benzer.

Burada biraz kısalık kullanıyoruz, gerçekte her nokta (P) 'nin iki koordinatı x ve y vardır ve ayrıca t'yi genel denkleme geçtikten sonra x ve y koordinatlarına sahip bir nokta elde etmemiz gerekir. Bu nedenle yukarıdaki denklemi şu şekilde yazabiliriz:

Bu denklemlerle ilgili çok özel bir şeye şahit olmak üzeresiniz.

Özetlemek gerekirse, bahsedilen denklem, 0 ile 1 arasında değişen değerleri tutabilen t parametresine sahip Bezier eğrisinin parametrik formudur. Bir eğri, bir noktalar topluluğudur. B'ye ilettiğiniz her benzersiz t , tüm Bezier eğrisini oluşturan benzersiz bir nokta verir.

Denklemle ilgili sihirli olan şey, t = 0, B (0) = P0 ve t = 1, B (1) = P3 olduğunda, bu nedenle, t, 0 ve 1'in uç değerlerinin en uç noktaları vermesidir. elbette çapa noktaları olan eğri. Bu sadece kübik Bezier eğrileri için doğru değildir, n B (0) = P0 ve B (1) = Pn dereceli bir eğri için.

0 ile 1 arasındaki diğer herhangi bir t değeri için (örn. Yukarıdaki şekilde t = 0.2) eğriyi oluşturan bir nokta elde edersiniz.

Denklemin tamamı Pinin konumuna bağlı olduğundan (İşeme gözleri) konumlarını değiştirmek eğrinin şeklini değiştirir. İşte Bezier eğrileri bu şekilde çalışır.

Artık Bezier eğrilerinin arkasındaki Math'ı bildiğimize göre, bu bilgiyi biraz kullanalım.

Kübik bir Bezier eğrisi oluşturan basit bir JavaScript programı oluşturdum, bununla etkileşime girecek kullanıcı arayüzü yok çünkü tüm kullanıcı arayüzü kodunda mantığın kaybolmasını istemedim ve ayrıca tembelim. Ancak bu onunla etkileşimde bulunamayacağınız anlamına gelmez :).

Bu kabul etmek için biraz fazla mıydı? Eğrilerin ne olduğunu tanımlamakla başladık, buradan noktalara geçtik ve nasıl bir eğrinin yapı taşları olduklarını belirledik. Sonra Bezier eğrilerine gittik ve Math'ı, Bezier eğrisini yükselten noktaları bulmak için anladık. Umarım bir şeyler öğrenmişsinizdir ve bu makaleyi okumaya başladığınızdan daha akıllıca bırakmışsınızdır.

Küçük özel Cubic Bezier motorunun kodu bu GitHub deposunda bulunabilir.

Güncelleme: Jeneratör artık sadece Kübik Bezier Eğrileri değil, herhangi bir derecede Bezier eğrisi oluşturabilir :).