Nerding Out Dengan Bezier Curves

Sejak beberapa hari terakhir ini saya telah mencoba untuk menulis perpustakaan animasi JavaScript kecil saya sendiri. Saya tahu saya tahu tidak ada yang benar-benar peduli tentang perpustakaan animasi baru, tetapi hei, intinya adalah, dalam prosesnya saya menemukan kurva Bezier. Saya menghabiskan beberapa jam untuk meneliti, mencoba untuk memahami mereka selama saya menemukan artikel baru ini - "Intuisi Matematika di Balik Kurva Bezier", yang juga menjadi inspirasi untuk artikel ini. Ini matematis dan tampaknya ditujukan untuk orang-orang cerdas, oleh karena itu saya mengalami kesulitan untuk memikirkan konsep tersebut. Tapi, untungnya, pada akhirnya saya melakukannya dan ini menyebabkan saya mempelajari sejumlah hal baru yang keren tentang kurva Bezier yang sangat ingin saya bagikan dengan Anda.

Apa yang akan Anda pelajari

Saya akan mulai dengan pengenalan kurva, apa itu kurva, mengapa mereka keren, representasi matematisnya. Jangan khawatir tentang Matematika, jujur ​​saja, saya agak payah di Matematika, jadi saya harus menemukan cara untuk mencoba menjelaskannya kepada diri saya sendiri dan saya yakin “cara-cara tersebut” akan berhasil untuk Anda juga :).

Selanjutnya, kita akan beralih ke kurva Bezier. Apa itu, dan apa yang membuatnya berbeda. Rumus matematika mereka.

Menjelang akhir kita akan membangun mesin gambar kurva Bezier kecil kita sendiri dalam JavaScript dan SVG. Betapa kerennya itu?

Kurva

Saya tidak perlu memberikan definisi kurva formal di sini bukan? Semua garis ini adalah kurva, lihatlah

Kurva cukup manis, mereka dapat mewakili sejumlah hal. Seperti misalnya kurva di bawah ini menunjukkan jumlah pengikut Twitter saya dari waktu ke waktu.

Oke oke, itu terlihat seperti garis yang dicoret-coret secara acak. Izinkan saya menambahkan beberapa konteks.

Sekarang seharusnya memberikan gambaran yang lebih baik tentang apa yang diwakilinya. Di sumbu horizontal adalah jumlah hari sejak saya bergabung dengan Twitter dan di sumbu vertikal adalah jumlah pengikut yang saya peroleh.

Pada hari pertama saya di Twitter, saya memiliki 0 pengikut kemudian perlahan-lahan meningkat, saya kehilangan beberapa, mendapatkan beberapa, lalu pada paruh kedua seperti yang Anda lihat, saya mendapatkan sejumlah pengikut baru. Itu bukan satu-satunya informasi yang dapat kita uraikan dari kurva ini. Saya juga dapat mengetahui jumlah pasti pengikut yang saya miliki pada hari tertentu. Ini hanya masalah menggambar dua garis.

Katakanlah saya ingin mengetahui jumlah pengikut yang saya miliki pada hari ke-60.

Saya menggambar garis vertikal dari 60 pada sumbu horizontal, kemudian dari titik di mana garis ini memotong kurva saya menggambar garis horizontal. Garis horizontal ini memotong sumbu vertikal (sumbu dengan jumlah pengikut) pada suatu titik. Nilai titik itu pada sumbu vertikal memberi saya jumlah pasti pengikut yang saya miliki pada hari ke-60, yaitu 126.

Sekarang, di mana dua garis merah berpotongan, itulah yang disebut titik . Pada plot 2 dimensi, seperti grafik pengikut Twitter kami, sebuah titik diidentifikasi secara unik oleh dua nilai, koordinat horizontal ( x ) dan koordinat vertikalnya ( y ). Oleh karena itu, hanya perlu menulis (x, y) untuk merepresentasikan sebuah titik. Dalam kasus kami, titik merah, di mana dua garis merah berpotongan dapat ditulis sebagai (60, 126).

