() translation by (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
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.
- Sementara pengaturan A dan B ke 0, men-tweak nilai C nilai-nilai positif dan negatif. Anda akan melihat baris yang tinggi berubah.
- Sekarang men-tweak nilai B antara nilai-nilai positif dan negatif. Mengamati apa yang terjadi dengan gradien baris.
- Sekarang mengubah nilai a antara nilai-nilai positif dan negatif, dan membandingkan hasil.
- Kemudian men-tweak B antara menjadi positif dan negatif lagi. Mengamati kurva yang selalu memotong melalui asal.
- 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).
1 |
private function quadratic1(x:Number, A:Number, B:Number, C:Number):Number { |
2 |
//y = A(x^2) + B(x) + C
|
3 |
return A*x*x+ B*x + C |
4 |
}
|
5 |
|
6 |
private function quadratic2(x:Number, P:Number, Q:Number, R:Number):Number { |
7 |
// y = P * (x + Q)^2 + R
|
8 |
return P*(x+Q)*(x+Q) + R |
9 |
}
|
Dan di sini adalah penerapan metode gambar menggunakan Graphics.drawPath(). Hanya catatan bahwa semua kurva dalam artikel ini diambil dengan cara sama.
Pertama variabel...
1 |
private var points:Vector.<Number> = new Vector.<Number>; |
2 |
private var drawCommand:Vector.<int> = new Vector.<int>; |
Sekarang y-posisi, dihitung berdasarkan posisi x dan koefisien tertentu.
1 |
private function redraw(A:Number, B:Number, C:Number):void { |
2 |
for (var i:int = 0; i < 400; i++) { |
3 |
var x:Number = i - 200; |
4 |
points[i * 2] = x * 10 + stage.stageWidth >> 1; |
5 |
if (isApproach1) { |
6 |
points[i * 2 + 1] = quadratic1(x, A, B, C) + stage.stageHeight >> 1 |
7 |
}
|
8 |
else { |
9 |
points[i * 2 + 1] = quadratic2(x, A, B, C) + stage.stageHeight >> 1 |
10 |
}
|
11 |
|
12 |
if (i == 0) drawCommand[i] = 1; |
13 |
else drawCommand[i] = 2; |
14 |
}
|
15 |
graphics.clear(); |
16 |
graphics.lineStyle(1); |
17 |
graphics.drawPath(drawCommand, points); |
18 |
}
|
(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.
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.
1 |
public function Draw_Curve() |
2 |
{
|
3 |
//setting up controls
|
4 |
c1 = new Circle(0xFF0000); addChild(c1); c1.x = stage.stageWidth * 0.2; c1.y = stage.stageHeight >> 1; |
5 |
c2 = new Circle(0xFF0000); addChild(c2); c2.x = stage.stageWidth * 0.5; c2.y = stage.stageHeight >> 1; |
6 |
c3 = new Circle(0xFF0000); addChild(c3); c3.x = stage.stageWidth * 0.8; c3.y = stage.stageHeight >> 1; |
7 |
|
8 |
c1.addEventListener(MouseEvent.MOUSE_DOWN, move); |
9 |
c1.addEventListener(MouseEvent.MOUSE_UP, move); |
10 |
c2.addEventListener(MouseEvent.MOUSE_DOWN, move); |
11 |
c2.addEventListener(MouseEvent.MOUSE_UP, move); |
12 |
c3.addEventListener(MouseEvent.MOUSE_DOWN, move); |
13 |
c3.addEventListener(MouseEvent.MOUSE_UP, move); |
14 |
redraw() |
15 |
}
|
16 |
|
17 |
private function move(e:MouseEvent):void { |
18 |
if (e.type == "mouseDown") { |
19 |
e.target.startDrag() |
20 |
e.target.addEventListener(MouseEvent.MOUSE_MOVE, update); |
21 |
}
|
22 |
else if (e.type == "mouseUp") { |
23 |
e.target.stopDrag(); |
24 |
e.target.removeEventListener(MouseEvent.MOUSE_MOVE, update); |
25 |
}
|
26 |
}
|
27 |
|
28 |
private function update(e:MouseEvent):void { |
29 |
redraw(); |
30 |
}
|
Inti terletak pada fungsi redraw. Aku sudah menyoroti operasi matriks dan fungsi kuadrat untuk redraw proses.
1 |
private function redraw():void |
2 |
{
|
3 |
K = new Matrix3d( c1.x * c1.x, c1.x, 1, 0, |
4 |
c2.x * c2.x, c2.x, 1, 0, |
5 |
c3.x * c3.x, c3.x, 1, 0, |
6 |
0, 0, 0, 1); |
7 |
K.invert() |
8 |
L = new Matrix3d( c1.y, 0, 0, 0, |
9 |
c2.y, 0, 0, 0, |
10 |
c3.y, 0, 0, 0, |
11 |
0, 0, 0, 0); |
12 |
L.append(K); |
13 |
|
14 |
graphics.clear(); |
15 |
var points:Vector.<Number> = new Vector.<Number>; |
16 |
var cmd:Vector.<int> = new Vector.<int>; |
17 |
for (var i:int = 0; i < 200; i++) { |
18 |
//current x
|
19 |
var x:Number = i * 2; |
20 |
|
21 |
//f(x) = A (x^2) + B (x) + C
|
22 |
var y:Number = L.n11* x* x + L.n21 * x + L.n31 ; |
23 |
|
24 |
points.push(x, y); |
25 |
if (i == 0) cmd.push(1); |
26 |
else cmd.push(2); |
27 |
}
|
28 |
graphics.lineStyle(1); |
29 |
graphics.drawPath(cmd, points); |
30 |
}
|
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:
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:
1 |
private function redraw(A:Number, B:Number, C:Number, D:Number):void { |
2 |
for (var i:int = 0; i < 400; i++) { |
3 |
var x:Number = i - 200; |
4 |
points[i * 2] = x * 10 + stage.stageWidth >> 1; |
5 |
points[i * 2 + 1] = cubic1(x, A, B, C, D) + stage.stageHeight >> 1 |
6 |
|
7 |
if (i == 0) drawCommand[i] = 1; |
8 |
else drawCommand[i] = 2; |
9 |
}
|
10 |
graphics.clear(); |
11 |
graphics.lineStyle(1); |
12 |
graphics.drawPath(drawCommand, points); |
13 |
}
|
14 |
|
15 |
private function cubic1(x:Number, A:Number, B:Number, C:Number, D:Number):Number { |
16 |
//y = A(x^3) + B(x^2) + C(x) + D
|
17 |
return A*x*x*x+ B*x*x + C*x +D |
18 |
}
|
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.
1 |
public function Draw_Curve2() |
2 |
{
|
3 |
//setting up controls
|
4 |
c1 = new Circle(0xFF0000); addChild(c1); c1.x = stage.stageWidth * 0.2; c1.y = stage.stageHeight >> 1; |
5 |
c2 = new Circle(0xFF0000); addChild(c2); c2.x = stage.stageWidth * 0.4; c2.y = stage.stageHeight >> 1; |
6 |
c3 = new Circle(0xFF0000); addChild(c3); c3.x = stage.stageWidth * 0.6; c3.y = stage.stageHeight >> 1; |
7 |
c4 = new Circle(0xFF0000); addChild(c4); c4.x = stage.stageWidth * 0.8; c4.y = stage.stageHeight >> 1; |
8 |
|
9 |
c1.addEventListener(MouseEvent.MOUSE_DOWN, move); |
10 |
c1.addEventListener(MouseEvent.MOUSE_UP, move); |
11 |
c2.addEventListener(MouseEvent.MOUSE_DOWN, move); |
12 |
c2.addEventListener(MouseEvent.MOUSE_UP, move); |
13 |
c3.addEventListener(MouseEvent.MOUSE_DOWN, move); |
14 |
c3.addEventListener(MouseEvent.MOUSE_UP, move); |
15 |
c4.addEventListener(MouseEvent.MOUSE_DOWN, move); |
16 |
c4.addEventListener(MouseEvent.MOUSE_UP, move); |
17 |
|
18 |
redraw(); |
19 |
}
|
20 |
private function move(e:MouseEvent):void { |
21 |
if (e.type == "mouseDown") { |
22 |
e.target.startDrag() |
23 |
e.target.addEventListener(MouseEvent.MOUSE_MOVE, update); |
24 |
}
|
25 |
else if (e.type == "mouseUp") { |
26 |
e.target.stopDrag(); |
27 |
e.target.removeEventListener(MouseEvent.MOUSE_MOVE, update); |
28 |
}
|
29 |
}
|
30 |
|
31 |
private function update(e:MouseEvent):void { |
32 |
redraw(); |
33 |
}
|
redraw adalah fungsi penting di mana segala sesuatu terjadi.
1 |
private function redraw():void |
2 |
{
|
3 |
var left:Matrix3d = new Matrix3d(c1.x * c1.x* c1.x, c1.x* c1.x, c1.x , 1, |
4 |
c2.x * c2.x * c2.x, c2.x* c2.x, c2.x , 1, |
5 |
c3.x * c3.x * c3.x, c3.x* c3.x, c3.x , 1, |
6 |
c4.x * c4.x * c4.x, c4.x* c4.x, c4.x , 1); |
7 |
left.invert() |
8 |
var right:Matrix3d = new Matrix3d(c1.y, 0, 0, 0, |
9 |
c2.y, 0, 0, 0, |
10 |
c3.y, 0, 0, 0, |
11 |
c4.y, 0, 0, 0); |
12 |
right.append(left); |
13 |
|
14 |
//f(x) = A(x^3) + B (x^2) +C (x) + D
|
15 |
graphics.clear(); |
16 |
var points:Vector.<Number> = new Vector.<Number>; |
17 |
var cmd:Vector.<int> = new Vector.<int>; |
18 |
for (var i:int = 0; i < 200; i++) { |
19 |
var x:Number = i * 2; |
20 |
var y:Number = right.n11 * x * x * x+ |
21 |
right.n21 * x * x+ |
22 |
right.n31 * x + |
23 |
right.n41; |
24 |
|
25 |
points.push(x, y); |
26 |
if (i == 0) cmd.push(1); |
27 |
else cmd.push(2); |
28 |
}
|
29 |
graphics.lineStyle(1); |
30 |
graphics.drawPath(cmd, points); |
31 |
}
|
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.
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:
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
1 |
private function redraw():void { |
2 |
var left:Matrix3d = new Matrix3d(c1.x * c1.x, c1.x, 1, 0, |
3 |
c2.x * c2.x, c2.x, 1, 0, |
4 |
c3.x * c3.x, c3.x, 1, 0, |
5 |
0, 0, 0, 1); |
6 |
left.invert() |
7 |
var right:Matrix3d = new Matrix3d(c1.y, 0, 0, 0, |
8 |
c2.y, 0, 0, 0, |
9 |
c3.y, 0, 0, 0, |
10 |
0, 0, 0, 0); |
11 |
right.append(left); |
12 |
|
13 |
//D = A (x^2)+ B (x) +C
|
14 |
for each (var item: Circle in background) { |
15 |
var D:Number = right.n11* item.x * item.x + right.n21 * item.x + right.n31 ; |
16 |
//trace(background[i].y);
|
17 |
if (item.y > D) item.color = 0; |
18 |
else item.color = 0xAAAAAA; |
19 |
}
|
20 |
}
|
Berikut adalah contoh dengan kurva kubik.
Dan implementasi yang datang dengan itu. Sekali lagi, penuh script di Region_Curve2.as
1 |
//D = A + B (x) +C (x^2)
|
2 |
for each (var item: Circle in background) { |
3 |
var D:Number = right.n11 * item.x * item.x * item.x;+ |
4 |
right.n21 * item.x * item.x + |
5 |
right.n31 * item.x + |
6 |
right.n41 |
7 |
//trace(background[i].y);
|
8 |
if (item.y > D) item.color = 0; |
9 |
else item.color = 0xAAAAAA; |
10 |
}
|
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.
1 |
var max:Number = 0; |
2 |
var min:Number = 0; |
3 |
var Ds:Vector.<Number> = new Vector.<Number>; |
4 |
|
5 |
//D = A(x^2) + B (x) +C
|
6 |
for each (var item: Circle in background) { |
7 |
var D:Number = right.n11 * item.x * item.x + right.n21 * item.x + right.n31; |
8 |
var offset:Number = item.y - D; |
9 |
Ds.push(offset); |
10 |
|
11 |
if (item.y > D && offset > max) max = offset; |
12 |
else if (item.y < D && offset < min) min = offset; |
13 |
}
|
Setelah selesai, kami akan menerapkan untuk pewarnaan titik individu.
1 |
//color variations based on the offset
|
2 |
var color:Number |
3 |
for (var i:int = 0; i < background.length; i++) { |
4 |
if (Ds[i] > 0) { |
5 |
color = Ds[i] / max * 255 //calculating color to slot in |
6 |
background[i].color = color<<16 | color<<8 | color; //define a grayscale |
7 |
}
|
8 |
else if (Ds[i] < 0) { |
9 |
color = Ds[i] / min * 255; |
10 |
background[i].color = color<<16; //define a gradient of red |
11 |
}
|
12 |
}
|
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.
