Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript
Code

Matematika dan ActionScript kurva: Menggambar kurva kuadrat dan kubik

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called You Do The Math.
Understanding Affine Transformations With Matrix Mathematics
The Math and ActionScript of Curves: Roots

Indonesian (Bahasa Indonesia) translation by Fodal Fadul (you can also view the original English article)

Kita melihat garis-garis yang digunakan dalam banyak skenario. Kurva juga sering dipakai, meskipun mungkin tidak sering - tapi itu tidak melemahkan pentingnya mereka! Dalam tutorial ini kita akan melihat lebih dekat pada kurva, terutama kuadrat dan kubik kurva, bersama dengan beberapa fitur matematika mereka sering digunakan.


Hasil akhir Tinjauan

Mari kita lihat pada hasil akhir yang kita akan bekerja ke arah. Seret titik merah dan melihat perubahan gradien dalam posisi.

Dan di sini adalah demo lain, menggunakan kurva kubik, tanpa gradien:


Langkah 1: kurva

Kuadrat dan kubik akan ditampilkan di setiap bagian ini. Jadi mari kita lihat pertama persamaan kurva. Persamaan ini ditulis dalam bentuk polinomial, dimulai dengan istilah tingkat tertinggi. Yang pertama adalah Persamaan kuadrat (tingkat tertinggi adalah 2); yang kedua adalah persamaan kubik (tingkat tertinggi adalah 3).
\[f(x) = ax ^ 2 + Bx + C\... (eq\ 1) \]
\[g(x) = ax ^ 3 + Bx ^ 2 + Cx + D\... (eq\ 2) \]

Perhatikan bahwa A, B, C dan D adalah bilangan real. Jadi sekarang bahwa kita dikenal oleh itu, mari kita coba untuk memvisualisasikan itu. Grafik kurva akan upaya kami berikutnya.


Langkah 2: Grafik kurva

Pertama, mari kita grafik kurva kuadrat. Saya yakin semua pembaca memiliki lima kuadrat kurva di kelas matematika SMA, tetapi hanya untuk menyegarkan ingatan Anda, saya hadir grafik di bawah ini. Mereka ditempatkan berdampingan untuk memudahkan perbandingan.

  • Kiri grafik menggunakan ruang koordinat Kartesius
  • Kanan grafik menggunakan Flash mengkoordinasikan Ruang
Graphing onto Cartesian and Flash coordinate spaces.

Yang jelas perbedaan adalah sumbu y terbalik Flash mengkoordinasikan ruang. Mereka tampak sederhana secara keseluruhan, kan? Oke, sekarang kita telah siap untuk plot ke Flash mengkoordinasikan ruang.


Langkah 3: Koefisien kuadrat

Posisi kuadrat kurva di tempat yang tepat, kita perlu memahami persamaan mereka sesuai. Kurva yang diambil sangat tergantung pada persamaan koefisien (untuk kasus kuadrat, mereka adalah A, B dan C).

Saya telah menyertakan Flash presentasi di bawah ini sehingga Anda dapat dengan mudah men-tweak koefisien ini dan mendapatkan umpan balik segera.

Untuk mempelajari efek dari koefisien individu pada kurva secara keseluruhan, saya menyarankan langkah-langkah di bawah ini untuk bereksperimen dengan Flash presentasi di atas.

  1. Sementara pengaturan A dan B ke 0, men-tweak nilai C nilai-nilai positif dan negatif. Anda akan melihat baris yang tinggi berubah.
  2. Sekarang men-tweak nilai B antara nilai-nilai positif dan negatif. Mengamati apa yang terjadi dengan gradien baris.
  3. Sekarang mengubah nilai a antara nilai-nilai positif dan negatif, dan membandingkan hasil.
  4. Kemudian men-tweak B antara menjadi positif dan negatif lagi. Mengamati kurva yang selalu memotong melalui asal.
  5. Akhirnya men-tweak mengamati C. pergeseran kurva seluruh sepanjang sumbu y.