(60 = x / Koordinat Horizontal, 126 = y / Koordinat Vertikal)

Baiklah untuk apa maksudnya, Anda sudah tahu itu. Mari kita bicara tentang kurva, yang sebenarnya merupakan kumpulan dari banyak titik seperti itu bukan?

Anda mengambil berbagai data seperti pada hari ke-0 0 pengikut, hari pertama 50 pengikut… hari ke-10 76 pengikut ... hari ke-100 500 pengikut… dan seterusnya. Anda mengonversi data ini menjadi titik (0, 0) (1, 50)… (10, 76)… (100, 500) ... Anda memplot titik-titik pada grafik untuk menggabungkannya dan di sana, Anda memiliki kurva.

Jadi, untuk kurva Anda membutuhkan titik dan untuk titik Anda memerlukan nilai x dan y yang sesuai. Oleh karena itu, sekarang perhatikan baik-baik di sini, kurva dapat diwakili secara unik oleh sesuatu yang dapat mengeluarkan nilai x dan atau y untuk kita. "Sesuatu" itulah yang kita sebut dalam Matematika sebagai fungsi.

Ada banyak fungsi standar dalam Matematika. Pertimbangkan fungsi sinus .

Dalam fungsi seperti ini, pilihan x adalah milik kita. Kami memberikannya x , itu memberi kami y . Dan bersama-sama kita membentuk sebuah titik (x, y). Kami memberikan x lagi, itu memberi kami y lagi, dan seterusnya kami berakhir dengan kumpulan poin, kami memplotnya dan mendapatkan bentuk yang unik.

Suatu fungsi juga dapat direpresentasikan dalam bentuk parametrik . Dalam bentuk parametrik kita tidak perlu menyediakan bagian dari koordinat titik seperti yang kita lakukan (x) pada contoh sebelumnya. Sebagai gantinya kami menyediakan parameter / variabel, umumnya ditulis sebagai t dan untuk setiap t kami mendapatkan koordinat x dan y , singkatnya kami menyediakan a t kami mendapatkan titik.

Anda pasti ingin tahu apa itu bentuk parametrik ketika kita berbicara tentang Matematika di balik kurva Bezier.

Kurva Bezier

Kurva Bezier adalah kurva yang sangat spesial. Matematika dan ide di baliknya membuat saya kagum dan Anda harus bersiap-siap untuk terpesona juga.

Karena Anda membaca ini, saya anggap Anda adalah seorang desainer atau pengembang dan telah berurusan dengan kurva Bezier sebelumnya, terutama kurva Cubic Bezier, kita akan membahas kurva Cubic Bezier sebentar lagi. Sekarang kurva ini digunakan di berbagai tempat, untuk membuat grafik vektor, jalur animasi, kurva pelonggaran animasi, dll hanya karena mereka sangat mudah dikendalikan . Anda tidak perlu tahu banyak tentang Matematika, tidak ada sama sekali untuk membengkokkan kurva ini sesuai keinginan Anda. Pikirkan jika kurva Bezier tidak ada dan orang harus datang dengan fungsi Matematika yang unik untuk kurva untuk katakanlah menggambar grafik vektor seperti font misalnya, tentu saja mimpi buruk.

Matematika?

Baiklah, waktunya untuk matematika. Saya akan mulai dengan rumus umum untuk kurva Bezier, ini cukup menakutkan pada pandangan pertama, tetapi kita akan berhasil.

“Wah! Wah! Wah! Einstein! ”. Hei tunggu, jangan klik menjauh. Sangat mudah, lihat, saya membuatnya begitu berwarna?.

Mari kita mulai memecah rumus. Anda dapat melewati bagian yang sudah Anda ketahui.

B (t)

