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

Die Wiskunde en Aksieskrip van Kurwes: Teken Kwadratiese en Kubieke Kurwes

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called You Do The Math.
Understanding Affine Transformations With Matrix Mathematics
The Math and ActionScript of Curves: Roots

Afrikaans (Afrikaans) translation by Amir bin Abdullah (you can also view the original English article)

Ons sien lyne wat in baie scenario's gebruik word. Kurwes word ook gebruik, hoewel miskien nie so gereeld nie - maar dit ondermyn nie hul belangrikheid nie! In hierdie handleiding gaan ons die kurwes, veral die kwadratiese en kubieke kurwe, nader aan die hand van sommige van hul algemeen gebruikte wiskundige eienskappe.


Finale resultaatvoorskou

Kom ons kyk na die finale uitslag waarna ons gaan werk. Sleep die rooi kolle en sien die gradiënte verander in posisie.

En hier is 'n ander demo, met die gebruik van kubieke kurwes, sonder die gradiënte:


Stap 1: Kurwes

Kwadratiese en kubieke sal in elk van hierdie gedeeltes verskyn. Kom ons kyk eers na die vergelyking van kurwes. Hierdie vergelykings word in polinoomvorm geskryf, begin met die termyn van hoogste graad. Die eerste een is kwadratiese vergelyking (hoogste graad is 2); die tweede is kubieke vergelyking (hoogste graad is 3).
\ [f (x) = Aks ^ 2 + Bx + C \ ... (eq \ 1) \]
\ [g (x) = Aks ^ 3 + Bx ^ 2 + Cx + D \ ... (eq \ 2) \]

Let daarop dat A, B, C en D reële getalle is. So nou dat ons dit ken, laat ons dit probeer visualiseer. Grafiekkurwes sal ons volgende poging wees.


Stap 2: Grafiekkrommes

Laat ons eers 'n kwadratiese kromme grafiek. Ek is seker dat al die lesers die kwadratiese kromme in die hoërskool wiskunde klas getoon het, maar net om jou geheue te verfris, bied ek grafieke hieronder aan. Hulle word langs mekaar geplaas om vergelyking te vergemaklik.

  • Linksgrafiek gebruik Cartesiese koördinaatruimte
  • Regte grafiek gebruik Flash koördinaat spasie
Graphing onto Cartesian and Flash coordinate spaces.

Die voor die hand liggende verskil is die omgekeerde y-as op die Flash-koördinaatruimte. Hulle lyk eenvoudig algeheel, reg? Oke, nou is ons gereed om te plot op Flash koördinaat spasie.


Stap 3: Kwadratiese koëffisiënte

Om kwadratiese kurwes op die regte plek te plaas, moet ons hul ooreenstemmende vergelykings verstaan. Die getekende kurwe is regtig afhanklik van die vergelyking se koëffisiënte (vir die kwadratiese geval, dit is A, B en C).

Ek het 'n Flash-aanbieding hieronder ingesluit, sodat jy hierdie koëffisiënte maklik kan aanpas en onmiddellike terugvoer kry.

Om die effekte van individuele koëffisiënte op die algehele kurwe te bestudeer, stel ek voor dat u die onderstaande stappe uitvoer om met die Flash-aanbieding hierbo te eksperimenteer.

  1. Terwyl A en B tot 0 gestel word, pas die waarde van C aan beide positiewe en negatiewe waardes. Jy sal die lyn se hoogteverandering sien.
  2. Verander nou die waarde van B tussen positiewe en negatiewe waardes. Let op wat gebeur met gradiënt van lyn.
  3. Verander nou die waarde van A tussen positiewe en negatiewe waardes, en vergelyk die resultate.
  4. Verander dan B tussen positief en negatief weer. Let op dat die kromme altyd deur die oorsprong sny.
  5. Laastens tweak C. Let op die hele kromme skof langs die y-as.

