Advertisement
  1. Code
  2. Effects

Transformasi Affine pemahaman dengan matriks matematika

Scroll to top
Read Time: 14 min
This post is part of a series called You Do The Math.
Circular Motion in AS3: Make One Moving Object Orbit Another
The Math and ActionScript of Curves: Drawing Quadratic and Cubic Curves

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

Terinspirasi oleh Prof. Wildberger dalam seri kuliah nya aljabar linear, aku berniat untuk mengimplementasikan ide-ide matematis dengan Flash. Kami tidak akan menyelidiki manipulasi matematika matriks melalui aljabar linear: hanya melalui vektor. Pemahaman ini, meskipun menipiskan keanggunan aljabar linear, sudah cukup untuk memulai kita ke beberapa kemungkinan menarik 2 x 2 matrix manipulasi. Secara khusus, kami akan menggunakannya untuk menerapkan berbagai efek penggunting, skewing, membalik dan skala gambar pada saat runtime.


Hasil akhir Tinjauan

Mari kita lihat hasil akhir yang akan kita upayakan. Tekan empat tombol arah - atas, bawah, kiri, kanan - untuk melihat beberapa efek yang dapat kita capai dengan transformasi affine.

Jika Anda hanya menggunakan tombol panah kiri dan kanan, ikan muncul untuk berenang di sekitar di ruang isometrik pseudo-3D.


Langkah 1: Ruang koordinat berbeda

Grafik digambar ke dalam ruang koordinat. Jadi untuk memanipulasi mereka, terutama untuk menerjemahkan, memutar, skala, memantulkan dan condong grafik, sangat penting bahwa kita memahami ruang koordinat. Kita umumnya memanfaatkan tidak hanya satu, tetapi beberapa ruang koordinat dalam satu proyek - ini berlaku tidak hanya untuk desainer menggunakan Flash IDE, tetapi juga untuk pemrogram menulis ActionScript.

Dalam Flash IDE ini terjadi setiap kali Anda mengonversi gambar Anda menjadi simbol MovieClip: setiap simbol memiliki asalnya sendiri.

Coordinate space for stage.

Gambar di atas menunjukkan asal-usul tahap ' mengkoordinasikan ruang (titik merah), dan bahwa simbol ruang koordinat (pendaftaran titik yang ditandai oleh crosshair). Untuk mengetahui yang ruang Anda berada di saat ini, mengamati bilah di bawah timeline Flash IDE seperti yang ditunjukkan oleh gambar di bawah.

Coordinate space for symbol

(Saya menggunakan Flash CS3, jadi lokasinya mungkin berbeda untuk CS4 dan CS5.) Yang ingin saya tekankan adalah adanya ruang koordinat yang berbeda, dan fakta bahwa Anda sudah terbiasa menggunakannya.


Langkah 2: Alasan

Sekarang ada alasan yang baik untuk ini. Kita dapat menggunakan satu ruang koordinat sebagai referensi untuk mengubah ruang koordinat lainnya. Ini mungkin terdengar asing, jadi saya sudah menyertakan presentasi Flash di bawah untuk memfasilitasi penjelasan saya. Klik dan seret panah merah. Main-main dengan itu.

Di latar belakang adalah kotak biru, dan di latar depan adalah kotak merah. Panah biru dan merah awalnya sejajar sepanjang x - dan y sumbu Flash mengkoordinasikan ruang, Pusat yang saya telah bergeser ke tengah panggung. Grid biru adalah grid referensi; gridlines tidak akan berubah saat Anda berinteraksi dengan panah merah. Grid merah, di sisi lain, dapat reoriented dan ditingkatkan dengan menyeret panah merah.

Perhatikan bahwa panah juga menunjukkan properti yang penting ini Grids. Mereka menunjukkan gagasan unit x dan y pada grid mereka masing-masing unit. Ada dua panah merah di kotak merah. Masing-masing menunjukkan panjang satu unit pada sumbu x dan sumbu y. Mereka juga menentukan orientasi ruang koordinat. Mari kita mengambil panah merah menunjuk sepanjang sumbu x dan memperluas hal itu terjadi dua kali selama panah asli (ditampilkan dengan warna biru). Mengamati gambar berikut.

Original grids without alterationOriginal grids without alterationOriginal grids without alteration
X-axis of red grid altered while blue axis remains unchangedX-axis of red grid altered while blue axis remains unchangedX-axis of red grid altered while blue axis remains unchanged