B karena kurva B ezier. Seperti yang disebutkan sebelumnya dalam artikel tentang bentuk parametrik kurva, t adalah parameter. Anda mencolokkan t dan keluar x dan y , satu titik. Kami akan segera melihat cara kerjanya dengan persamaan di atas. Baik untuk disebutkan di sini bahwa untuk kurva Bezier nilai t harus antara 0 dan 1, keduanya disertakan.

Σ / Sigma

Simbol ini, Σ, dalam Matematika disebut operator penjumlahan. Cara kerjanya adalah seperti ini, di sebelah kanan simbol ini adalah ekspresi dengan variabel i, dan saya hanya dapat menampung nilai integer. Di atas dan bawah simbol kita tulis batas i. Untuk setiap nilai i ekspresi ke kanan dievaluasi dan ditambahkan ke total hingga i mencapai n.

Berikut ini beberapa contohnya.

Hanya notasi yang lebih pendek untuk sesuatu yang lebih panjang.

Baiklah, sepertinya kita jelas dengan sigma.

nCi

C ini di sini, adalah C dari Permutasi dan kombinasi C. Mari kita memiliki pelajaran Kombinasi dadakan. Sekarang, di dalam rumus, bagian inilah yang disebut koefisien Binomial. Cara membaca nCi adalah seperti ini, n Pilih i. Artinya diberikan n item dalam berapa banyak cara Anda dapat memilih i item darinya (n selalu lebih besar dari atau sama dengan i). Oke, itu mungkin tidak terlalu masuk akal, pertimbangkan contoh ini: Saya memiliki 3 item lingkaran, persegi dan segitiga. Oleh karena itu di sini, n = 3. Berapa banyak cara saya dapat memilih 2 (i = 2) item dari 3. Dalam bahasa Matematika yang akan ditulis sebagai 3C2 (3 Pilih 2). Jawabannya adalah 3.

Demikian pula,

Dan jika i bernilai 0, hanya ada satu cara untuk memilih 0 item dari n, 1, untuk memilih tidak ada sama sekali.

Alih-alih menggambar sketsa dan mencari tahu jawaban untuk ekspresi Kombinasi yang diberikan, ada rumus umum ini.

P sub i

Ini bagian yang penting. Dalam rumus umum untuk kurva Bezier terdapat t, i dan n. Kami belum benar-benar menyentuh apa itu n. n adalah yang disebut derajat kurva Bezier. n adalah yang menentukan apakah kurva Bezier linier atau kuadrat atau kubik atau yang lainnya.

Anda lihat, jika Anda pernah menggunakan alat pena sebelumnya, Anda klik di dua lokasi berbeda untuk membuat dua titik berbeda dan kemudian Anda mengontrol kurva yang terbentuk di antara dua titik menggunakan pegangan. Kurva Bezier akan selalu memiliki setidaknya dua titik jangkar, dan sisanya adalah titik kontrol yang digunakan untuk mengontrol bentuk kurva. Juga, apa yang Anda panggil pegangan hanyalah titik kontrol yang dihubungkan oleh garis ke titik jangkar, mereka hanya ada di sana untuk memberikan model mental yang lebih baik. Jadi saat Anda menyesuaikan pegangan, pada kenyataannya Anda hanya mengubah koordinat titik kontrol.

Mari kita singkirkan semua aksesori dan fokus pada inti.

Kurva yang Anda lihat pada gambar di atas adalah kurva Kubik Bezier, atau dengan kata lain derajat dari kurva Bezier yang ditunjukkan di atas adalah 3, atau dalam rumus umum untuk Kurva Bezier yang Anda masukkan n = 3.

n = 1 memberi Anda kurva Bezier linier dengan dua titik jangkar P0 dan P1 dan tidak ada titik kontrol, jadi pada dasarnya ini akan menjadi garis lurus.

n = 2 memberi Anda Kurva Bezier kuadrat dengan dua titik jangkar P0 dan P2 dan satu titik kontrol P1