Nog 'n interessante waarneming is dat die botsingspunt (dws die draaipunt) in die tweede en derde stappe van bogenoemde op dieselfde punt op die y-as bly.


Stap 4: Alternatiewe Vergelyking Een

Jy sien gou dat die posisionering van 'n kromme moeilik is. Die vergelyking wat gebruik word, is onprakties as ons die koördinate van die laagste punt op 'n kromme wil bepaal.

Oplossing? Ons sal die vergelyking herskryf in 'n verlangde vorm. Kyk na die volgende vergelyking:

\ [f (x) = P (x + Q) ^ 2 + R \]

Dit is nog steeds 'n kwadratiese vergelyking, maar dit is 'n ander vorm. Nou kan ons maklik die minimum en maksimum punte op die kromme beheer. In die vorige Flash-aanbieding, klik op die knoppie "Aanwysing 1" regs bo en speel met die nuwe waardes.

Hier is 'n kort verduideliking van die koëffisiente se rolle:

koëffisiënt Rol
P Beheer die kromme se steilheid.
Q Beheer verplasing van die draaipunt se draaipunt langs x-as.
R Beheer verplasing van die draaipunt se draaipunt langs y-as.

Nietemin is dit steeds 'n moeilike taak om die kromme te laat slaag deur 'n gegewe stel punte. Ons moet op papier akkuraat vooraf bereken voordat u dit omskryf om te kodeer.

Gelukkig is daar 'n beter oplossing. Maar voordat ons deur dit gaan, kom ons kyk na die implementering van ActionScript vanaf nou.


Stap 5: Implementering van ActionScript

Hier is die vergelykings geskryf as ActionScript funksies (kyk Graphing.as in die bron aflaai).

En hier is 'n implementering van die tekening metode met behulp van Graphics.drawPath (). Net 'n nota wat alle krommes in hierdie artikel is, word op soortgelyke wyse geteken.

Eerstens die veranderlikes ...

Nou is die y-posisies, bereken op grond van die x-posisies en die gegewe koëffisiënte.

(Verward oor die >> operateur? Kyk na hierdie handleiding.)


Stap 6: Alternatiewe Vergelyking Twee

Gestel ons kry drie punte wat die kwadratiese kromme moet deursteek; hoe vorm ons die ooreenstemmende vergelyking? Meer spesifiek, hoe kan ons die koëffisiëntwaardes van die vergelyking bepaal? Lineêre algebra kom tot die redding. Kom ons analiseer hierdie probleem.

Ons weet dat kwadratiese vergelykings altyd vorm soos geskryf in eq. 1 in stap 1.

\ [f (x) = Aks ^ 2 + Bx + C \ ... (eq \ 1) \]

Aangesien al drie gegewe koördinate op dieselfde kurwe lê, moet hulle elkeen van hierdie vergelyking bevredig, met dieselfde koëffisiënte as die vergelyking van die kromme waarvoor ons soek. Kom ons skryf dit in vergelykingvorm neer.

Gegee drie koördinate:

  • \ (S \ \ left (S_x, \ S_y \ right) \)
  • \ (T \ \ left (T_x, \ T_y \ right) \)
  • \ (U \ \ left (U_x, \ U_y \ right) \)

Vervang hierdie waardes in (eq 1). Let daarop dat A, B, C op die oomblik onbekende is.

\ [f (x) = Aks ^ 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 \ regs) + C \ \)
  • \ (U_y = A \ links (U_x \ regs) ^ 2 + B \ links (U_x \ regs) + C \ \)

Herskryf nou in matriksvorm. Let daarop dat A, B, C die onbekende is waarvoor ons oplos.

[Latex]
\ 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} \\
[/ Latex]

[Latex]
\ 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} \\
[/ Latex]
[Latex]
\ 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}
= I
\ begin {bmatrix} A \\ B \\ C \ end {bmatrix}
\\
K^{-1}J = L
[/latex]

