, matematik og actionscript af kurver: tegning kvadratiske og tyndkødet kurver,,,,, andel,,,,,,,, 7,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie, ringede du? forståelse affine forandringer med matrix mathematicsthe matematik og actionscript af kurver: rødder, vi ser linjer, der anvendes i masser af scenarier.kurver anvendes også, selv om de måske ikke så ofte - men det betyder ikke, at underminere deres betydning.i denne forelæsning, vi skal se nærmere på kurver, især de kvadratiske og. kurve, sammen med nogle af de anvendte matematiske egenskaber.,,,, endelige resultat forpremiere, lad os tage et kig på det endelige resultat, vi arbejder hen imod.trækker de røde prikker og se gradienter ændrede holdning, og her er en demo, ved hjælp af kubikmeter kurver, uden stigninger:,, trin 1: kurver, kvadratiske og tyndkødet vil blive præsenteret i hvert af disse afsnit.så lad os først se på ligningen i kurver.disse ligninger er skrevet i pyrograf form, begyndende med udtrykket i højeste grad.den første er en andengradsligning (højeste grad 2); den anden er en ligning (højeste grad 3)., \\ f (x) = ax (2 +) + c).(ef) (1)]. [g (x) = ax (3 +) (2 +) + d).(ef) (2)], bemærker, at a, b, c og d er reelle tal.nu, hvor vi er aquainted med det, lad os prøve at forestille sig det.grafering kurver vil være vores næste forsøg.,, trin 2: grafering kurver, lad os først figur en kvadratisk kurve.jeg er sikker på at alle læsere har graphed kvadratiske kurve i high school matematik, men blot for at genopfriske din hukommelse, jeg præsentere grafer nedenfor.de er placeret side ved side for at lette sammenligning.,, venstre figur bruger kartesiansk koordinere rum, ikke figur bruger flash koordinere rum, den indlysende forskel er den inverterede x - akse på flash koordinere rum.de ser enkelt samlet, ikke?okay, nu er vi parate til at koordinere handlingen på - rummet.,, trin 3: kvadratiske koefficienter, position kvadratiske kurver på det rigtige sted, er vi nødt til at forstå deres tilsvarende formler.48 er afhængige af ligningen er koefficienter (i tilfælde af kvadratiske, det er a, b og c). jeg har medtaget et flash - præsentation under så du let kan ændre disse koefficienter og få umiddelbar feedback.,, til undersøgelse af virkningerne af forskellige koefficienter for den samlede kurve, foreslår jeg følgende nedenstående punkter at eksperimentere med flash præsentation ovenfor.,,, samtidig med at de a - og b - 0, justeres værdien af c - både positive og negative værdier.vil du se det er højden. nu vil værdien af b mellem positive og negative værdier.se, hvad der sker med gradient på linje, nu vil værdien af et mellem positive og negative værdier, og sammenligne resultaterne. så dukker b mellem positive og negative igen.se kurven er altid skære igennem den oprindelse. endelig vil observere hele kurven skift i c y - aksen,.,, en anden interessant bemærkning er, at i løbet af andet og tredje trin af ovenstående punkt tonefald (dvs. vendepunkt) forbliver i samme punkt på y - aksen.,, trin 4: alternative ligning, du hurtigt se, at hver en kurve, er lidt vanskelig.den ligning, der anvendes, er upraktisk, hvis vi ønsker at sige, find koordinaterne for det laveste punkt på en kurve, løsning?vi vil skrive den ligning, i ønskede form.se følgende ligning:, \\ f (x) = p (x + q) <2 + f)], er det stadig en andengradsligning, men det har taget en anden form.nu kan vi let kan kontrollere den minimale og maksimale punkter på kurven.i den foregående flash præsentation, klik på knappen "metode 1" i øverste højre og spiller med de nye værdier. her er der en kort beskrivelse af de koefficienter, der er "roller:,, koefficient, rolle, p kontrol kurven er stejlhed.d kontrol med flytning af kurve er vendepunkt med x - aksen.r kontrol forskydning af kurve er vendepunkt på y - aksen.ikke desto mindre er det stadig vanskeligt at lave kurve gennem bestemte punkter.vi må nøje på forhånd beregne på papiret at oversætte det til kode. heldigvis er der en bedre løsning.men før jeg går igennem det, lad os se på de actionscript gennemførelse af nu.,, løntrin 5: actionscript gennemførelse, her er den ligning skrevet, som actionscript funktioner (se, graphing.as i kilden download). privat funktion quadratic1 (x: nummer et: antal, b: antal, c - nummer): antal (//y = a (x) 2) + b (x) + c tilbage en * x * x + b * x + c} privat funktion quadratic2 (x: antal, p.: antal, q, r: antal): antal (//y = p * (x + q) <2 + r tilbage p * (x + q) * (x + 1 + r), og her er en gennemførelse af den tegning metode ved hjælp af grafik. drawpath(),.Just a note that all curves in this article are drawn in similar fashion.,First the variables..., private var points:Vector.<Number> = new Vector.<Number>; private\tvar drawCommand:Vector.<int> = new Vector.<int>;,Now the y-positions, calculated based on the x-positions and the given coefficients., private function redraw(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) { points[i * 2 + 1] = quadratic1(x, A, B, C) + stage.stageHeight >> 1 } else { points[i * 2 + 1] = quadratic2(x, A, B, C) + stage.stageHeight >> 1} hvis (i = = 0) drawcommand [i] = 1; andre drawcommand [i] = 2} grafik. clear() og grafik. linestyle (1); grafik. drawpath (drawcommand, point);} (forvirret over det, > > centralen?tag et kig på denne forelæsning.), trin 6: alternative ligning, hvis nu vi har tre punkter, som den kvadratiske kurve skal passere igennem, hvordan kan vi danne svarende ligning?mere specifikt, hvordan kan vi fastsætte koefficienten værdier af ligningen?lineær algebra kommer til undsætning.lad os analysere dette problem. vi ved, at andengradsiigninger altid tage form som skrevet i - ækvivalent 1 i trin 1., \\ f (x) = ax (2 +) + c).(ef) (1)], da alle tre koordinater, som ligger på samme kurve, skal de alle opfylder denne ligning, med de samme koefficienter som ligningen af kurven, som vi leder efter.lad os skrive det ned i ligning form. i tre coodinates:,, \\ (s). venstre (s_x, jeg s_y. - ret).). (t. ¶ tilbage (t_x, jeg t_y.) (1), (e)). venstre (u_x, jeg u_y.) \\), erstatte disse værdier i (ef) 1).bemærk, at a, b, c, er ukendte i øjeblikket., \\ f (x) = ax (2 +) + c).(ef) (1)],, \\ (s_y = a \\ venstre (s_x.) ^ 2 + b) venstre (s_x.) + c \\ \\). - (en) t_y = venstre (t_x.) ^ 2 + b) venstre (t_x.) + c. l) ". (u_y = a \\ venstre (u_x.) ^ 2 + b) venstre (u_x.) + c \\ \\), skrive i matrix form.Take note that A, B, C are the unknowns we are solving for.,[latex], \\begin{bmatrix}S_y \\\\T_y \\\\U_y\\end{bmatrix} =, \\begin{bmatrix}, \\left(S_x\ ight)^2 & \\left(S_x\ ight) & 1\\\\, \\left(T_x\ ight)^2 & \\left(T_x\ ight) & 1\\\\, \\left(U_x\ ight)^2 & \\left(U_x\ ight) & 1\\end{bmatrix}, \\begin{bmatrix}A \\\\B \\\\C\\end{bmatrix} \\\\, [/latex],[latex], \\begin{bmatrix}, \\left(S_x\ ight)^2 & \\left(S_x\ ight) & 1\\\\, \\left(T_x\ ight)^2 & \\left(T_x\ ight) & 1\\\\, \\left(U_x\ ight)^2 & \\left(U_x\ ight) & 1\\end{bmatrix}^{-1}, \\begin{bmatrix}S_y \\\\T_y \\\\U_y\\end{bmatrix} =, \\begin{bmatrix}, \\left(S_x\ ight)^2 & \\left(S_x\ ight) & 1\\\\, \\left(T_x\ ight)^2 & \\left(T_x\ ight) & 1\\\\, \\left(U_x\ ight)^2 & \\left(U_x\ ight) & 1\\end{bmatrix}^{-1}, \\begin{bmatrix}, \\left(S_x\ ight)^2 & \\left(S_x\ ight) & 1\\\\, \\left(T_x\ ight)^2 & \\left(T_x\ ight) & 1\\\\, \\left(U_x\ ight)^2 & \\left(U_x\ ight) & 1\\end{bmatrix}, \\begin{bmatrix}A \\\\B \\\\C\\end{bmatrix} \\\\, [/latex], [latex], \\begin{bmatrix}, \\left(S_x\ ight)^2 & \\left(S_x\ ight) & 1\\\\, \\left(T_x\ ight)^2 & \\left(T_x\ ight) & 1\\\\, \\left(U_x\ ight)^2 & \\left(U_x\ ight) & 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],Of course we can use simultaneous equations instead, but I prefer using matrices because it's simpler. (redaktionel note: så længe du forstår, matricer, dvs.!), får vi det modsatte af k og formere sig i j matrix for at få l. efter vi med succes har løst for a, b, c, vi vil bare erstatte i kvadratisk udregning.derfor skal vi have en kvadratisk kurve, der passerer gennem alle tre punkter.trin 7: import, koraller, som nævnt i det foregående trin, er vi nødt til at foretage en 3x3 matrix inversion og formering.actionscript er, flash.geom.matrix, klasse, vil ikke være i stand til at bidrage til dette.selvfølgelig har vi et valg at udnytte, flash. geom. matrix3d, klasse, men jeg foretrækker coral bibliotek, fordi jeg kan snage i disse skik klasser og undersøge, hvad der sker under hjelmen.jeg finder det meget nyttigt, når i tvivl om den korrekte anvendelse af kommandoer, selv efter at have læst api dokumentation. så downloade og de løsnes coral filer til dit projekt kilde mappe.,,, trin 8: actionscript gennemførelse. her er en prøve af resultatet.prøv at finde den røde prikker og se den kvadratiske kurve tegnes over på alle tre punkter.,, trin 9: gennemførelse har forklaret, kan du finde den fuldstændige manuskript, draw_curve. som. følgende actionscript er bare for at gøre det muligt for mus, kontrol med små prikker. offentlige funktion draw_curve() (//oprettelse af kontrol c1 cirkel (0xff0000); addchild (c1); c. x = stage.stagewidth * 0,2; c. y = stage.stageheight > > 1 c2 = ny cirkel (0xff0000); addchild (c2); c. x = stage.stagewidth * 0, 5; c2. y = stage.stageheight > og gt 1 c3 = ny cirkel (0xff0000); addchild (c3); c. x = stage.stagewidth * 0, 8; c3. y = stage.stageheight > > 1 c1. addeventlistener (mouseevent.mouse_down sted); c1.addeventlistener (mouseevent.mouse_up sted); c2. addeventlistener (mouseevent.mouse_down sted); c2. addeventlistener (mouseevent.mouse_up sted); c3. addeventlistener (mouseevent.mouse_down sted); c3. addeventlistener (mouseevent.mouse_up sted); redraw()} privat funktion flytte e: mouseevent): ugyldig (hvis (e.type = = "mousedown") (e.target. startdrag() e.target. addeventlistener (mouseevent.mouse_move, ajourføre)} andre, hvis (e.type = = "mouseup") (e.target. stopdrag(); e.target. removeeventlistener (mouseevent.mouse_move, ajourføre)}} privat funktion ajourføring (e: mouseevent): ugyldig (redraw();}, kerne ligger i, træk. funktion.I've highlighted the matrix operations and the quadratic function for the redraw process., private function redraw():void { K = new Matrix3d(\tc1.x * c1.x, \tc1.x, \t1, \t0, c2.x * c2.x, \tc2.x, \t1, \t0, c3.x * c3.x, \tc3.x, \t1, \t0, 0, 0,\t0, \t1); K.invert() L = new Matrix3d(\tc1.y, \t0, \t0, \t0, c2.y, \t0, \t0, \t0, c3.y, \t0, \t0, \t0, 0, \t0, \t0, \t0); L.append(K); graphics.clear(); var points:Vector.<Number> = new Vector.<Number>; var cmd:Vector.<int> = new Vector.<int>; for (var i:int = 0; i < 200; i++) { //nuværende x var - x: antal = jeg * 2; //f (x) = a (x) 2) + b (x) + c var y: antal = l.n11 * x * x + l.n21 * x + l.n31; nr. tryk (x, y); hvis (i = = 0) cmd. tryk (1); andre cmd. tryk (2)} grafik. linestyle (1); grafik. drawpath (cmd, point);}, så du kan se, at matrix k var indledes og omvendt, før skal vedlægges en matrice, j. de, append(), funktion forøger den nuværende matrix, j med input - matrix, k, bringes til venstre.en anden bemærkelsesværdig detalje er, at vi ikke anvender alle rækker og søjler i k og j matricer.men da matrix inversion kan kun ske med en kvadratisk matrix, vi er nødt til at udfylde den 4. række, fjerde kolonne element af k 1.der er ingen grund til at gøre det for j, fordi vi behøver ikke dens inversion i vores beregning). således kan man se alle de øvrige elementer er 0, bortset fra den første kolonne.,, trin 10: grafering. kurve, så det er alt for udarbejdelse af kvadratiske kurver.lad os gå videre til kubikmeter kurver. igen, skal vi have en lille revision til grafering af disse kurver.se følgende billede:,, når man sammenligner denne kurve med kvadratiske, vil de bemærke, at det er højere, og at en del af kurven, er lavere end den x - aksen.den ene halvdel afspejles vertikalt i forhold til en kvadratisk.,, trin 11: kubikmeter koefficienter, jeg har omfattet følgende flash præsentation for at lade dig eksperiment med koefficienter for en kubisk ligning.prøv at justere værdien af en fra positiv til negativ og iagttage forskellen i kurven, der produceres, trin 12: actionscript gennemførelse, her er den vigtigste del af gennemførelsen af grafering ovenfor:, privat funktion træk a: antal, b: antal, c: antal, d: ugyldig (nummer): for (var - jeg: int = 0. jeg < 400; jeg + +) (var - x: antal = - 200; nr. [2] = x * * 10 * + stage.stagewidth > > 1, punkt [jeg * 2 + 1] = cubic1 (x, a, b, c, d) + stage.stageheight > > 1, hvis (i = = 0) drawcommand [i] = 1; andre drawcommand [i] = 2} grafik. clear() og grafik. linestyle (1); grafik. drawpath (drawcommand, point);} privat funktion cubic1 (x nummer et: n:umber, b: antal, c: antal, d: antal): antal (//y = a (x) 3) + b (x) 2) + c (x) + d vende tilbage en * x * x * x + b * x * x + c * x + d}, igen. det er svært at holdning. kurve i henhold til en række punkter, der passerer igennem.endnu en gang, vi henviser til lineær algebra en alternativ.,, trin 13: alternative metode, vi kender fra trin 6, at de koefficienter, af en andengradsligning kan beregnes på grundlag af tre givne punkter og kurve trukket fra det passere gennem disse punkter.en lignende fremgangsmåde kan foretages med alle fire, på grund af punkter for at opnå en kubisk ligning:,, \\ (s). venstre (s_x, jeg s_y. - ret).). (t. ¶ tilbage (t_x, jeg t_y.) (1), (e)). u_x, venstre (det u_y.) (1), \\ v.. venstre (v_x, jeg v_y ¶ lige)), erstatte disse koordinater i (ef) 2).bemærk, at a, b, c, d er ubekendte., \\ [g (x) = ax (3 +) (2 +) + d).(eq\\ 2)\\], ,\\(S_y = A\\left(S_x\ ight)^3 + B\\left(S_x\ ight)^2 + C\\left(S_x\ ight) + D\\),\\(T_y = A\\left(T_x\ ight)^3 + B\\left(T_x\ ight)^2 + C\\left(T_x\ ight) + D\\),\\(U_y = A\\left(U_x\ ight)^3 + B\\left(U_x\ ight)^2 + C\\left(U_x\ ight) + D\\),\\(V_y = A\\left(V_x\ ight)^3 + B\\left(V_x\ ight)^2 + C\\left(V_x\ ight) + D\\), ,But now we'll deal with a 4x4 matrix instead of 3x3 matrix:,\\(, \\begin{bmatrix}S_y \\\\T_y \\\\U_y \\\\V_y\\end{bmatrix} =, \\begin{bmatrix}, \\left(S_x\ ight)^3 & \\left(S_x\ ight)^2 & \\left(S_x\ ight) & 1\\\\, \\left(T_x\ ight)^3 & \\left(T_x\ ight)^2 & \\left(T_x\ ight) & 1\\\\, \\left(U_x\ ight)^3 & \\left(U_x\ ight)^2 & \\left(U_x\ ight) & 1\\\\, \\left(V_x\ ight)^3 & \\left(V_x\ ight)^2 & \\left(V_x\ ight) & 1 \\ ende (bmatrix}, jeg begynder bmatrix} en ¶ ¶ (b) (c) (d) (bmatrix} ¶ ¶ afslutning, p = qr ¶ ¶, q ^ (- 1) p = q ^ (- 1} qr ¶ ¶, q ^ (- 1} p = ir \\ \\, q ^ (- 1) p = r \\), nu vil vi udnytte alle elementer i den 4x4 matrix for q og hele den første kolonne for s. så q er inversed og anvendes til s.,, punkt 14: actionscript gennemførelse, igen, har vi oprettet mus kontrol tillade, at disse punkter.når ingen af disse punkter er blevet slæbt, beregning og nye kurven stadig ske.offentlige funktion draw_curve2() (//oprettelse af kontrol c1 cirkel (0xff0000); addchild (c1); c. x = stage.stagewidth * 0,2; c. y = stage.stageheight > > 1 c2 = ny cirkel (0xff0000); addchild (c2); c. x = stage.stagewidth * 0, 4 og c2. y = stage.stageheight > > 1 c3 = ny cirkel (0xff0000); addchild (c3); c. x = stage.stagewidth * 0, 6; c3. y = stage.stageheight > > 1; c4 = ny cirkel (0xff0000); addchild (c4); c4). = stage.stagewidth * 0, 8; c4. y = stage.stageheight > > 1 c1. addeventlistener (mouseevent.mouse_down sted); c1. addeventlistener (mouseevent.mouse_up sted); c2. addeventlistener (mouseevent.mouse_down sted); c2. addeventlistener (mouseevent.mouse_up sted); c3. addeventlistener (mouseevent.mouse_down sted); c3. addeventlistener (mouseevent.mouse_up sted); c4. addeventlistener (mouseevent.mouse_down sted); c4. addeventlistener (mouseevent.mouse_up sted); redraw();} privat funktion flytte e: mouseevent): ugyldig (hvis (e.type = = "mousedown") (e.target. startdrag() e.target. addeventlistener (mouseevent.mouse_move, ajourføre)} andre, hvis (e.type = = "mouseup") (e.target. stopdrag(); e.target. removeeventlistener (mouseevent.mouse_move, ajourføre)}} privat funktion ajourføring (e: mouseevent): ugyldig (redraw();}, træk, er den afgørende funktion, hvor det hele skete privat funktion redraw().: ugyldig (var matrix3d tilbage:= new Matrix3d(c1.x * c1.x* c1.x, \tc1.x* c1.x, \tc1.x , \t1, c2.x * c2.x * c2.x, \tc2.x* c2.x, \tc2.x , \t1, c3.x * c3.x * c3.x, \tc3.x* c3.x, \tc3.x , \t1, c4.x * c4.x * c4.x, \tc4.x* c4.x, \tc4.x , \t1); left.invert() var right:Matrix3d = new Matrix3d(c1.y, \t0, \t0, \t0, c2.y, \t0, \t0, \t0, c3.y, \t0, \t0, \t0, c4.y, \t0, \t0, \t0); right.append(left); //f(x) = A(x^3) + B (x^2) +C (x) + D graphics.clear(); var points:Vector.<Number> = new Vector.<Number>; var cmd:Vector.<int> = nye vektor. < int > for (var - jeg: int = 0. jeg < 200; jeg + +) (var - x: antal = jeg * 2 var y: antal = right.n11 * x * x * x + right.n21 * x * x + right.n31 * x + right.n41; nr. tryk (x, y); hvis (i = = 0) cmd. tryk (1); andre cmd. tryk (2)} grafik. linestyle (1); grafik. drawpath (cmd, point);}, endelig, lad os se på produktet.klik, og flytte den røde prikker til se. kurve trukket gennem alle disse punkter.,, trin 15: polynomier i højere grad, vi har lige gennemgået tegning polynomier af grad 2 og 3 (kvadratiske og m3).ud fra vores erfaringer, vi kan forudse, at beregning for pyrograf af grad 4 (quintic) vil kræve fem punkter, som vil kræve fungerer matrix, og så videre til polynomier i endnu højere grad. desværre, coral, og flash.geom.matrix3d, giver kun mulighed for 4x4 matricer, så må du skrive din egen klasse, hvis nødvendigt kommer.det er sjældent, der kræves i et spil, trin 16: opdeling af regioner, lad os forsøge at anvende vores viden at inddele regioner på vores scene.dette kræver en revision af ligning uligheder.se billedet nedenfor. dette billede viser en kurve, at regionerne i to:,, blå - regionen på toppen, hvor der for hvert punkt y er større end ligning af kurven, røde region på bunden, hvor der for hvert punkt i, er mindre end den ligning af kurven,.,, er det ikke svært at forstå dette begreb.i virkeligheden har de allerede eksperimenterede på dette trin 11 som du sammenknebne koefficienter for m3 - formlen.forestil dig, i koordinatsystemet,, at der er et uendeligt antal kurver, differentieret efter en mindre ændring i d:,, skridt 17: actionscript gennemførelse, så her er den stikprøve af produktion til kvadratiske kurve.du kan forsøge at flytte den røde prik rundt og se de regioner, farvet, her er den vigtigste actionscript snippet.tjek den fuldstændige manuskript, region_curve. som privat funktion redraw(): ugyldig (var tilbage: matrix3d = nye matrix3d (c1 - x * c1. x, c1. x, 1, 0, c2. x * c2. x, c2. x, 1, 0, 3. x * c3. x, c3. x 1, 0 0, 0 0, 1). invert() var ret: matrix3d = nye matrix3d (c1. y, 0, 0 0, c2. y, 0, 0 0, c3. y, 0 0, 0 0, 0 0, 0). både (venstre); //d = a (x) 2) + b + c (x) for hver (var - post: cirkel i baggrund) (var - d: antal = ret. n11 * punkt. x * punkt. x + -t.n21 * punkt. x + right.n31; //spor (baggrund [i]. y); hvis (pkt. y > d) item.color = 0; andre item.color = 0xaaaaaa;}}, her er prøven med henvisning til en kurve, og den gennemførelse, der kommer med den.igen, er i fuld tekst, som region_curve2. //d = a + b + c (x) (x) 2) for hver (var - post: cirkel i baggrund) (var - d: antal = right.n11 * punkt. x * punkt. x * punkt. x + right.n21 * punkt på dagsordenen. x * punkt. x + right.n31 * punkt. x + right.n41 //spor (baggrund [i]. y); hvis (pkt. y > d) item.color = 0; andre item.color = 0xaaaaaa;}, gå 18: forskelle, hvor nogle justeringer for at ændre farven på forskellige kurver?igen, muse klik på den røde prikker og se gradient ændringer hen over skærmen, skridt 19: actionscript gennemførelse, her er det vigtigt, actionscript snippet udvundet af, region_curve3.,.First of all we'll want to find out the maximum and minimum offset from the original curve., var max:Number = 0; var min:Number = 0; var Ds:Vector.<Number> = new Vector.<Number>; //D = A(x^2) + B (x) +C for each (var item: Circle in background) { 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; else if (item.y < D && offset < min) min = offset; }, Once done, we'll apply it to colouring the individual dots., //color variations based on the offset var color:Number for (var i:int = 0; i < background.length; i++) { if (Ds[i] > 0) {farve = ds [i] /max * 255 //beregning af farve på plads på baggrund [i]. farve = farve < < 16