Share
We zien lijnen die in veel van de scenario's worden gebruikt. Curven worden ook gebruikt, hoewel misschien niet zo vaak - maar dat ondermijnt hun belang niet! In deze tutorial zullen we bochten, in het bijzonder de kwadratische en kubieke curve, nader bekijken, samen met enkele van hun veelgebruikte wiskundige kenmerken.
Laten we eens kijken naar het uiteindelijke resultaat waar we naartoe zullen werken. Versleep de rode stippen en zie de verlopen in positie veranderen.
En hier is nog een demo, met kubieke curven, zonder de verlopen:
Kwadratisch en kubisch zullen in elk van deze secties voorkomen. Laten we dus eerst kijken naar de vergelijking van curves. Deze vergelijkingen zijn geschreven in polynomiale vorm, beginnend met de term van hoogste graad. De eerste is een kwadratische vergelijking (hoogste graad is 2); de tweede is kubieke vergelijking (hoogste graad is 3).
\ [f (x) = Ax ^ 2 + Bx + C \ ... (eq \ 1) \]
\ [g (x) = Ax ^ 3 + Bx ^ 2 + Cx + D \ ... (eq \ 2) \]
Merk op dat A, B, C en D echte cijfers zijn. Laten we het nu proberen te visualiseren, nu we ermee vertrouwd zijn. Grafische curves zullen onze volgende poging zijn.
Laten we eerst een kwadratische curve tekenen. Ik weet zeker dat alle lezers quadratische curve in de wiskundelessen op de middelbare school hebben getekend, maar om je geheugen op te frissen, presenteer ik onderstaande grafieken. Ze worden naast elkaar geplaatst om vergelijking te vergemakkelijken.
Het voor de hand liggende verschil is de geïnverteerde y-as op de Flash-coördinaatruimte. Ze zien er over het algemeen eenvoudig uit, toch? Oké, nu zijn we klaar om te plotten op Flash-coördinaatruimte.
Om kwadratische curven op de juiste plaats te positioneren, moeten we de bijbehorende vergelijkingen begrijpen. De getrokken curve is echt afhankelijk van de coëfficiënten van de vergelijking (in het geval van kwadratisch, die zijn A, B en C).
Ik heb hieronder een Flash-presentatie opgenomen, zodat u deze coëfficiënten gemakkelijk kunt aanpassen en direct feedback kunt krijgen.
Om de effecten van individuele coëfficiënten op de algehele curve te bestuderen, raad ik aan de onderstaande stappen te volgen om te experimenteren met de bovenstaande Flash-presentatie.
Een andere interessante waarneming is dat gedurende de tweede en derde stappen van het bovenstaande het punt van verbuiging (dat wil zeggen het keerpunt) op hetzelfde punt op de y-as blijft.
Je ziet snel dat het plaatsen van een curve enigszins moeilijk is. De gebruikte vergelijking is onpraktisch als we bijvoorbeeld de coördinaten van het laagste punt op een curve willen bepalen.
Oplossing? We zullen de vergelijking in een gewenste vorm herschrijven. Bekijk de volgende vergelijking:
\ [f (x) = P (x + Q) ^ 2 + R \]
Het is nog steeds een kwadratische vergelijking, maar het heeft een andere vorm aangenomen. Nu kunnen we eenvoudig de minimale en maximale punten op de curve regelen. In de vorige Flash-presentatie klik je rechtsboven op knop "Benadering 1" en speel je met de nieuwe waarden.
Hier is een korte uitleg van de rollen van de coëfficiënten:
| Coëfficiënt | Rol |
| P | Beheers de steilheid van de curve. |
| Q | Controleverplaatsing van het draaipunt van de curve langs de x-as. |
| R | Controleverplaatsing van het draaipunt van de curve langs de y-as. |
Desalniettemin is het nog steeds een moeilijke taak om de curve een bepaald aantal punten te laten passeren. We zouden rigoureus vooraf moeten rekenen op papier voordat we het naar de code vertalen.
Gelukkig is er een betere oplossing. Maar laten we, voordat we er doorheen gaan, eens kijken naar de ActionScript-implementatie.
Hier zijn de vergelijkingen geschreven als ActionScript-functies (vink aan Graphing.as in de brondownload).
persoonlijke functie quadratic1 (x: getal, A: nummer, B: nummer, C: nummer): nummer // y = A (x ^ 2) + B (x) + C retour A * x * x + B * x + C persoonlijke functie kwadratisch2 (x: getal, p: nummer, Q: nummer, R: nummer): nummer // y = P * (x + Q) ^ 2 + R retour P * (x + Q) * ( x + Q) + R
En hier is een implementatie van de tekenmethode met Graphics.drawPath (). Gewoon een opmerking dat alle rondingen in dit artikel op dezelfde manier zijn getekend.
Eerst de variabelen ...
private var points: Vector.= nieuwe Vector. ; private var drawCommand: Vector. = nieuwe Vector. ;
Nu de y-posities, berekend op basis van de x-posities en de gegeven coëfficiënten.
private functie opnieuw tekenen (A: Number, B: Number, C: Number): void for (var i: int = 0; i < 400; i++) var x:Number = i - 200; points[i * 2] = x * 10 + stage.stageWidth >> 1; if (isApproach1) punten [i * 2 + 1] = kwadratisch1 (x, A, B, C) + stage.stageHeight >> 1 else punten [i * 2 + 1] = kwadratisch2 (x, A, B , C) + stage.stageHeight >> 1 if (i == 0) drawCommand [i] = 1; else drawCommand [i] = 2; graphics.clear (); Graphics.lineStyle (1); graphics.drawPath (drawCommand, punten);
(Verward over de >> operator? Bekijk deze tutorial.)
Stel dat we drie punten krijgen die de kwadratische curve moet doorkruisen; hoe vormen we de overeenkomstige vergelijking? Meer specifiek, hoe kunnen we de coëfficiëntwaarden van de vergelijking bepalen? Lineaire algebra komt te hulp. Laten we dit probleem analyseren.
We weten dat kwadratische vergelijkingen altijd de vorm aannemen zoals beschreven in eq. 1 in stap 1.
\ [f (x) = Ax ^ 2 + Bx + C \ ... (eq \ 1) \]
Omdat alle drie gegeven coördinaten op dezelfde curve liggen, moeten ze allemaal voldoen aan deze vergelijking, met dezelfde coëfficiënten als de vergelijking van de curve die we zoeken. Laten we dit opschrijven in vergelijkingsformulier.
Gegeven drie coodinates:
Vervang deze waarden in (eq 1). Merk op dat A, B en C op dit moment onbekenden zijn.
\ [f (x) = Ax ^ 2 + Bx + C \ ... (eq \ 1) \]
Nu herschrijven in matrixvorm. Houd er rekening mee dat A, B, C de onbekenden zijn die we oplossen.
[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
= Ik
\ begin bmatrix A \\ B \\ C \ end bmatrix
\\
K ^ - 1 J = L
[/latex]
Natuurlijk kunnen we simultaan vergelijkingen gebruiken, maar ik gebruik liever matrices omdat het eenvoudiger is. (Noot van de redactie: zolang je matrices begrijpt, is dat zo!)
We krijgen de inverse van K en vermenigvuldigen zich met de J-matrix om L. te krijgen. Nadat we met succes hebben opgelost voor A, B, C, zullen we gewoon in de kwadratische vergelijking worden vervangen. We hebben dus een kwadratische curve die alle drie de punten passeert.
Zoals vermeld in de vorige stap, moeten we een 3x3 matrixinversie en -vermeerdering uitvoeren. ActionScript's flash.geom.Matrix klas zal hierin niet kunnen helpen. Natuurlijk hebben we een keuze om te gebruiken flash.geom.Matrix3D, klas, maar ik geef de voorkeur aan de Coral-bibliotheek omdat ik in deze aangepaste klassen kan wennen en onderzoeken wat er onder de motorkap gebeurt. Persoonlijk vind ik dit zeer nuttig wanneer ik twijfel over het juiste gebruik van de commando's, zelfs na het lezen van de API-documentatie.
Dus download en plaats de uitgepakte Coral-bestanden in de map van uw projectbron.
Hier is een voorbeeld van het resultaat. Probeer de rode stippen te verplaatsen en zie de kwadratische curve opnieuw getekend om door alle drie de punten te kruisen.
Je kunt het volledige script vinden in Draw_curve.as. Het volgende ActionScript is alleen om muisbesturingselementen op de kleine puntjes in te schakelen.
openbare functie Draw_Curve () // besturingselementen instellen c1 = nieuwe cirkel (0xFF0000); addChild (c1); c1.x = stage.stageWidth * 0.2; c1.y = stage.stageHeight >> 1; c2 = nieuwe cirkel (0xFF0000); addChild (c2); c2.x = stage.stageWidth * 0.5; c2.y = stage.stageHeight >> 1; c3 = nieuwe cirkel (0xFF0000); addChild (c3); c3.x = stage.stageWidth * 0.8; c3.y = stage.stageHeight >> 1; c1.addEventListener (MouseEvent.MOUSE_DOWN, verplaatsen); c1.addEventListener (MouseEvent.MOUSE_UP, verplaatsen); c2.addEventListener (MouseEvent.MOUSE_DOWN, verplaatsen); c2.addEventListener (MouseEvent.MOUSE_UP, verplaatsen); c3.addEventListener (MouseEvent.MOUSE_DOWN, verplaatsen); c3.addEventListener (MouseEvent.MOUSE_UP, verplaatsen); redraw () persoonlijke functie verplaatsen (e: MouseEvent): void if (e.type == "mouseDown") e.target.startDrag () e.target.addEventListener (MouseEvent.MOUSE_MOVE, update); else if (e.type == "mouseUp") e.target.stopDrag (); e.target.removeEventListener (MouseEvent.MOUSE_MOVE, update); persoonlijke functie-update (e: MouseEvent): void redraw ();
De kern ligt in de terugtrekken functie. Ik heb de matrixbewerkingen en de kwadratische functie voor het opnieuw tekenen gemarkeerd.
persoonlijke functie redraw (): void K = nieuwe Matrix3d (c1.x * c1.x, c1.x, 1, 0, c2.x * c2.x, c2.x, 1, 0, c3.x * c3 .x, c3.x, 1, 0, 0, 0, 0, 1); K.invert () L = nieuwe Matrix3d (c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, 0, 0, 0, 0); L.append (K); graphics.clear (); var points: Vector.= nieuwe Vector. ; var cmd: Vector. = nieuwe Vector. ; for (var i: int = 0; i < 200; i++) //current x var x:Number = i * 2; //f(x) = A (x^2) + B (x) + C var y:Number = L.n11* x* x + L.n21 * x + L.n31 ; points.push(x, y); if (i == 0) cmd.push(1); else cmd.push(2); graphics.lineStyle(1); graphics.drawPath(cmd, points);
U kunt dus zien dat de matrix K werd geïnitialiseerd en omgekeerd voordat deze werd toegevoegd aan matrix J.
De toevoegen () functie vermenigvuldigt de huidige matrix, J, met de invoermatrix K links geplaatst. Een ander opmerkelijk detail is dat we niet alle rijen en kolommen in K- en J-matrices gebruiken. Aangezien matrixinversie echter alleen kan plaatsvinden met een vierkante matrix, moeten we het 4e rij, 4e kolomelement van K invullen met 1. (Het is niet nodig om dit voor J te doen, omdat we de inversie niet in onze berekening nodig hebben. ) U ziet dus dat alle andere elementen 0 zijn, behalve de eerste kolom.
Dat is alles voor het tekenen van kwadratische curven. Laten we verder gaan met kubieke rondingen.
Nogmaals, we hebben een kleine herziening van het tekenen van deze curven. Bekijk de volgende afbeelding:
Wanneer u deze curve vergelijkt met die van kwadratisch, zult u merken dat deze steiler is en dat een deel van de curve zich onder de x-as bevindt. De ene helft is verticaal gespiegeld, in vergelijking met een kwadratische.
Ik heb de volgende Flash-presentatie toegevoegd om u te laten experimenteren met de coëfficiënten van een kubieke vergelijking. Probeer de waarde van A van positief naar negatief te wijzigen en observeer het verschil in de geproduceerde curve.
Dit is het belangrijkste deel van de implementatie van de grafieken hierboven:
persoonlijke functie opnieuw tekenen (A: Getal, B: Getal, C: Getal, D: Getal): void for (var i: int = 0; i < 400; i++) var x:Number = i - 200; points[i * 2] = x * 10 + stage.stageWidth >> 1; punten [i * 2 + 1] = cubic1 (x, A, B, C, D) + stage.stageHeight >> 1 if (i == 0) drawCommand [i] = 1; else drawCommand [i] = 2; graphics.clear (); Graphics.lineStyle (1); graphics.drawPath (drawCommand, punten); private functie cubic1 (x: Number, A: Number, B: Number, C: Number, D: Number): Number // y = A (x ^ 3) + B (x ^ 2) + C (x) + D retour A * x * x * x + B * x * x + C * x + D
Nogmaals, het is moeilijk om de kubieke curve te positioneren op basis van een aantal punten die hij kruist. Nogmaals, we verwijzen naar lineaire algebra voor een alternatief.
We weten uit stap 6 dat de coëfficiënten van een kwadratische vergelijking berekend kunnen worden op basis van drie gegeven punten, en de daaruit getrokken curve zal door die punten lopen. Een vergelijkbare aanpak kan met elke worden uitgevoerd vier gegeven punten om een kubieke vergelijking te verkrijgen:
Vervang deze coördinaten in (eq 2). Merk op dat A, B, C, D onbekenden zijn.
\ [g (x) = Ax ^ 3 + Bx ^ 2 + Cx + D \ ... (eq \ 2) \]
Maar nu behandelen we een 4x4-matrix in plaats van een matrix van 3x3:
\ (
\ 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
\)
Nu zullen we alle elementen in de 4x4 matrix gebruiken voor Q en de hele eerste kolom voor P. Dan wordt Q omgekeerd en toegepast op P.
Nogmaals, we hebben de muisknoppen ingesteld om het slepen van die punten mogelijk te maken. Wanneer een van die punten wordt gesleept, vindt herberekening en hertekening van de curve voortdurend plaats.
publieke functie Draw_Curve2 () // besturingselementen instellen c1 = nieuwe cirkel (0xFF0000); addChild (c1); c1.x = stage.stageWidth * 0.2; c1.y = stage.stageHeight >> 1; c2 = nieuwe cirkel (0xFF0000); addChild (c2); c2.x = stage.stageWidth * 0.4; c2.y = stage.stageHeight >> 1; c3 = nieuwe cirkel (0xFF0000); addChild (c3); c3.x = stage.stageWidth * 0.6; c3.y = stage.stageHeight >> 1; c4 = nieuwe cirkel (0xFF0000); addChild (c4); c4.x = stage.stageWidth * 0.8; c4.y = stage.stageHeight >> 1; c1.addEventListener (MouseEvent.MOUSE_DOWN, verplaatsen); c1.addEventListener (MouseEvent.MOUSE_UP, verplaatsen); c2.addEventListener (MouseEvent.MOUSE_DOWN, verplaatsen); c2.addEventListener (MouseEvent.MOUSE_UP, verplaatsen); c3.addEventListener (MouseEvent.MOUSE_DOWN, verplaatsen); c3.addEventListener (MouseEvent.MOUSE_UP, verplaatsen); c4.addEventListener (MouseEvent.MOUSE_DOWN, verplaatsen); c4.addEventListener (MouseEvent.MOUSE_UP, verplaatsen); terugtrekken(); verplaatsing van privéfunctie (e: MouseEvent): void if (e.type == "mouseDown") e.target.startDrag () e.target.addEventListener (MouseEvent.MOUSE_MOVE, update); else if (e.type == "mouseUp") e.target.stopDrag (); e.target.removeEventListener (MouseEvent.MOUSE_MOVE, update); persoonlijke functie-update (e: MouseEvent): void redraw ();
terugtrekken is de cruciale functie waar alles is gebeurd.
persoonlijke functie redraw (): void var left: Matrix3d = new Matrix3d (c1.x * c1.x * c1.x, c1.x * c1.x, c1.x, 1, c2.x * c2.x * c2.x, c2.x * c2.x, c2.x, 1, c3.x * c3.x * c3.x, c3.x * c3.x, c3.x, 1, c4.x * c4. x * c4.x, c4.x * c4.x, c4.x, 1); left.invert () var right: Matrix3d = new Matrix3d (c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, c4.y, 0, 0 , 0); right.append (links); // f (x) = A (x ^ 3) + B (x ^ 2) + C (x) + D graphics.clear (); var points: Vector.= nieuwe Vector. ; var cmd: Vector. = nieuwe Vector. ; for (var i: int = 0; i < 200; i++) var x:Number = i * 2; var y:Number = right.n11 * x * x * x+ right.n21 * x * x+ right.n31 * x + right.n41; points.push(x, y); if (i == 0) cmd.push(1); else cmd.push(2); graphics.lineStyle(1); graphics.drawPath(cmd, points);
Laten we tot slot eens kijken naar het product. Klik en verplaats de rode stippen om de getrokken kubieke curve te zien om door al die punten te gaan.
We zijn net gegaan met het tekenen van polynomen van graad 2 en 3 (kwadratisch en kubisch). Uit onze ervaring kunnen we voorspellen dat de berekening voor polynoom van graad 4 (quintic) vijf punten vereist, wat 5x5 matrix vereist, enzovoort voor polynomen van zelfs hogere graden.
helaas, Koraal en flash.geom.Matrix3D laat alleen 4x4-matrices toe, dus je zult je eigen klasse schrijven als de behoefte komt. Het is echter zelden vereist in games.
Laten we proberen onze kennis toe te passen om regio's op onze scène te verdelen. Dit vereist enige herziening van de ongelijkheden in vergelijkingen. Bekijk de afbeelding hieronder.
Deze afbeelding hierboven toont een curve die de regio's in twee deelt:
Het is niet moeilijk om dit concept te vatten. In feite heb je hier al in stap 11 aan geëxperimenteerd terwijl je de coëfficiënten van de kubieke formule aanpaste. Stel je voor, in het coördinatensysteem, dat er een oneindig aantal curven is, allemaal gedifferentieerd door slechts een kleine verandering in D:
Dit is dus het voorbeeld van de uitvoer voor de kwadratische curve. U kunt proberen de rode stip rond te verplaatsen en de gekleurde gebieden te zien.
Dit is het belangrijke ActionScript-fragment. Bekijk het volledige script in Region_Curve.as
private functie redraw (): void var left: Matrix3d = new Matrix3d (c1.x * c1.x, c1.x, 1, 0, c2.x * c2.x, c2.x, 1, 0, c3. x * c3.x, c3.x, 1, 0, 0, 0, 0, 1); left.invert () var right: Matrix3d = new Matrix3d (c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, 0, 0, 0, 0 ); right.append (links); // D = A (x ^ 2) + B (x) + C voor elk (var-item: Cirkel op achtergrond) var D: Number = right.n11 * item.x * item.x + right.n21 * item .x + right.n31; //trace(background[i].y); if (item.y> D) item.color = 0; else item.color = 0xAAAAAA;
Dit is het voorbeeld met betrekking tot de kubieke curve.
En de implementatie die daarbij hoort. Nogmaals, het volledige script is binnen Region_Curve2.as
// D = A + B (x) + C (x ^ 2) voor elk (var-item: Cirkel op achtergrond) var D: Number = right.n11 * item.x * item.x * item.x; + right.n21 * item.x * item.x + right.n31 * item.x + right.n41 //trace(background[i].y); if (item.y> D) item.color = 0; else item.color = 0xAAAAAA;
Hoe zit het met enkele tweaks om de kleur in verschillende curven te veranderen? Klik nogmaals met de muis op de rode stippen en zie het verloop over het scherm veranderen.
Hier is het belangrijke ActionScript-fragment geëxtraheerd uit Region_Curve3.as. Allereerst willen we weten wat de maximale en minimale offset is ten opzichte van de oorspronkelijke curve.
var max: Number = 0; var min: Number = 0; var Ds: Vector.= nieuwe Vector. ; // D = A (x ^ 2) + B (x) + C voor elk (var-item: Cirkel op achtergrond) var D: Number = right.n11 * item.x * item.x + right.n21 * item .x + right.n31; var offset: Number = item.y - D; Ds.push (offset); if (item.y> D && offset> max) max = offset; anders als (item.y < D && offset < min) min = offset;
Als dit eenmaal is gebeurd, passen we het toe op de afzonderlijke punten.
// kleurvariaties op basis van de offset-var kleur: Number for (var i: int = 0; i < background.length; i++) if (Ds[i] > 0) color = Ds [i] / max * 255 // kleur berekenen naar slot op achtergrond [i] .color = kleur<<16 | color<<8 | color; //define a grayscale else if (Ds[i] < 0) color = Ds[i] / min * 255; background[i].color = color<<16; //define a gradient of red
Dus dat allemaal voor het tekenen van bochten. Vervolgens zoeken naar wortels van een kwadratische en kubieke kromme. Bedankt voor het lezen. Deel het als u real-time toepassingen ziet die gebruikmaken van deze zelfstudie.
Accentsconagua