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

Euklidean vektor di Flash

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called You Do The Math.
Playing Around with Elastic Collisions
Gravity in Action

Indonesian (Bahasa Indonesia) translation by Kang Abbad (you can also view the original English article)

Dua kali sebulan, kita kembali beberapa pembaca kami posting favorit dari Activetuts + sejarah. Minggu ini tutorial retro-aktif, pertama kali diterbitkan pada bulan April, adalah panduan untuk vektor Euklidean: apa yang mereka adalah, mengapa Anda akan menggunakannya dan bagaimana untuk mengimplementasikannya di Flash dengan AS3.

Euclidean vectors adalah objek dalam geometri dengan sifat-sifat tertentu yang sangat berguna untuk mengembangkan permainan. Mereka dapat dilihat sebagai poin, tetapi mereka juga memiliki besarnya dan arah. Mereka digambarkan sebagai panah pergi dari titik awal ke titik akhir, dan itu adalah bagaimana kita akan menarik mereka dalam artikel ini.

Euklidean vektor yang umum digunakan dalam matematika dan fisika untuk banyak hal: mereka dapat mewakili kecepatan, percepatan dan kekuatan dalam fisika, atau membantu membuktikan banyak teorema penting dalam matematika. Dalam tutorial ini, Anda akan belajar tentang Euklidean vektor, dan membangun sebuah kelas yang dapat Anda gunakan dalam proyek Anda sendiri Flash.

Harap dicatat bahwa vektor Euklidean berbeda dari ActionScript's Vektor class, dan juga berbeda dari vector drawing.

Vektor dapat digunakan dalam lingkungan Flash untuk membantu Anda mencapai tugas-tugas kompleks yang kalau tidak akan membutuhkan banyak upaya jika dilakukan tanpa mereka. Dalam artikel ini Anda akan mempelajari bagaimana untuk menggunakannya dalam Flash, serta belajar banyak trik keren dengan vektor.


Langkah 1: Koordinat Cartesian dan koordinat Flash

Sebelum melompat ke vektor, mari kita memperkenalkan sistem koordinat Flash. Anda mungkin akrab dengan sistem koordinat Kartesius (bahkan jika Anda tidak tahu itu berdasarkan nama):

Flash math vectors in AS3

Sistem Flash sangat mirip. Satu-satunya perbedaan adalah bahwa sumbu y terbalik:

Flash math vectors in AS3

Ketika kita mulai bekerja dengan vektor di flash, kita perlu ingat bahwa. Namun, Kabar baik: sistem ini berbeda tidak membuat banyak perbedaan. Bekerja dengan vektor di dalamnya akan pada dasarnya seperti bekerja dengan vektor dalam sistem Cartesian.


Langkah 2: Menentukan vektor

Untuk tutorial ini, kita akan mendefinisikan dan bekerja dengan semua vektor awal poin sebagai titik pendaftaran tahap, sama seperti mereka yang umum digunakan dalam matematika. Vektor kemudian dapat didefinisikan seperti titik yang umum, tetapi akan memiliki sifat besarnya dan sudut. Lihatlah beberapa contoh vektor didefinisikan dalam tahap:

Flash math vectors in AS3

Seperti yang Anda lihat, vektor diwakili oleh Panah, dan vektor masing-masing memiliki panjang (atau magnitude) dan titik sepanjang sudut tertentu. Ekor setiap vektor adalah pada titik pendaftaran (0, 0).

Kita akan menciptakan kelas EuclideanVector sederhana untuk tutorial ini, menggunakan kelas titik terus vektor koordinat. Mari kita membuat kelas dasar vektor sekarang:

Selama tutorial ini, kita akan berbicara tentang arti dan arah vektor. Perhatikan bahwa arah hanya menentukan garis yang "berisi" vektor. Pengertian adalah apa yang mendefinisikan yang cara vektor poin sepanjang garis ini.


Langkah 3: Kebalikan dari vektor

