Matematika dan ActionScript kurva: gradien dan orang normal

() translation by (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?

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:


var x:Number = s.value
var y:Number = quadratic_equation.fx_of(s.value)
point.x = x;
point.y = y;

/**
 * y = mx + c;
 * c = y - mx;  <== use this to find c
 */
var m:Number = quadratic_equation.diff1(x);
var c:Number =  y - m * x;

graphics.clear();
graphics.lineStyle(1, 0xff0000);
graphics.moveTo(0, c);
graphics.lineTo(stage.stageWidth, m * stage.stageWidth + c);

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.

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.

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).

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.

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
\]

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.

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.


private function redraw_quadratic_curve():void 
{
    var cmd:Vector.<int> = new Vector.<int>;
    var coord:Vector.<Number> = new Vector.<Number>;
    
    //redraw curve;
    m1 = new Matrix3d(
        curve_points[0].x * curve_points[0].x, curve_points[0].x, 1, 0,
        curve_points[1].x * curve_points[1].x, curve_points[1].x, 1, 0,
        curve_points[2].x * curve_points[2].x, curve_points[2].x, 1, 0,
        0,0,0,1
    );
    
    m2 = new Matrix3d(
        curve_points[0].y, 0, 0, 0,
        curve_points[1].y, 0, 0, 0,
        curve_points[2].y, 0, 0, 0,
        0,0,0,1
    )
    
    m1.invert();
    m2.append(m1);
    quadratic_equation.define(m2.n11, m2.n21, m2.n31);
    
    for (var i:int = 0; i < stage.stageWidth; i+=2) 
    {
        if (i == 0) cmd.push(1);
        else		cmd.push(2);
        
        coord.push(i, quadratic_equation.fx_of(i));
    }
    
    graphics.clear();
    graphics.lineStyle(1);
    graphics.drawPath(cmd, coord);
}

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


private function recalculate_distance():void 
{
    var a:Number = m2.n11;	
    var b:Number = m2.n21;
    var c:Number = m2.n31;
    
    /*f(x) = Ax^3 + Bx^2 +Cx + D
     */
    var A:Number = 2*a*a
    var B:Number = 3*b*a
    var C:Number = b*b + 2*c*a - 2*a*c1.y +1
    var D:Number = c * b - b * c1.y - c1.x
    
    quartic_gradient = new EqCubic();
    quartic_gradient.define(A, B, C, D);
    quartic_gradient.calcRoots();
    
    roots = quartic_gradient.roots_R;
    var chosen:Number = roots[0];
    
    if (!isNaN(roots[1]) && !isNaN(roots[2])) {
        
        //calculate gradient and rate of gradient of all real roots
        var quartic_rate:Vector.<Number> = new Vector.<Number>;
        
        for (var i:int = 0; i < roots.length; i++) 
        {
            if (!isNaN(roots[i])) 	quartic_rate.push(quartic_gradient.diff1(roots[i]));
            else 					roots.splice(i, 1);
        }
        
        //select the root that will produce the shortest distance
        for (var j:int = 1; j < roots.length; j++) 
        {
            //the rate that corresponds with the root must be the highest positive value
            //because that will correspond with the minimum point
            if (quartic_rate[j] > quartic_rate[j - 1]) {
                chosen = roots[j];
            }
        }
        
        //position the extra roots in demo
        position_extras();
    }
    else {
        
        //remove the extra roots in demo
        kill_extras();
    }
    intersec_points[0].x = chosen
    intersec_points[0].y = quadratic_equation.fx_of(chosen);
}

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.


graphics.moveTo(intersec_points[0].x, intersec_points[0].y);
graphics.lineTo(c1.x, c1.y);

var distance:Number= Math2.Pythagoras(
    intersec_points[0].x, 
    intersec_points[0].y, 
    c1.x, 
    c1.y)

if (distance < c1.radius)  c1.alpha = 0.5;
else                       c1.alpha = 1.0;

t.text = distance.toPrecision(3);

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.


public function CollisionDetection2() 
{
    /**
     * Instantiation of ship & its blue-ish circular area
     */
    ship = new Triangle();	addChild(ship);
    ship.x = Math.random() * stage.stageWidth;
    ship.y = stage.stageHeight * 0.8;
    
    c1 = new Circle(0x0000ff, 15);	addChild(c1);
    c1.alpha = 0.2;
    
    /**
     * Ship's velocity
     */
    velo = new Vector2D(0, -1);
    updateShip();
    
    stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKey);
    stage.addEventListener(KeyboardEvent.KEY_UP, handleKey);
    stage.addEventListener(Event.EXIT_FRAME, handleEnterFrame);
    
    /**
     * The curve and the calculations
     */
    quadratic_equation = new EqQuadratic();
    
    curve_points = new Vector.<Circle>;
    populate(curve_points, 0xff0000, 3);
    
    intersec_points = new Vector.<Circle>;
    populate(intersec_points, 0xffff00, 3, false);
    
    redraw_quadratic_curve();
}

private function handleKey(e:KeyboardEvent):void 
{
    if (e.type == "keyDown") {
        if (e.keyCode == Keyboard.UP) isUp = true;
        else if (e.keyCode == Keyboard.DOWN) isDown = true;
        if (e.keyCode == Keyboard.LEFT) isLeft = true;
        else if (e.keyCode == Keyboard.RIGHT) isRight = true;
    }
    if (e.type == "keyUp") {
        if (e.keyCode == Keyboard.UP) isUp = false;
        else if (e.keyCode == Keyboard.DOWN) isDown = false;
        if (e.keyCode == Keyboard.LEFT) isLeft = false;
        else if (e.keyCode == Keyboard.RIGHT) isRight = false;
    }
}

private function handleEnterFrame(e:Event):void 
{
    /**
     * Control the magnitude
     */
    if (isUp) 		velo.setMagnitude(Math.min(velo.getMagnitude()+0.2, 3));
    else if(isDown)	velo.setMagnitude(Math.max(velo.getMagnitude()-0.2, 1));
    
    /**
     * Control the direction
     */
    if (isRight) velo.setAngle(velo.getAngle() + 0.03);
    else if (isLeft) velo.setAngle(velo.getAngle() - 0.03);
    
    recalculate_distance();
    
    if (distance < c1.radius) bounce();
    updateShip();
}

/**
 * Update ship's position, orientation and it's area (the blue-ish circle)
 */
private function updateShip():void {
    ship.x += velo.x;
    ship.y += velo.y;
    ship.rotation = Math2.degreeOf(velo.getAngle());
    
    c1.x = ship.x; 
    c1.y = ship.y;
    
    if (ship.x > stage.stageWidth || ship.x < 0) velo.x *= -1;
    if (ship.y > stage.stageHeight || ship.y < 0) velo.y *= -1;
}

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:


private function bounce():void 
{
    var gradient:Number = quadratic_equation.diff1(intersec_points[0].x);
    var grad_vec:Vector2D = new Vector2D(1, gradient);
    
    var left_norm:Vector2D = grad_vec.getNormal(false);
    var right_norm:Vector2D = grad_vec.getNormal();
    var chosen_vec:Vector2D;
    
    if (velo.dotProduct(left_norm) > 0) chosen_vec = left_norm
    else 								chosen_vec = right_norm
        
    var chosen_unit:Vector2D = chosen_vec.normalise();
    var proj:Number = velo.dotProduct(chosen_unit);
    
    chosen_unit.scale(-2*proj);
    
    velo = velo.add(chosen_unit);
}

Kesimpulan

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