Pengamatan lain yang menarik adalah bahwa seluruh kedua dan ketiga langkah-langkah di atas, titik infleksi (yaitu titik balik) tetap pada titik yang sama di sumbu y.


Langkah 4: Alternatif persamaan satu

Anda dengan cepat melihat bahwa posisi kurva ini agak sulit. Persamaan yang digunakan tidak praktis jika kita mau, mengatakan, menemukan koordinat titik terendah pada kurva.

Solusi? Kami akan menulis ulang persamaan menjadi bentuk yang diinginkan. Memeriksa persamaan berikut:

\[f(x) = P (x + Q) ^ 2 + R\]

Hal ini masih Persamaan kuadrat, tapi itu telah mengambil bentuk lain. Sekarang kita dapat dengan mudah mengontrol poin minimum dan maksimum pada kurva. Sebelumnya Flash presentasi, klik pada tombol "Pendekatan 1" di atas kanan dan bermain dengan nilai-nilai baru.

Berikut adalah penjelasan singkat tentang peran koefisien:

Koefisien Peran
P Kontrol kecuraman kurva.
Q Kontrol perpindahan dari titik balik kurva di sepanjang sumbu x.
R Kontrol perpindahan dari titik balik curve sepanjang sumbu.

Meskipun demikian, hal ini masih sulit untuk membuat kurva melewati serangkaian diberikan poin. Kita akan memiliki ketat pra-menghitung pada kertas sebelum menerjemahkan kode.

Untungnya, ada solusi yang lebih baik. Tapi sebelum pergi melalui itu, mari kita lihat implementasi ActionScript sampai sekarang.


Langkah 5: ActionScript implementasi

Berikut adalah persamaan ditulis sebagai ActionScript fungsi (Lihat Graphing.as di download sumber).

Dan di sini adalah penerapan metode gambar menggunakan Graphics.drawPath(). Hanya catatan bahwa semua kurva dalam artikel ini diambil dengan cara sama.

Pertama variabel...

Sekarang y-posisi, dihitung berdasarkan posisi x dan koefisien tertentu.

(Bingung tentang >> operator? Lihatlah tutorial ini.)


Langkah 6: Alternatif persamaan dua

Misalkan kita diberi tiga poin yang kurva kuadrat harus menyeberang melalui; Bagaimana kami bentuk sesuai persamaan? Lebih khusus lagi, bagaimana kami dapat menentukan nilai koefisien dari persamaan? Aljabar linear datang untuk menyelamatkan. Mari kita menganalisis masalah ini.

Kita tahu bahwa Persamaan kuadrat selalu mengambil bentuk seperti tertulis dalam EQ 1 pada langkah 1.

\[f(x) = ax ^ 2 + Bx + C\... (eq\ 1) \]

Karena semua tiga koordinat diberikan yang berbaring di kurva yang sama, mereka masing-masing harus memenuhi persamaan ini, dengan koefisien sama sebagai persamaan kurva yang kita cari. Mari kita menulis ini dalam bentuk persamaan.

Diberikan tiga Koordinat:

  • \ (S\ \left (S_x, \ S_y\right) \)
  • \ (T\ \left (T_x, \ T_y\right) \)
  • \ (U\ \left (U_x, \ U_y\right) \)

Mengganti nilai-nilai ini ke dalam (eq 1). Dicatat bahwa A, B, C tidak diketahui pada saat ini.

\[f(x) = ax ^ 2 + Bx + C\... (eq\ 1) \]

  • \ (S_y = A\left (S_x\right) ^ 2 + B\left(S_x\right) + C\ \)
  • \ (T_y = A\left (T_x\right) ^ 2 + B\left(T_x\right) + C\ \)
  • \ (U_y = A\left (U_x\right) ^ 2 + B\left(U_x\right) + C\ \)

Sekarang, menulis ulang dalam bentuk matriks. Perhatikan bahwa A, B, C adalah yang tidak diketahui yang kita memecahkan untuk.

