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

Matematika dan ActionScript kurva: gradien dan orang normal

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Keti Pritania (you can also view the original English article)

Kami telah menangani menggambar kurva, dan menemukan akar kuadrat dan kubik, serta aplikasi berguna untuk menggunakan akar kuadrat dalam permainan. Sekarang, seperti yang dijanjikan, kita akan melihat aplikasi untuk menemukan akar kubik, serta gradien kurva dan orang normal, seperti membuat benda-benda yang memantul dari permukaan melengkung. Ayo!


Contoh

Mari kita melihat satu penggunaan praktis matematika ini:

Dalam demo ini, "kapal" memantul dari tepi SWF dan kurva. Titik kuning mewakili titik terdekat ke kapal yang terletak pada kurva. Anda dapat menyesuaikan bentuk kurva dengan menyeret titik merah, dan menyesuaikan gerakan kapal menggunakan tombol panah.


Langkah 1: Jarak terpendek untuk kurva

Mari kita mempertimbangkan skenario di mana titik berada dekat kurva kuadrat. Bagaimana Anda menghitung jarak terpendek antara titik dan kurva?

point to quadratic distance

Yah, mari kita mulai dengan teorema Pythagoras's.

\[
Let\ the\ point\ be\ (x_p, \ y_p) \\
and\ call\ the\ closest\ point\ on\ the\ curve\ (x_c, \ y_c) \\
Kemudian: \\
z ^ 2 = x ^ 2 + y ^ 2\\
z ^ 2 = (x_c-x_p) ^ 2 + (y_c-y_p) ^ 2\\
Given\ y_c = ax_c ^ 2 + bx_c + c, \\
z ^ 2 = (x_c-x_p) ^ 2 + [(ax_c ^ 2 + bx_c + c)-y_p] ^ 2
\]

Anda dapat melihat bahwa kita telah menggantikan \(y_c\) dengan Persamaan kuadrat. Sekilas, kita dapat melihat kekuasaan tertinggi adalah 4. Dengan demikian, kami memiliki persamaan quartic. Semua yang perlu kita lakukan adalah untuk menemukan titik minimal dalam persamaan ini memberi kita jarak terpendek dari titik untuk kurva kuadrat.

Tapi sebelum itu, kita harus memahami gradien pada kurva...


Langkah 2: Gradient kurva

Sebelum kita melihat masalah meminimalkan persamaan quartic, mari kita coba untuk mengerti gradien kurva. Garis lurus memiliki hanya satu gradien. Tetapi kurva kuadrat gradien tergantung pada titik mana pada kurva kita merujuk. Periksa Flash presentasi di bawah ini:

Seret titik-titik merah sekitar untuk mengubah kurva kuadrat. Anda juga dapat bermain dengan slider's pegangan untuk mengubah posisi titik biru sepanjang x. Sebagai titik biru perubahan, sehingga akan gradien ditarik.


Langkah 3: Gradient melalui kalkulus

Ini adalah di mana kalkulus akan datang berguna. Anda mungkin menebak bahwa membedakan Persamaan kuadrat akan memberikan Anda gradien kurva.

\[
f (x) = ax ^ 2 + bx + c\\
\frac{DF(x)} {dx} = 2ax + b
\]

Jadi \(\frac{df(x)}{dx}\) adalah gradien kurva kuadrat, dan itu tergantung pada koordinat \(x\). Yah, hal baik yang kita punya sebuah metode untuk menangani hal ini: diff1(x:Number) akan kembali nilai setelah diferensiasi tunggal.

Menggambar gradien, kita akan membutuhkan sebuah persamaan untuk mewakili baris, \(y=mx+c\). Koordinat titik biru \ ((x_p, y_p) \) akan diganti ke \(x\) dan \(y\), dan gradien baris ditemukan melalui diferensiasi akan pergi ke \(m\). Dengan demikian sumbu y garis, \(c\) dapat dihitung melalui beberapa pekerjaan aljabar.

Memeriksa AS3:


Langkah 4: koordinat sistem

Selalu diingat dari sumbu-y terbalik Flash mengkoordinasikan ruang seperti yang ditunjukkan pada gambar di bawah ini. Pada pandangan pertama, diagram di kanan mungkin tampak seperti gradien negatif - tapi karena sumbu-y terbalik, adalah benar-benar gradien yang positif.