Dalam tutorial ini kita akan menggunakan ekspresi "kebalikan dari vektor". Kebalikan dari vektor adalah lain vektor dengan besarnya sama dan arah, tetapi sebaliknya rasa. Yang diterjemahkan menjadi vektor dengan sinyal berlawanan koordinat vektor yang pertama. Jadi vektor dengan akhir dari (x, y) akan memiliki vektor invers dengan akhir dari (-x, -y).

Flash math vectors in AS3

Mari kita menambahkan fungsi kelas EuclideanVector kami kembali invers vektor:


Langkah 4: Operasi dasar penambahan

Sekarang bahwa kita telah belajar bagaimana untuk menentukan vektor, mari kita mempelajari cara menambahkan dua vektor: ini yang sederhana seperti menambahkan koordinat mereka secara terpisah. Lihatlah gambar ini:

Flash math vectors in AS3

Jika Anda melihat dalam gambar, adalah hasil dari penambahan dua vektor vektor yang lain, dan Anda dapat melihat bahwa koordinat jumlah koordinat dua vektor lainnya. Dalam kode, yang akan terlihat seperti ini:

Jadi kita dapat mengatakan bahwa:


Langkah 5: Operasi dasar pengurangan

Pengurangan bekerja hampir sama dengan penambahan, tapi sebaliknya kita akan menambahkan inverse dari kedua vektor vektor yang pertama.

Flash math vectors in AS3

Hal ini sudah diketahui cara untuk jumlah dua vektor, jadi di sini adalah kode untuk pengurangan:

Kode ini sangat berguna untuk mendapatkan vektor yang terjadi dari titik vektor ke titik lain. Melihat kembali pada gambar dan Anda akan melihat hal ini benar. Ini akan digunakan banyak dalam contoh berikutnya.


Langkah 6: Operasi dasar perkalian dengan nomor

Perkalian antara vektor dan sejumlah (nomor biasa dikenal sebagai "skalar" dalam vektor matematika) hasil dalam suatu vektor yang telah memiliki magnitudo dikalikan dengan jumlah ini, tetapi masih menunjuk ke arah yang sama; "mengulurkan" jika skalar lebih besar dari 1, dan tergencet jika skalar antara 0 dan 1. Rasa vektor baru akan sama dengan vektor asli jika skalar positif, atau sebaliknya jika negatif. Pada dasarnya, ini nomor "skala" vektor. Lihatlah gambar:

Flash math vectors in AS3

Dalam kode, kita hanya kalikan vektor koordinat oleh nomor, yang kemudian akan skala vektor:


Langkah 7: Semakin besarnya vektor

Untuk mendapatkan sebuah vektor besarnya, kami akan menggunakan teorema Pythagoras. Jika Anda lupa apa itu, di sini adalah penyegar cepat:

Flash math vectors in AS3

(Info selengkapnya di sini.)

Kode ini sangat sederhana:

Anda juga harus menghapus publik var magnitude:Number, karena ini adalah apa yang akan kita gunakan sekarang.

Besarnya vektor akan selalu menjadi positif, karena itu adalah akar kuadrat dari jumlah dari dua bilangan positif.


Langkah 8: Mendapatkan sudut vektor

Sudut vektor adalah sudut antara sumbu x dan vektor arah baris. Sudut diukur pergi dari sumbu x dan berputar anti-searah jarum jam sampai arah baris dalam sistem cartesian:

Flash math vectors in AS3

Namun, dalam Flash koordinat sistem, karena sumbu y terbalik, sudut ini akan diukur berputar searah jarum jam:

Flash math vectors in AS3

Ini dapat dengan mudah dihitung menggunakan kode berikut. Sudut akan dikembalikan radian, dalam kisaran 0-2pi. Jika Anda tidak tahu apa radian atau bagaimana menggunakannya, tutorial ini oleh Michael James Williams akan membantu Anda banyak.


Langkah 9: Dot produk