[lateks]
\begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix} =
\begin{bmatrix}
\left (S_x\right) ^ 2 & \left(S_x\right) & 1\\
\left (T_x\right) ^ 2 & \left(T_x\right) & 1\\
\left (U_x\right) ^ 2 & \left(U_x\right) & 1\end {bmatrix}
\begin{bmatrix}A \\B \\C\end{bmatrix} \\
[/ lateks]

[lateks]
\begin{bmatrix}
\left (S_x\right) ^ 2 & \left(S_x\right) & 1\\
\left (T_x\right) ^ 2 & \left(T_x\right) & 1\\
\left (U_x\right) ^ 2 & \left(U_x\right) & 1\end {bmatrix} ^-{1}
\begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix} =
\begin{bmatrix}
\left (S_x\right) ^ 2 & \left(S_x\right) & 1\\
\left (T_x\right) ^ 2 & \left(T_x\right) & 1\\
\left (U_x\right) ^ 2 & \left(U_x\right) & 1\end {bmatrix} ^-{1}
\begin{bmatrix}
\left (S_x\right) ^ 2 & \left(S_x\right) & 1\\
\left (T_x\right) ^ 2 & \left(T_x\right) & 1\\
\left (U_x\right) ^ 2 & \left(U_x\right) & 1\end {bmatrix}
\begin{bmatrix}A \\B \\C\end{bmatrix} \\
[/ lateks]
[lateks]
\begin{bmatrix}
\left (S_x\right) ^ 2 & \left(S_x\right) & 1\\
\left (T_x\right) ^ 2 & \left(T_x\right) & 1\\
\left (U_x\right) ^ 2 & \left(U_x\right) & 1\end {bmatrix} ^-{1}
\begin{bmatrix}S_y \\T_y \\U_y\end{bmatrix}
= Saya
\begin{bmatrix}A \\B \\C\end{bmatrix}
\\
K ^-{1} J = L
[/ lateks]