Positive gradient.

Sama berlaku untuk titik minimum seperti yang ditunjukkan di bawah ini. Karena sumbu-y terbalik, minimal titik dalam koordinat Kartesius ruang (di (0,0)) sepertinya maksimum di Flash mengkoordinasikan ruang. Tapi oleh merujuk ke lokasi yang asal di Flash mengkoordinasikan ruang relatif terhadap kurva kuadrat, ini adalah benar-benar titik minimal.

Positive gradient.

Langkah 5: Laju perubahan untuk gradien

Sekarang mari kita katakan saya tertarik untuk mencari titik terendah pada kurva - bagaimana harus saya lakukan? Lihat gambar di bawah ini (kedua tokoh berada di ruang koordinat yang sama).

Positive gradient.

Untuk mendapatkan titik minimum, kita hanya akan menyamakan \(\frac{df(x)} {dx} = 0\), karena menurut definisi kami sedang mencari titik di mana gradien nol. Tapi seperti yang ditunjukkan di atas, ternyata bahwa titik maksimum pada kurva juga memenuhi kondisi ini. Jadi bagaimana kita membedakan antara dua kasus ini?

Mari kita coba diferensiasi dari tingkat kedua. Ini akan memberi kita laju perubahan gradiasi.

\[
\frac{DF(x)} {dx} = 2ax + b\\
\frac{DF^2(x)} {dx ^ 2} = 2a
\]

Saya akan menjelaskan dengan mengacu pada gambar di bawah ini (diambil di ruang koordinat Kartesius). Kita dapat melihat bahwa, ketika kita kenaikan sepanjang sumbu x, gradien perubahan dari negatif ke positif. Jadi laju perubahan harus nilai positif.

Kita juga dapat melihat bahwa ketika \(\frac{df^2(x)}{dx^2}\) positif, ada titik minimum pada kurva. Sebaliknya jika nilai negatif, titik maksimum hadir.

Rate of change in gradient.

Langkah 6: kembali ke masalah

Sekarang kami siap untuk memecahkan masalah yang disajikan dalam langkah 1. Mengingat persamaan quartic (di mana tingkat tertinggi adalah 4) kami tiba di:

\[
z ^ 2 = (x_c-x_p) ^ 2 + [(ax_c ^ 2 + bx_c + c)-y_p] ^ 2
\]

quartic curve

Persamaan quartic sama, diplot

Ingat, kami tertarik untuk menemukan titik yang minimum pada kurva ini, karena titik yang sesuai pada kurva kuadrat asli akan menjadi titik yang di jarak minimum dari titik merah.

point to quadratic distance

Jadi, mari kita membedakan fungsi quartic untuk mendapatkan ke gradien kurva ini, dan kemudian menyamakan gradien fungsi ini quartic ke nol. Anda akan melihat bahwa gradien adalah benar-benar fungsi kubik. Saya akan sebut pembaca tertarik Wolfram di Halaman; untuk tutorial ini, saya hanya akan memetik hasil kerja aljabar mereka:

\[
\frac{d(z^2)} {dx} =
2(x_c-x_p) + 2 (ax_c ^ 2 + bx_c + c - y_p)(2ax_c+b) \\
\frac{d(z^2)} {dx} = 2a^2(x_c)^3+3ab(x_c)^2+(b^2+2ac-2ay_p+1) (x_c) + (SM-by_p-x_p) \\
Equate\ gradient\ to\ 0\\
\frac{d(z^2)} {dx} = 0\\
2A^2(x_c)^3+3ab(x_c)^2+(b^2+2ac-2ay_p+1) (x_c) + (SM-by_p-x_p) = 0\\
Compare\ with\ cubic\ equation\\
Ax ^ 3 + Bx ^ 2 + Cx + D = 0\\
A = 2a ^ 2\\
B = 3ab\\
C = b ^ 2 + 2ac-2ay_p + 1\\
D = SM-by_p-x_p
\]

Memecahkan untuk akar fungsi kubik (agak berantakan) ini dan kita akan tiba di koordinat titik biru tiga sebagaimana ditunjukkan di atas.