Kita melihat bahwa gambar (kotak hijau) digambar di grid merah sekarang melebar horizontal, karena fakta bahwa kotak merah ini ditarik ke telah dua kali luas. Intinya aku mencoba membuat agak sederhana: Anda dapat menggunakan satu ruang koordinat sebagai dasar untuk mengubah ruang koordinat yang lain.


Langkah 3: Affine transformations ruang koordinat

Jadi apa adalah "ruang koordinat affine transformations"? Yah, aku yakin Anda berhati-hati untuk mengamati bahwa ruang ini koordinat tertarik menggunakan grids paralel. Mari kita mengambil ruang affine transformations merah misalnya: tidak ada jaminan bahwa sumbu x dan sumbu y yang selalu tegak lurus satu sama lain, tapi yakinlah bahwa namun Anda mencoba untuk men-tweak Panah, Anda tidak pernah akan tiba di sebuah kasus sebagai berikut.

Not affine spaceNot affine spaceNot affine space
Ruang koordinat ini bukanlah sebuah ruang koordinat affine transformations.

Pada kenyataannya, axes x dan y biasanya mengacu pada ruang koordinat Kartesius, seperti yang ditunjukkan di bawah ini.

Cartesian as a type of affine spaceCartesian as a type of affine spaceCartesian as a type of affine space

Perhatikan bahwa kisi horizontal dan vertikal saling tegak lurus. Cartesian adalah jenis ruang koordinat affine, tetapi kita dapat mengubahnya ke ruang affine lain sesuai keinginan. Grid horisontal dan vertikal tidak selalu harus tegak lurus satu sama lain.

Example of affine spaceExample of affine spaceExample of affine space
Contoh dari sebuah ruang koordinat affine transformations
Example of affine spaceExample of affine spaceExample of affine space
Contoh lain dari ruang koordinat affine

Langkah 4: Transformasi Affine

Seperti yang sudah bisa Anda duga, transformasi affine adalah terjemahan, scaling, refleksi, membuat dan rotasi.

Original affine spaceOriginal affine spaceOriginal affine space
Ruang affine transformations asli
scaled affine spacescaled affine spacescaled affine space
Ruang affine diskalakan
reflected affine spacereflected affine spacereflected affine space
Tercermin affine transformations Ruang
skewed affine spaceskewed affine spaceskewed affine space
Ruang affine transformations miring
rotated affine spacerotated affine spacerotated affine space
Diputar dan skala affine transformations Ruang

Perlu dikatakan, sifat-sifat fisik seperti x, y, scaleX, scaleY dan rotasi tergantung pada ruang. Ketika kita membuat panggilan ke properti-properti, kami benar-benar adalah transformasi affine transformations koordinat.


Langkah 5: Pemahaman matriks

Saya berharap gambar yang ditampilkan di atas cukup jelas untuk pulang ide. Hal ini karena untuk programmer bekerja dengan FlashDevelop, kita tidak akan melihat mereka grid yang nyaman menampilkan Flash IDE untuk desainer. Semua ini harus hidup di kepala Anda.

Selain dari membayangkan grid ini, kita juga perlu untuk meminta bantuan matriks kelas. Dengan demikian, memiliki pemahaman matematika matriks penting, jadi kami akan merevisi operasi matriks berikut: penambahan dan perkalian.

Matrix operations

Langkah 6: Geometris makna tambahan matriks

Matriks operasi convery makna geometris. Dengan kata lain, Anda dapat membayangkan apa yang mereka berarti pada grafik. Mari kita asumsikan bahwa kita memiliki empat poin dalam ruang koordinat kami dan ingin beralih mereka untuk satu set lokasi baru. Ini dapat dilakukan menggunakan matriks penambahan. Lihat gambar di bawah.

Geometrical meaning of matrix additionGeometrical meaning of matrix additionGeometrical meaning of matrix addition

Seperti yang Anda lihat, kami sebenarnya menggeser seluruh ruang koordinat lokal (kotak merah) di mana keempat titik ini diambil. Notasi untuk melakukan operasi ini adalah seperti yang ditunjukkan di bawah ini:

Notation of matrix additionNotation of matrix additionNotation of matrix addition