Natuurlik kan ons gelyktydige vergelykings gebruik, maar ek verkies om matrikse te gebruik omdat dit eenvoudiger is. (Redakteur se nota: solank jy matrikse verstaan, is dit!)

Ons kry die inverse van K en vermenigvuldig met die J-matriks om L. te kry. Nadat ons suksesvol vir A, B, C opgelos het, sal ons net in die kwadratiese vergelyking vervang. Dus, ons sal 'n kwadratiese kromme hê wat deur al drie punte gaan.


Stap 7: Koraal invoer

Soos in die vorige stap genoem, moet ons 'n 3x3 matriks inversie en vermenigvuldiging uitvoer. ActionScript se flash.geom.matrix klas sal nie hierin kan help nie. Natuurlik, ons het 'n keuse om flash.geom.Matrix3D, klas te gebruik, maar ek verkies die Coral-biblioteek omdat ek in hierdie aangepaste klasse kan ingaan en ondersoek wat onder die kap gebeur. Ek vind dit persoonlik baie nuttig wanneer u twyfel oor die korrekte gebruik van opdragte selfs nadat u die API dokumentasie gelees het.

So laai en plaas die ongekapte koraal lêers in jou projek bron gids.

Download Coral
Coral integrated with source folder

Stap 8: Implementering van ActionScript

Hier is 'n voorbeeld van die uitslag. Probeer om die rooi kolletjies te herposisioneer en sien die kwadratiese kromme wat weer getrek word om deur al drie punte te kruis.


Stap 9: Implementering verduidelik

U kan die volledige skrif in Draw_curve.as vind. Die volgende ActionScript is net om muiskontroles op die klein kolletjies in te skakel.

Die kern lê in die herroepfunksie. Ek het die matriksbedrywighede en die kwadratiese funksie vir die herwinproses uitgelig.

U kan dus sien dat die matriks K geïnitialiseer en omgekeerd is voordat dit op matriks J gevoeg is.

Die append () funksie vermenigvuldig die huidige matriks, J, met die invoermatriks, K, geplaas na links. Nog 'n noemenswaardige detail is dat ons nie al die rye en kolomme in K- en J-matrikse gebruik nie. Aangesien matrix inversie egter slegs met 'n vierkantige matriks kan gebeur, moet ons die 4de, 4de kolomelement van K met 1 invul. (Dit hoef nie vir J te word nie, want ons het nie sy inversie nodig nie. ) So, jy kan sien al die ander elemente is 0 behalwe vir die eerste kolom.


Stap 10: Grafiese Kubieke Kurwe

Dus dit is alles vir die teken van kwadratiese krommes. Kom ons beweeg na kubieke kurwes.

Weereens, ons sal 'n bietjie hersiening hê om hierdie kurwes te grafiseer. Kyk na die volgende prentjie:

Cubic graphed on Cartesian and Flash coordinate space.

Wanneer u hierdie kromme vergelyk met dié van kwadratiese, sal u sien dat dit steiler is en dat 'n gedeelte van die kromme onder die x-as is. Een helfte word vertikaal weerspieël, in vergelyking met 'n kwadratiese.


Stap 11: Kubiese koëffisiënte

Ek het die volgende Flash-aanbieding ingesluit om jou te laat eksperimenteer met die koëffisiënte van 'n kubieke vergelyking. Probeer die waarde van A van positief tot negatief te pas en die verskil in die getoonde kromme waar te neem.


Stap 12: Implementering van ActionScript

Hier is die belangrike gedeelte van die implementering van die bostaande grafiek:

Weereens, dit is moeilik om die kubieke kromme te posisioneer volgens 'n stel punte wat dit deursteek. Weereens verwys ons na lineêre algebra vir 'n alternatief.


Stap 13: Alternatiewe Metode