Produk dot antara dua vektor adalah nomor dengan Rupanya ada artinya, tetapi memiliki dua kegunaan yang berguna. Pertama mari kita lihat bagaimana produk dot dapat dihitung:

Flash math vectors in AS3

Tapi itu juga dapat diperoleh dengan setiap vektor Koordinat:

Flash math vectors in AS3

Produk dot dapat memberitahu kita banyak tentang sudut antara vektor: jika itu positif, kemudian sudut berkisar dari 0 sampai 90 derajat. Jika negatif, sudut berkisar dari 90 sampai 180 derajat. Jika itu adalah nol, sudut adalah 90 derajat. Itu terjadi karena dalam formula pertama hanya kosinus bertanggung jawab untuk memberikan produk dot "sinyal": besaran selalu positif. Tetapi kita tahu bahwa kosinus positif berarti bahwa sudut berkisar dari 0 sampai 90 derajat, dan seterusnya untuk cosinus negatif dan zero.

Produk dot dapat juga digunakan untuk mewakili panjang vektor arah vektor lainnya. Menganggapnya sebagai proyeksi. Ini terbukti sangat berguna dalam hal-hal seperti Pemisahan Axis Theorem (SAT) dan implementasinya di AS3 untuk deteksi tabrakan dan respons dalam permainan.

Berikut adalah kode praktis untuk mendapatkan produk dot antara dua vektor:


Langkah 10: Terkecil sudut antara vektor

Sudut antara vektor, seperti yang terlihat dalam langkah 9, dapat diberikan oleh produk dot. Berikut adalah bagaimana menghitung:


Langkah 11: Berkisar sudut antara vektor

Ada juga cara lain untuk menghitung sudut, yang memberikan hasil antara - pi dan pi dan selalu menghitung sudut yang berlangsung dari vektor pertama untuk kedua vektor; Hal ini berguna bila Anda ingin dengan mudah mengintegrasikan dengan rotasi layar objek (yang berkisar dari-180 ke 180).

Metode bekerja dengan mendapatkan sudut untuk kedua vektor, kemudian mengurangi sudut dan bekerja pada hasil.

Flash math vectors in AS3

Kode:

Perhatikan bahwa sudut ini kembali positif jika secondAngle lebih tinggi dari firstAngle, jadi urutan di mana Anda mendapatkan sudut berkisar akan mempengaruhi hasil!


Langkah 12: Normalisasi vektor

Normalisasi vektor berarti membuat besarnya sama dengan 1, sambil tetap menjaga arah dan rasa vektor. Untuk melakukan itu, kita mengalikan vektor dengan 1 /magnitude. Dengan begitu, besarnya akan berkurang, atau meningkat, menjadi 1.


Langkah 13: Mendapatkan Normal vektor

Normal dari vektor adalah vektor lain yang membuat sudut 90 derajat ke yang pertama. Ini dapat dihitung dengan rumus berikut:

Flash math vectors in AS3

Rumus bergantung pada kenyataan bahwa, karena normal selalu tegak lurus vektor, kita hanya perlu mengubah urutan x dan y koordinat dan balikkan salah satu dari mereka untuk mendapatkan normal. Gambar berikut menunjukkan proses:

Flash math vectors in AS3

Dalam gambar, Vec adalah vektor asli, Vec2 adalah vektor dengan koordinat bertukar Vec, dan Vec3 adalah vektor dengan koordinat y negatif Vec2. Ang dan Ang2 bervariasi, tetapi sudut antara Vec dan Vec3 selalu 90 derajat.

Dan kode sederhana


Langkah 14: Berputar vektor

Untuk memutar vektor, kami menganggap (0, 0) posisi (titik awal) akan menjadi pusat rotasi. Titik diputar diberikan oleh rumus:

Flash math vectors in AS3

Formula ini diperoleh dengan menerapkan matriks putaran yang vektor. Kita akan pergi di luar cakupan tutorial ini jika kita pergi ke dalam matriks dan cara kerjanya, sehingga saya akan meninggalkan rumus di sini.

Kode ini cukup banyak yang sama:

Ini adalah akhir operasi vektor dasar kami. Apa yang akan Anda lihat selanjutnya adalah cara untuk menggunakan kelas ini melakukan hal-hal menarik. Berikut adalah kelas kami sejauh ini:


OK, kita telah membahas bangunan kelas vektor, sekarang mari kita mengambil mengambil di memanfaatkan.


Langkah 15: Menentukan apakah titik adalah dalam poligon

Aksi dimulai di sini. Menentukan apakah suatu titik terletak di dalam sebuah poligon atau tidak adalah topik yang sangat menarik, dan ada banyak metode untuk mencapainya. Dalam artikel ini saya akan menyajikan tiga metode yang umumnya digunakan:

  • crossing number atau even-odd rule algorithm, yang menentukan apakah suatu titik berada di dalam poligon dari sejumlah sisi yang dilambangkan oleh "sinar" dari titik hingga persilangan tak terbatas.
  • winding number algorithm, yang memberikan jawaban berdasarkan jumlah dari semua sudut yang dibentuk antara berturut-turut simpul dari sebuah poligon dan titik untuk memeriksa.
  • convex polygon algorithm, yang, seperti namanya mengatakan, hanya bekerja untuk poligon cembung dan didasarkan pada apakah atau tidak titik adalah pada "sisi tertentu" dari setiap tepi poligon.

Semua algoritma ini akan bergantung pada kenyataan bahwa Anda tahu koordinat dari simpul (sudut) yang mendefinisikan poligon.


Langkah 16: Persimpangan aturan nomor atau bahkan-aneh algoritma

Algoritma ini dapat digunakan untuk setiap bentuk. Ini adalah apa yang Anda baca: berbagai bentuk, memiliki lubang atau tidak, baik itu convex atau tidak. Itu adalah didasarkan pada kenyataan bahwa setiap ray dilemparkan dari titik Anda mau check out ke infinity akan menyeberangi sebuah nomor genap tepi jika titik berada di luar bentuk, atau ganjil tepi jika titik dalam bentuk. Hal ini dapat dibuktikan oleh Jordan curve theorem, yang menyiratkan bahwa Anda akan memiliki untuk menyeberangi perbatasan antara beberapa wilayah dan wilayah lainnya jika Anda ingin pindah dari satu ke yang lain. Dalam kasus kami, wilayah kami adalah "dalam bentuk" dan "luar bentuk".

Flash math vectors in AS3
Flash math vectors in AS3
Flash math vectors in AS3

Kode untuk algoritma ini adalah sebagai berikut:

Itu akan return false jika titik tidak dalam bentuk, atau true jika titik adalah dalam bentuk.


Langkah 17: Gulungan nomor algoritma

winding number algorithm menggunakan jumlah dari semua sudut yang dibuat antara titik untuk memeriksa dan masing-masing sepasang poin yang mendefinisikan poligon. Jika jumlah yang dekat dengan 2pi, kemudian titik sedang diperiksa adalah dalam vektor. Jika sudah mendekati 0 kemudian titik berada di luar.

Flash math vectors in AS3

Kode menggunakan sudut berkisar antara vektor dan memberi ruang untuk imprecisions: perhatikan bagaimana kami memeriksa hasil jumlah dari semua sudut. Kami tidak memeriksa apakah sudut persis nol atau 2pi. Sebaliknya, kami memeriksa apakah kurang dari pi dan lebih tinggi daripada pi, nilai rata-rata cukup.


Langkah 18: Algoritma cekung poligon

concave polygon algorithm bergantung pada kenyataan bahwa, untuk sebuah poligon cekung, titik di dalamnya adalah selalu di sebelah kiri tepi (jika kita perulangan melalui mereka dalam arti berlawanan arah jarum jam) atau di sebelah kanan tepi (jika kita perulangan melalui mereka dalam arti searah jarum jam) .

Flash math vectors in AS3