Kita juga dapat melihat bahwa pergeseran ini dapat benar-benar diwakili menggunakan vektor (tx, ty). Mari kita membedakan vektor dan statis titik dalam koordinat ruang dengan kami menggunakan kurung dan kurung. Saya telah menulis ulang dalam gambar di bawah.

Notation of matrix addition, differentiatedNotation of matrix addition, differentiatedNotation of matrix addition, differentiated

Langkah 7: ActionScript implementasi

Berikut ini adalah implementasi sederhana penambahan matriks. Memeriksa komentar:


Langkah 8: Makna Geometris dari Penggandaan Matriks

Perkalian matriks agak lebih canggih dari matriks penambahan tapi Prof Wildberger elegan telah rusak itu ke penafsiran sederhana ini. Saya dengan rendah hati akan mencoba untuk mengulangi penjelasannya. Bagi mereka yang ingin menyelam lebih dalam ke pemahaman aljabar linear yang mengarah ke ini, memeriksa seri kuliah sang profesor.

Mari kita mulai dengan mengatasi kasus matriks identitas, saya.

Identity matrixIdentity matrixIdentity matrix

Dari gambar di atas kita mengetahui bahwa mengalikan matrix sewenang-wenang, A, dengan matriks identitas, aku akan selalu menghasilkan A. Berikut adalah analogi: 6 x 1 = 6; matriks identitas disamakan dengan nomor 1 di perkalian itu.

Selain itu, kita dapat menulis hasil dalam format vektor berikut yang akan sangat menyederhanakan interpretasi kita:

Vector formVector formVector form

Interpretasi geometris formula ini ditunjukkan dalam gambar di bawah.

Interpretation of vector formInterpretation of vector formInterpretation of vector form

Dari Cartesian grid (kiri grid), kita dapat melihat titik biru terletak di (2, 1). Sekarang jika kita ingin mengubah ini grid asli x dan y untuk grid baru (kanan grid) menurut satu set vektor (di bawah grid tepat), titik biru akan dipindahkan ke (2, 1) pada grid baru - tetapi ketika kita peta ini kembali ke grid asli , itu adalah titik yang sama seperti sebelumnya.

Karena kita mengubah asli grid ke grid lain yang saham vektor sama untuk x dan y, kita melihat ada perbedaan. Pada kenyataannya, perubahan x dan y dalam transformasi ini nihil. Ini adalah apa yang dimaksud dengan matriks identitas, dari sudut pandang geometris.

Namun, jika kita mencoba untuk melakukan pemetaan menggunakan transformasi lain, kita akan melihat beberapa perbedaan. Aku tahu itu bukan contoh paling mengungkapkan untuk memulai dengan, jadi mari kita beralih ke contoh lain.


Langkah 9: Scaling sepanjang X

Scaling in x directionScaling in x directionScaling in x direction

Gambar di atas menunjukkan skala ruang koordinat. Memeriksa vektor x dalam ruang koordinat berubah: satu unit berubah x account untuk dua unit x asli. Pada ruang koordinat transformasi, koordinat titik biru masih (2, 1). Namun, jika Anda mencoba untuk peta ini koordinat dari berubah grid ke grid asli, itu adalah (4, 1).

Gagasan ini ditangkap oleh gambar di atas. Bagaimana rumus? Hasilnya harus konsisten; Mari kita periksa.

Saya yakin Anda ingat rumus ini. Sekarang, saya telah menambahkan makna mereka masing-masing.

Interpretation of matrix

Sekarang untuk memeriksa hasil numerik dari contoh penskalaan kami.

  • Asli Koordinat: (2, 1)
  • Vektor pada sumbu x yang ditransformasikan: (2, 0)
  • Vektor pada sumbu berubah: (0, 1)
  • Diharapkan hasil: (2 * 2 + 0 * 1, 0 * 2 + 1 * 1) = (4, 1)
Scale numerical result

Mereka setuju dengan satu sama lain! Sekarang kita gembira dapat menerapkan ide ini untuk transformasi lain. Tetapi sebelum itu, sebuah implementasi ActionScript.


Langkah 10: Implementasi ActionScript

Memeriksa pelaksanaan ActionScript (dan SWF yang dihasilkan) di bawah ini. Perhatikan bahwa salah satu kotak tumpang tindih yang membentang sepanjang x oleh skala 2. Saya telah menyoroti nilai-nilai penting. Nilai-nilai ini akan men-tweak di langkah kemudian untuk mewakili transformasi yang berbeda.