dan demikian pula n = 3 memberi Anda kurva Cubic Bezier dengan dua titik jangkar P0 dan P3 dan dua titik kontrol P1 dan P2. Semakin tinggi n, bentuk yang lebih rumit dapat digambar.

Sekarang kita akan membentuk dari persamaan umum persamaan untuk kurva Kubik Bezier yang melibatkan substitusi n = 3 dalam rumus umum. Persamaan yang akan kita dapatkan akan berada pada variabel t yang seperti disebutkan sebelumnya merupakan parameter yang nilainya bervariasi antara 0 dan 1. Selain itu, untuk persamaan tersebut kita membutuhkan 4 Pis (baca: Pee eyes) P0, P1, P2 dan P3. Pilihan titik-titik ini terserah kita, lagipula ketika kita menggambar grafik vektor katakanlah menggunakan pen tool kita memilih posisi titik jangkar dan titik kontrol bukan? Setelah perubahan persamaan kita untuk kurva Cubic Bezier terlihat seperti ini.

Kami menggunakan sedikit keringkasan di sini, pada kenyataannya setiap titik (P) memiliki dua koordinat x dan y dan juga saat meneruskan t ke persamaan umum kita diharapkan mendapatkan titik yang juga memiliki koordinat x dan y. Oleh karena itu kita dapat menuliskan persamaan di atas sebagai

Anda akan menyaksikan sesuatu yang sangat istimewa tentang persamaan ini.

Singkatnya, persamaan tersebut adalah bentuk parametrik dari kurva Bezier dengan parameter t yang dapat menampung nilai yang bervariasi antara 0 dan 1. Kurva adalah kumpulan titik. Setiap t unik yang Anda berikan ke B memberikan poin unik yang membangun keseluruhan kurva Bezier.

Hal ajaib tentang persamaan ini adalah ketika t = 0, B (0) = P0 dan ketika t = 1, B (1) = P3, oleh karena itu, nilai ekstrim dari t, 0 dan 1 memberikan titik paling ekstrim dari kurva yang tentu saja merupakan titik jangkar. Ini tidak benar hanya untuk kurva Bezier kubik, untuk kurva berderajat n B (0) = P0 dan B (1) = Pn.

Untuk nilai t lainnya antara 0 dan 1 (mis. T = 0,2 pada gambar di atas) Anda mendapatkan titik yang membentuk kurva.

Karena seluruh persamaan bergantung pada posisi Pis (mata kencing) mengubah posisinya mengubah bentuk kurva. Dan begitulah cara kerja kurva Bezier.

Sekarang setelah kita mengetahui Matematika di balik kurva Bezier, mari kita manfaatkan pengetahuan itu.

Saya telah membuat program JavaScript sederhana yang membuat kurva Bezier kubik, tidak ada UI untuk berinteraksi dengannya karena saya tidak ingin logikanya menghilang di semua kode UI dan juga karena saya malas. Tetapi itu tidak berarti Anda tidak dapat berinteraksi dengannya :).

Apakah itu terlalu berlebihan untuk diterima? Kami mulai dengan mendefinisikan apa itu kurva, dari sana kami pindah ke titik dan bagaimana itu adalah blok bangunan dari sebuah kurva. Kemudian kami melanjutkan ke kurva Bezier dan memahami Matematika untuk menemukan poin yang membuat kurva Bezier naik. Saya harap Anda mempelajari sesuatu dan meninggalkan artikel ini dengan lebih cerdas daripada saat Anda mulai membacanya.

Kode untuk mesin Cubic Bezier kustom kecil dapat ditemukan di repo GitHub ini.

Pembaruan: Generator sekarang dapat menghasilkan kurva Bezier dengan derajat apa pun dan bukan hanya Kurva Bezier Kubik :).

Mencari lebih banyak lagi? Saya menerbitkan secara teratur di blog saya di nashvail.me. Sampai jumpa di sana, selamat bersenang-senang!