Ons weet uit Stap 6 dat die koëffisiënte van 'n kwadratiese vergelyking bereken kan word op grond van drie gegewe punte, en die kromme wat daaruit getrek word, sal deur die punte kruis. 'N Soortgelyke benadering kan met enige vier gegewe punte uitgevoer word om 'n kubieke vergelyking te verkry:

  • \(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)\)

Vervang hierdie koördinate in (eq 2). Let daarop dat A, B, C, D onbekende is.

\[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\)

Maar nou gaan ons 'n 4x4-matriks in plaas van 3x3-matriks hanteer:

\(
\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
\)

Nou sal ons alle elemente in die 4x4-matriks vir Q en die hele eerste kolom vir P. gebruik. Dan word Q omgekeerd en toegepas op P.


Stap 14: Implementering van ActionScript

Weereens, ons stel die muiskontroles op om die punte te laat sleep. Wanneer enige van die punte gesleep word, gebeur herberekening en herhaling van die kromme voortdurend.

herlewing is die belangrike funksie waar alles gebeur het.

Laastens, kom ons kyk na die produk. Klik en beweeg die rooi kolletjies om te sien dat die kubieke kurwe getrek is om deur al die punte te beweeg.


Stap 15: Polinoom van Hoër Graad

Ons het net deur middel van tekenpolinoom van graad 2 en 3 (kwadratiese en kubieke) gegaan. Uit ons ervaring kan ons voorspel dat berekening vir polinoom van graad 4 (kwinties) vyf punte benodig, wat 5x5 matriks benodig, ensovoorts vir polinoom van selfs hoër grade.

Ongelukkig kan Coral en flash.geom.Matrix3D slegs 4x4 matrikse toelaat, dus jy sal jou eie klas skryf as die behoefte wel kom. Dit word selde in speletjies vereis.


Stap 16: Verdeling van Streke

Kom ons probeer ons kennis toepas om streke op ons stadium te verdeel. Dit verg 'n mate van hersiening van vergelyking ongelykhede. Kyk na die prent hieronder.

Division of regions

Hierdie prent hierbo toon 'n kromme wat die streke verdeel in twee:

  • Blou streek bo, waar vir elke punt y groter is as die vergelyking van die kromme.
  • Rooi streek onder, waar vir elke punt y minder is as die vergelyking van die kromme.

Dit is nie moeilik om hierdie konsep te begryp nie. Trouens, jy het dit alreeds in Stap 11 geëksperimenteer, soos jy die koëffisiënte van die kubieke formule aangepas het. Stel jou voor, in die koördinaatstelsel, dat daar 'n oneindige aantal krommes is, almal gedifferensieer deur net 'n effense verandering in D:

Infinite curves drawn on graph

Stap 17: Implementering van ActionScript

So hier is die steekproef van uitset vir kwadratiese kromme. Jy kan probeer om die rooi stip rond te beweeg en die streke te sien kleur.

Hier is die belangrike ActionScript-fragment. Kyk na die volledige script in Region_Curve.as

Hier is die steekproef met betrekking tot die kubieke kurwe.

En die implementering wat daarmee gepaard gaan. Weereens, volledige skrif is in Region_Curve2.as


Stap 18: Variasies

Hoe gaan dit met 'n paar tweaks om die kleur oor verskillende krommes te verander? Weereens, klik met die muis op die rooi kolletjies en sien die gradient veranderinge oor die skerm.


Stap 19: Implementering van ActionScript

Hier is die belangrike ActionScript-fragment wat uit Region_Curve3.as verkry word. In die eerste plek wil ons die maksimum en minimum offset van die oorspronklike kromme vind.

Sodra dit klaar is, sal ons dit toepas om die individuele kolle te kleur.


Afsluiting

So dat alles vir die tekening van krommes. Volgende op, vind wortels van 'n kwadratiese en kubieke kurwe. Dankie vir die lees. Moenie deel as jy 'n paar werklike toepassings sien wat van hierdie handleiding gebruik maak nie.

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.