Langkah 11: Skala X dan Y

scaling x and yscaling x and yscaling x and y

Di sini kita telah turunkan grid dengan faktor dua sepanjang x - maupun y-axes. Titik biru adalah (2, 1) dalam grid asli sebelum transformasi, dan (4, 2) dalam grid asli setelah transformasi. (Tentu saja, hal ini masih di (2, 1) dalam grid baru setelah transformasi.)

Dan untuk mengonfirmasi hasil secara numerik ...

Scale x and y numerical result

... mereka cocok lagi! Untuk melihat ini dalam implementasi ActionScript, cukup ubah nilai m.d dari 1 menjadi 2.

(Perhatikan bahwa arah peregangan dari y adalah ke bawah, tidak ke atas, karena y akan menambahkan ke bawah di Flash tetapi ke atas di ruang koordinat Kartesius normal yang saya gunakan dalam diagram.)


Langkah 12: refleksi

reflectionreflectionreflection

Di sini kita telah merefleksikan kisi di sepanjang sumbu x menggunakan dua vektor ini, sehingga posisi titik biru di kisi asli berubah dari (2, 1) menjadi (-2, 1). Perhitungan numerik adalah sebagai berikut:

reflect x numerical result

ActionScript implementasi adalah sama seperti sebelumnya, tetapi menggunakan ini nilai-nilai sebaliknya: m.a =-1, darinazrul = 0 untuk mewakili vektor untuk transformasi x, dan: m.c = 0 dan m. d = 1 untuk mewakili vektor untuk transformasi y.

Selanjutnya, apa tentang mencerminkan secara bersamaan di x dan y? Lihat gambar di bawah.

reflectionreflectionreflection

Juga, numerik dihitung dalam gambar di bawah ini.

reflect x and y numerical result

Untuk implementasi ActionScript... Yah, saya yakin Anda tahu nilai untuk dimasukkan ke dalam matriks. m.a =-1, darinazrul = 0 untuk mewakili vektor untuk transformasi x; m.c = 0 dan m. d =-1 untuk mewakili vektor untuk transformasi y. Saya telah menyertakan SWF akhir di bawah ini.


Langkah 13: Skewing dan geser

Skewing dilengkapi dengan sedikit menyenangkan. Untuk kasus gambar di bawah, grid berubah memiliki sumbu-x yang reoriented dan skala. Bandingkan panah merah di grid kedua di bawah ini: mereka berbeda, tetapi sumbu y tetap tidak berubah.

skewingskewingskewing
Skewing

Secara visual, tampaknya bahwa distorsi yang terjadi di sepanjang y-arah. Ini benar karena sumbu x kita berubah sekarang memiliki y-komponen dalam vektor nya.

Numerik, ini adalah apa yang terjadi...

shear in y numerical result

Dalam implementasi, saya telah terdaftar tweak di bawah ini.

  • m.a = 2
  • darinazrul = 1
  • m.c = 0
  • m.d = 1

Saya yakin pada titik ini Anda ingin mencoba berbagai hal sendiri, jadi lanjutkan dan atur

  • orientasi sumbu berubah sambil mempertahankan sumbu-x
  • orientasi kedua sumbu sama sekali

Saya telah menyertakan Flash keluaran kedua kasus sebagai berikut. Untuk pembaca yang ingin bantuan dengan nilai-nilai ini, periksa Multiplication_final.as di download sumber.


Langkah 14: Rotasi

Saya menganggap rotasi subset dari skewing. Satu-satunya perbedaan adalah bahwa dalam rotasi, besarnya unit x dan sumbu y dipertahankan, seperti Jual: perpendicularity antara dua sumbu.

rotation explained

ActionScript sebenarnya menyediakan metode di kelas Matrix, rotate(), untuk melakukan ini. Tapi mari kita lanjutkan ini.

Sekarang kita tidak ingin mengubah besarnya satuan panjang di x dan y dari grid asli; hanya untuk mengubah orientasi masing-masing. Kita dapat menggunakan trigonometri untuk tiba di hasilnya ditampilkan pada gambar diatas. Diberikan sudut roation,, kita akan mendapatkan hasil yang diinginkan dengan menggunakan vektor (cos a, dosa) untuk sumbu x dan (-dosa a, cos) untuk sumbu. Besarnya untuk setiap sumbu baru masih akan satu unit, tetapi setiap sumbu akan pada sudut, dibandingkan dengan aslinya.