Selanjutnya, bagaimana kita menyaring hasil kami untuk titik minimum? Ingat dari langkah sebelumnya bahwa titik minimal memiliki tingkat perubahan yang positif. Untuk mendapatkan ini tingkat perubahan, membedakan fungsi kubik yang mewakili gradien. Jika laju perubahan untuk titik biru yang diberikan positif, itu adalah salah satu poin yang minimal. Untuk mendapatkan titik minimum, salah satu yang kami tertarik, memilih titik dengan tingkat tertinggi dari perubahan.


Langkah 7: Contoh output

Jadi di sini adalah sampel pelaksanaan ide yang dijelaskan di atas. Anda dapat menyeret titik-titik merah di sekitar untuk menyesuaikan kurva Anda kuadrat. Titik biru juga dapat diseret. Ketika Anda bergerak titik biru, kuning satu akan reposisi sehingga jarak antara titik biru dan kuning akan minimal antara semua poin pada kurva.

Seperti yang Anda berinteraksi dengan Flash presentasi, mungkin ada saat dimana tiga titik-titik kuning muncul sekaligus. Dua ini, memudar, mengacu kepada akar Diperoleh dari perhitungan tetapi ditolak karena mereka tidak titik terdekat di curve dot biru.


Langkah 8: ActionScript implementasi

Jadi di sini adalah penerapan ActionScript di atas. Anda dapat menemukan script lengkap di Demo2.as.

Pertama-tama kita harus menggambar kurva kuadrat. Perhatikan bahwa m2 matriks akan disebut untuk perhitungan lebih lanjut.

Dan di sini adalah salah satu yang mengimplementasikan konsep matematika yang dijelaskan. C1 mengacu pada titik acak diposisikan di atas panggung.


Langkah 9: Contoh: deteksi tumbukan

Mari kita membuat menggunakan konsep ini mendeteksi tumpang tindih antara lingkaran dan kurva.

Idenya sederhana: jika jarak antara titik biru dan kuning titik titik kurang dari biru radius, kita memiliki tabrakan. Check out demo di bawah ini. Item interaktif adalah titik-titik merah (untuk mengontrol kurva) dan titik biru. Jika titik biru bertabrakan dengan kurva, itu akan memudar sedikit.


Langkah 10: ActionScript implementasi

Nah, kode cukup sederhana. Memeriksa sumber penuh di CollisionDetection.as.


Langkah 11: Memantul dari kurva

Jadi sekarang bahwa kita tahu kapan akan terjadi tabrakan, mari kita coba untuk program beberapa tanggapan tabrakan. Bagaimana memantul dari permukaan? Periksa Flash presentasi di bawah ini.

Anda dapat melihat kapal (bentuk segitiga), dikelilingi oleh lingkaran (tembus biru). Setelah lingkaran bertabrakan dengan kurva, kapal akan memantul dari permukaan.


Langkah 12: Mengendalikan kapal

Berikut ini adalah ActionScript untuk mengontrol kapal.

Anda dapat melihat bahwa keyboard kontrol memperbarui bendera untuk menunjukkan apakah kiri, atas, kanan, atau tombol yang ditekan. Bendera ini akan ditangkap oleh enterframe event handler dan memperbarui besarnya dan arah kapal.


Langkah 13: Menghitung vektor refleksi

Aku sudah tertutup perhitungan vektor vektor refleksi di posting ini. Di sini, saya hanya akan mencakup bagaimana untuk mendapatkan vektor normal dari gradien.

\[
\frac{DF(x)} {dx} = gradient\\
gradien line\ = \frac {y} {x} \\
Assume\ gradient=0.5\\
y = 0.5\\
x = 1\\
Vector\ of\ left\ normal =
\begin{bmatrix}-1 \\0.5\end{bmatrix}\\
Vector\ of\ right\ normal =
\begin{bmatrix}1 \\-0.5\end{bmatrix}
\]


Langkah 14: ActionScript implementasi

Jadi ActionScript di bawah ini akan menerapkan konsep matematika yang dijelaskan di langkah sebelumnya. Periksa baris yang disorot:


Kesimpulan

Yah, terima kasih untuk waktu Anda! Jika Anda telah menemukan ini berguna atau memiliki pertanyaan, meninggalkan beberapa komentar.

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.