Tentu saja kita dapat menggunakan persamaan simultan sebaliknya, tapi saya lebih suka menggunakan matriks karena itu lebih sederhana. (Editor's note: selama Anda memahami matriks, itulah!)

Kita akan mendapatkan invers K dan kalikan dengan matriks J untuk mendapatkan L. Setelah kami telah berhasil memecahkan untuk A, B, C, kami hanya akan mengganti ke dalam persamaan kuadrat. Dengan demikian, kita akan memiliki kurva kuadrat yang melewati semua tiga poin.


Langkah 7: Mengimpor Coral

Seperti disebutkan di langkah sebelumnya, kita perlu melakukan 3 x 3 matriks inversi dan perkalian. ActionScript's flash.geom.matrix kelas tidak akan dapat membantu dalam hal ini. Tentu saja, kita memiliki pilihan untuk memanfaatkan flash.geom.Matrix3D, kelas tetapi saya lebih memilih Perpustakaan karang karena bisa mengorek kelas-kelas kustom ini dan memeriksa apa yang terjadi di bawah tenda. Saya pribadi menemukan ini sangat berguna bila di keraguan pada penggunaan yang tepat dari perintah bahkan setelah membaca dokumentasi API.

Jadi men-download dan menempatkan file karang membuka ritsleting ke folder sumber proyek Anda.

Download Coral
Coral integrated with source folder

Langkah 8: ActionScript implementasi

Berikut ini adalah contoh dari hasil. Cobalah untuk reposisi titik merah dan melihat kurva kuadrat digambar ulang untuk menyeberang melalui semua tiga poin.


Langkah 9: Implementasi dijelaskan

Anda dapat menemukan script lengkap di Draw_curve.as. ActionScript berikut ini hanya untuk mengaktifkan kontrol mouse pada titik-titik kecil.

Inti terletak pada fungsi redraw. Aku sudah menyoroti operasi matriks dan fungsi kuadrat untuk redraw proses.

Sehingga Anda dapat melihat bahwa matriks K diperbaharui dan terbalik sebelum sedang ditambahkan ke matriks J.

Fungsi append() mengalikan matriks saat ini, J, dengan masukan matrix, K, ditempatkan ke kiri. Detail penting lain adalah bahwa kita tidak menggunakan semua baris dan kolom dalam K dan J matriks. Namun karena matriks inversi hanya dapat terjadi dengan sebuah matriks persegi, kita perlu mengisi barisan ke-4, 4 kolom unsur K dengan 1. (Ada tidak perlu untuk melakukan ini untuk J karena kita tidak perlu pembalikan yang dalam perhitungan kami.) Dengan demikian, Anda dapat melihat semua unsur-unsur lain yang 0 kecuali kolom pertama.


Langkah 10: Grafik kurva kubik

Jadi itu semua untuk menggambar kurva kuadrat. Mari kita beralih ke kubik kurva.

Sekali lagi, kita akan memiliki sedikit revisi grafik kurva ini. Memeriksa gambar berikut:

Cubic graphed on Cartesian and Flash coordinate space.

Ketika Anda membandingkan kurva ini dengan kuadrat, Anda akan melihat bahwa itu curam, dan bahwa sebagian dari kurva di bawah sumbu-x. Satu setengah dicerminkan vertikal, dibandingkan dengan kuadrat.


Langkah 11: Kubik Koefisien

Saya telah menyertakan Flash presentasi berikut untuk membiarkan Anda bereksperimen dengan koefisien dari persamaan kubik. Mencoba mengutak-atik nilai a dari positif negatif dan mengamati perbedaan dalam kurva diproduksi.


Langkah 12: ActionScript implementasi

Berikut adalah bagian penting dari penerapan grafik di atas:

Sekali lagi, sangat sulit untuk posisi kurva kubik menurut set poin melintasi melalui. Sekali lagi, kita merujuk aljabar linear alternatif.


Langkah 13: Metode alternatif

Kita tahu dari langkah 6 bahwa koefisien Persamaan kuadrat dapat dihitung berdasarkan diberikan tiga poin, dan kurva yang diambil dari itu akan menyeberang melalui titik-titik tersebut. Pendekatan yang sama dapat dilakukan dengan empat poin diberikan untuk memperoleh persamaan kubik:

  • \ (S\ \left (S_x, \ S_y\right) \)
  • \ (T\ \left (T_x, \ T_y\right) \)
  • \ (U\ \left (U_x, \ U_y\right) \)
  • \ (V\ \left (V_x, \ V_y\right) \)

Menggantikan koordinat di bawah ini ke dalam (eq 2). Dicatat bahwa A, B, C, D tidak diketahui.

\[g(x) = ax ^ 3 + Bx ^ 2 + Cx + D\... (eq\ 2) \]

  • \ (S_y = A\left (S_x\right) ^ 3 + B\left (S_x\right) ^ 2 + C\left(S_x\right) + D\)
  • \ (T_y = A\left (T_x\right) ^ 3 + B\left (T_x\right) ^ 2 + C\left(T_x\right) + D\)
  • \ (U_y = A\left (U_x\right) ^ 3 + B\left (U_x\right) ^ 2 + C\left(U_x\right) + D\)
  • \ (V_y = A\left (V_x\right) ^ 3 + B\left (V_x\right) ^ 2 + C\left(V_x\right) + D\)

Tapi sekarang kita akan berurusan dengan 4 x 4 matriks bukan 3 x 3 matriks:

\(
\begin{bmatrix}S_y \\T_y \\U_y \\V_y\end{bmatrix} =
\begin{bmatrix}
\left (S_x\right) ^ 3 & \left (S_x\right) ^ 2 & \left(S_x\right) & 1\\
\left (T_x\right) ^ 3 & \left (T_x\right) ^ 2 & \left(T_x\right) & 1\\
\left (U_x\right) ^ 3 & \left (U_x\right) ^ 2 & \left(U_x\right) & 1\\
\left (V_x\right) ^ 3 & \left (V_x\right) ^ 2 & \left(V_x\right) & 1\end {bmatrix}
\begin{bmatrix}A \\B \\C \\D\end{bmatrix} \\
P = QR \\
Q ^-{1} P = Q ^-{1} QR \\
Q ^-{1} P = IR\\
Q ^-{1} P = R
\)

Sekarang kita akan memanfaatkan semua elemen dalam matriks 4 x 4 untuk Q dan kolom seluruh pertama untuk P. Maka Q inversed dan diterapkan untuk P.


Langkah 14: ActionScript implementasi

Sekali lagi, kami mendirikan kontrol mouse untuk memungkinkan menyeret titik-titik tersebut. Ketika salah satu titik-titik tersebut diseret, recalculation dan menggambar ulang kurva terus-menerus terjadi.

redraw adalah fungsi penting di mana segala sesuatu terjadi.

Akhirnya, mari kita lihat produk. Klik dan titik-titik merah untuk melihat kurva kubik ditarik untuk melewati semua poin yang bergerak.


Langkah 15: Polinomial tingkat yang lebih tinggi

Kita hanya pergi melalui menggambar polinomial derajat 2 dan 3 (kuadrat dan kubik). Dari pengalaman kami, kita bisa meramal bahwa perhitungan untuk polinomial derajat 4 (quintic) akan memerlukan lima poin, yang akan memerlukan matriks 5 x 5, dan seterusnya untuk polinomial derajat lebih tinggi.

Sayangnya, karang dan flash.geom.Matrix3D hanya memungkinkan untuk 4 x 4 matriks, sehingga Anda akan memiliki menulis kelas Anda sendiri jika perlu datang. Itu jarang diperlukan dalam permainan, meskipun.


Langkah 16: Membagi wilayah

Mari kita coba untuk menerapkan pengetahuan kita untuk membagi wilayah pada tahap kami. Hal ini memerlukan beberapa revisi dari persamaan ketidaksetaraan. Lihat gambar di bawah.

Division of regions

Gambar di atas menunjukkan kurva membagi wilayah menjadi dua:

  • Biru daerah di atas, dimana untuk setiap titik y lebih besar dari persamaan kurva.
  • Merah wilayah di bawah, dimana untuk setiap titik y adalah kurang dari persamaan kurva.

Hal ini tidak sulit untuk memahami konsep ini. Pada kenyataannya, Anda telah sudah bereksperimen ini dalam 11 langkah sebagai Anda men-tweak koefisien dari rumus kubik. Bayangkan, dalam sistem koordinat, bahwa ada jumlah tak terbatas kurva, Semua dibedakan oleh hanya sedikit perubahan dalam D:

Infinite curves drawn on graph

Langkah 17: ActionScript implementasi

Jadi di sini adalah sampel output untuk kurva kuadrat. Anda dapat mencoba untuk bergerak titik merah dan melihat daerah berwarna.

Berikut adalah potongan ActionScript yang penting. Periksa script lengkap di Region_Curve.as

Berikut adalah contoh dengan kurva kubik.

Dan implementasi yang datang dengan itu. Sekali lagi, penuh script di Region_Curve2.as


Langkah 18: variasi

Bagaimana tentang beberapa tweak untuk mengubah warna di seluruh kurva berbeda? Sekali lagi, mouse klik pada titik-titik merah dan melihat perubahan gradien di layar.


Langkah 19: ActionScript implementasi

Berikut adalah cuplikan ActionScript penting yang diambil dari Region_Curve3.as. Pertama-tama, kita akan ingin mengetahui offset maksimum dan minimum dari kurva asli.

Setelah selesai, kami akan menerapkan untuk pewarnaan titik individu.


Kesimpulan

Sehingga semua untuk menggambar kurva. Selanjutnya, menemukan akar kuadrat dan kubik kurva. Terima kasih untuk membaca. Berbagi jika Anda melihat beberapa aplikasi kehidupan nyata yang mengambil keuntungan dari tutorial ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.