Bayangkan berdiri di kamar berbentuk seperti gambar di atas, dan berjalan di sekitar tepi itu dengan tangan kiri Anda mengikuti sepanjang dinding. Pada titik sepanjang dinding mana terdekat ke titik Anda tertarik, jika di sebelah kanan Anda maka itu harus di dalam ruang; Jika di sebelah kiri Anda maka itu harus di luar.

Masalahnya terletak dalam menentukan apakah suatu titik ke kiri atau kanan tepi (yang pada dasarnya vektor). Hal ini dilakukan melalui rumus berikut:

Flash math vectors in AS3

Bahwa formula kembali kurang nomor dari 0 untuk menunjuk ke kanan tepi, dan lebih besar dari 0 untuk poin ke kiri itu. Jika nomornya sama dengan 0, titik terletak di tepi, dan dianggap dalam bentuk. Kode adalah sebagai berikut:

Kode ini bekerja terlepas dari Apakah Anda memiliki bentuk yang simpul didefinisikan searah jarum jam atau berlawanan arah jarum jam.


Langkah 19: Ray Casting

Ray pengecoran adalah teknik yang sering digunakan untuk deteksi tabrakan dan rendering. Terdiri dari sinar yang dilemparkan dari satu tempat ke yang lain (atau keluar tanpa batas). Ray ini terbuat dari poin atau vektor, dan umumnya berhenti ketika hits objek atau tepi layar. Sama dengan algoritma titik dalam bentuk, ada banyak cara untuk pemain sinar, dan kita akan melihat dua dari mereka dalam posting ini:

  • Bresenham baris algoritma, yang merupakan cara yang sangat cepat untuk menentukan tutup poin yang akan memberikan perkiraan garis antara mereka.
  • Metode DDA (Digital diferensial Analyzer), yang juga digunakan untuk membuat garis.

Dalam dua langkah kita akan melihat ke kedua metode. Setelah itu, kita akan melihat bagaimana membuat ray kami berhenti ketika hits objek. Hal ini sangat berguna ketika Anda perlu untuk mendeteksi tabrakan terhadap benda bergerak cepat.


Langkah 20: Bresenham Line algoritma

Algoritma ini sangat sering digunakan dalam komputer grafis, dan tergantung pada Konvensi bahwa garis akan selalu dibuat menunjuk ke kanan dan ke bawah. (Jika garis telah dibuat ke arah atas dan kiri, semuanya terbalik kemudian.) Mari kita pergi ke dalam kode:

Kode tersebut akan menghasilkan AS3 Vektor atau Euclidean vecktor yang akan membuat garis. Dengan Vector ini, kita dapat memeriksa tabrakan nantinya.


Langkah 21: Metode DDA

Sebuah implementasi dari Analyzer diferensial Digital digunakan untuk melakukan interpolasi variabel antara dua titik. Tidak seperti Bresenham garis algoritma, metode ini hanya akan menciptakan vektor bilangan bulat posisi untuk kesederhanaan. Berikut adalah kode:

Kode ini juga akan kembali AS3 Vektor vektor Euklidean.


Langkah 22: Memeriksa tabrakan menggunakan sinar

Memeriksa tabrakan melalui sinar ini sangat sederhana. Karena sinar terdiri dari banyak vektor, kita akan memeriksa tabrakan antara setiap vektor dan bentuk yang, sampai satu terdeteksi atau mencapai bagian akhir sinar. Dalam kode berikut, shapeToCheck akan menjadi bentuk yang sama seperti yang kita telah menggunakan langkah 13-16. Berikut adalah kode:

Anda dapat menggunakan fungsi titik berbentuk dalam apapun yang Anda merasa nyaman dengan, tetapi membayar perhatian keterbatasan terakhir!


Kesimpulan

Anda siap untuk mulai menggunakan pengetahuan ini di mana-mana sekarang! Ini akan berguna berkali-kali, dan akan menghemat banyak perhitungan tambahan ketika mencoba untuk melakukan hal-hal yang lebih kompleks di Flash.

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.