Untuk pelaksanaan Actionscript, dengan asumsi bahwa sudut,, 45 derajat (yaitu 0,25 * Pi radian), hanya men-tweak matriks nilai-nilai berikut:

Sumber lengkap dapat dirujuk di Multiplication_final.as.


Langkah 15: aplikasi

Memiliki sebuah interpretasi vektor 2 x 2 matriks membuka ruang bagi kita untuk mengeksplorasi. Penerapannya di memanipulasi bitmap (BitmapData, LineBitmapStyle, LineGradientStyle, dll) luas - tapi saya pikir saya akan menyimpan itu untuk tutorial lain. Untuk kasus artikel ini, kami akan berusaha untuk condong sprite kami pada saat run-time sehingga terlihat seperti itu benar-benar membalik dalam 3D.

view of isometric world
Pandangan dunia isometrik pseudo-3D

Dari gambar di atas kita dapat melihat bahwa, dalam dunia dengan pandangan isometrik, salah grafis itu "berdiri" terus vektor sumbu yang berubah sedangkan vektor sumbu x adalah berputar. Dicatat bahwa satuan panjang untuk x - dan y sumbu tidak berubah - dengan kata lain, tidak ada skala harus terjadi di axis baik, hanya rotasi di sekitar sumbu-x.

Berikut ini contoh ide ini di Flash. Klik di mana saja di panggung dan mulai menyeret sekitar untuk melihat kemiringan ikan. Lepaskan untuk menghentikan interaksi Anda.

Berikut adalah sedikit penting ActionScript. Aku sudah menyoroti jalur penting yang menangani rotasi sumbu x. Anda juga dapat merujuk ke FakeIso.as.

Di sini, saya telah menggunakan kelas Point untuk menyimpan vektor.


Langkah 16: Tambahkan Keyboard kontrol

Dalam langkah ini, kita akan mencoba untuk menambahkan keyboard kontrol. Lokasi ikan akan memperbarui menurut kecepatan, velo. Kita akan menentukan langkah-langkah bertahap untuk rotasi (searah jarum jam) positif dan negatif rotasi (anti-searah jarum jam) juga.

Berdasarkan tekan tombol, velo akan memutar:

Sekarang untuk setiap frame, kami akan berusaha untuk warna sisi depan ikan, dan ikan serta condong. Jika kecepatan, velo, memiliki besaran lebih dari 1 dan kita menerapkannya kepada matriks ikan, m, kita akan mendapatkan efek skala-sehingga untuk menghilangkan kemungkinan ini, kita akan menormalisasi kecepatan dan kemudian hanya menerapkan bahwa ikan matriks.


Langkah 17: Ikan Anda

Klik panggung, lalu tekan tombol panah kiri dan kanan untuk melihat membuat ikan mengubah arah.


Langkah 18: Lain Keyboard kontrol

Untuk barang-barang rempah, mari kita memungkinkan kontrol vektor sumbu juga.

Juga untuk menentukan sisi depan dari ikan, kita sekarang perlu memasukkan sumbu y di. Berikut adalah kode untuk itu:


Langkah 19: Ikan Anda tidak-jadi-reguler

Yah, untuk beberapa hasil mengendalikan kedua sumbu mungkin terbukti menjadi sedikit membingungkan, tapi intinya adalah bahwa Anda sekarang dapat condong ikan Anda, menerjemahkan, mencerminkan dan bahkan memutar itu! Mencoba combo dari atas + kiri, up + kanan, ke kiri, bawah + kanan.

Juga, lihat jika Anda dapat mempertahankan "front" sisi ikan (ikan akan berwarna abu). Petunjuk: Tekan terus, kemudian meninggalkan, kemudian turun, lalu kanan. Anda membuat rotasi!

Kesimpulan

Saya harap Anda menemukan matriks matematika aset berharga untuk proyek-proyek Anda setelah membaca artikel ini. Saya berharap untuk menulis sedikit lebih di aplikasi 2 x 2 matriks dalam sedikit Tips cepat yang bercabang dari artikel ini, dan pada Matrix3d yang penting untuk manipulasi 3D. Terima kasih untuk membaca, terima kasih.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.