Matematisk og Action av Curves: Tegning Kvadratisk og Cubic Curves

The Math og Action av Curves: Tegning Annen- og tredje Curves
Del
Del
7
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter du gjøre Math.Understanding transformasjoner Med Matrix MathematicsThe Math og Action av Curves. Roots

Vi ser linjer som brukes i en rekke scenarier. Curves er også brukt, men kanskje ikke så ofte - men det betyr undergraver ikke deres betydning! I denne opplæringen skal vi ta en nærmere titt på kurver, spesielt den kvadratiske og kubiske kurve, sammen med noen av sine mest brukte matematiske funksjoner.




Endelig resultat Forhåndsvisning Anmeldelser

La oss ta en titt på det endelige resultatet vi skal jobbe mot. Dra de røde prikkene og se gradienter endre seg i posisjon

Og her er en annen demo, ved hjelp av kubiske kurver, uten graderinger.



Trinn 1: Curves

kvadratiske og kubiske vil bli omtalt i hver av disse delene. Så la oss først se på ligningen av kurver. Disse ligningene er skrevet i polynom form, og starter med begrepet av høyeste grad. Den første er kvadratisk ligning (høyeste grad er to); den andre er kubisk ligning (høyeste grad er 3).
\\ [f (X) = Ax ^ 2 + Bx + C \\ ... (eq \\ 1) \\]
\\ [g (x) = ax ^ 3 + Bx ^ 2 + Cx + D \\ ... (eq \\ 2) \\]

Legg merke til at A, B, C og D er reelle tall. Så nå som vi er kjent med det, la oss prøve å visualisere det. Grafiske kurver vil bli vår neste forsøk



Trinn 2:. Grafer Curves

Først, la oss tegne en kvadratisk kurve. Jeg er sikker på at alle lesere har plottet kvadratisk kurve i videregående skole matte klassen, men bare for å friske opp hukommelsen, presenterer jeg grafene nedenfor. De er plassert ved siden av hverandre for å lette sammenligning.

  • Venstre grafen bruker kartesiske koordinatsystem plass

    Høyre grafen bruker Flash koordinere plass

    Den åpen Forskjellen er den omvendt Y-aksen på Flash koordinat plass. De ser enkle samlet, ikke sant? Ok, nå er vi klare til å plotte inn Flash koordinere plass.



    Trinn 3: Kvadratisk Coefficients

    For å posisjonere kvadratiske kurver på rett sted, må vi forstå deres tilsvarende ligninger. Kurven tegnes er egentlig avhengig av Ligningens koeffisienter (for tilfellet med kvadratisk, de er A, B og C).

    Jeg har tatt med en Flash-presentasjon under slik at du enkelt kan justere disse koeffisientene og få umiddelbar tilbakemelding.

    For å studere effekten av enkelte koeffisienter på den totale kurven, foreslår jeg å følge trinnene nedenfor for å eksperimentere med Flash presentasjon ovenfor.


      Mens sette A og B til 0 , tweak verdien av C for både positive og negative verdier. Du vil se linjen høyde endring.
    1. Nå justere verdien av B mellom positive og negative verdier. Observere hva som skjer med gradient over streken.
    2. Nå justere verdien av A mellom positive og negative verdier, og sammenligne resultatene.
    3. Så finpusse B mellom å være positiv og negativ igjen. Observere kurven alltid skjære gjennom origo.
    4. Endelig finpusse C. observere hele kurven skiftet langs y-aksen.

      En annen interessant observasjon er at hele andre og tredje trinn av de ovennevnte, forblir vendepunkt (dvs. vendepunktet) på samme punkt på y-aksen



      Trinn 4:. Alternative Ligning En

      Du raskt se at posisjonering av en kurve er noe vanskelig. Ligningen brukes er upraktisk hvis vi ønsker å si, finne koordinatene til laveste punkt på en kurve.

      Løsning? Vi skal skrive om ligningen til en ønsket form. Sjekk ut følgende ligning:

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

      Det er fortsatt en kvadratisk likning, men det er tatt en annen form. Nå kan vi enkelt kontrollere minimums- og maksimumspunkter på kurven. I forrige Flash presentasjonen, klikk på knappen "Approach en" øverst til høyre og leke med de nye verdiene

      Her er en kort forklaring på de koeffisienter roller.
      CoefficientRolePControl kurvens steepness.QControl forskyvning av kurvens vendepunkt langs x-axis.RControl forskyvning av kurvens vendepunkt langs y-aksen.

      Likevel er det fortsatt en vanskelig oppgave å gjøre kurven passere gjennom et gitt sett av poeng. Vi måtte strengt forhånds regne på papir før sette det til koden.

      Heldigvis er det en bedre løsning. Men før du går gjennom det, la oss ta en titt på Action gjennomføringen som nå



      Trinn 5:. Action Implementering

      Her er ligningene skrevet som Actionscript-funksjoner (sjekk grafer. som i kilden nedlasting)
      privat funksjon quadratic1 (x:. Antall, A: Antall, B: Antall, C: Number): Antall {//y = A (x ^ 2) + B (x) + C avkastning A * x * x + B * x + C} privat funksjon quadratic2 (x: Antall, P: Antall, Q: Antall, R: Number): Antall {//y = P * (x + Q) ^ 2 + R avkastning P * (x + Q) * (x + Q) + R}

      Og her er en implementering av tegnemetode med Graphics.drawPath (). Bare et notat at alle kurver i denne artikkelen er hentet på lignende måte

      Først variablene ...
      private Var punkter:.. Vector < Number > . = New Vector < Number >; private Var drawCommand. Vector < int > . = New Vector < int >;

      Nå y- posisjoner, beregnet basert på X-posisjoner og de gitte koeffisientene
      privat funksjon tegning. (A: Antall, B: Antall, C: Number): void {for (var i: int = 0; i < 400; i ++) {var x: Number = i - 200; punkter [i * 2] = x * 10 + stage.stageWidth > > 1; if (isApproach1) {poeng [i * 2 + 1] = quadratic1 (x, A, B, C) + stage.stageHeight > > 1} else {poeng [i * 2 + 1] = quadratic2 (x, A, B, C) + stage.stageHeight > > 1} if (i == 0) drawCommand [i] = 1; annet drawCommand [i] = 2; } Graphics.clear (); graphics.lineStyle (1); graphics.drawPath (drawCommand, påpeker);}

      (Forvirret om > > operatør Ta en titt på denne opplæringen?.)



      Trinn 6: Alternative Equation Two
      < p> Anta at vi er gitt tre poeng at den kvadratiske Kurven skal krysse gjennom; hvordan danne vi tilsvarende ligningen? Mer spesielt, hvordan kan vi bestemme koeffisientverdiene i ligningen? Lineær algebra kommer til unnsetning. La oss analysere dette problemet.

      Vi vet at kvadratiske likninger alltid ta form som skrevet i ekv. 1 i trinn 1.

      \\ [f (X) = Ax ^ 2 + Bx + C \\ ... (eq \\ 1) \\]

      Siden alle tre koordinater gitt blir liggende på samme kurve, de må hver tilfredsstille denne ligningen, med de samme koeffisientene som ligningen for kurven som vi er ute etter. La oss skrive dette ned i ligningen skjema

      Gitt tre koordinater.

    5. \\ (S \\ \\ venstre (S_x, \\ S_y \\ right) \\)

      \\ (T \\ \\ venstre (T_x, \\ T_y \\ right) \\)

      \\ (U \\ \\ venstre (U_x, \\ U_y \\ right) \\)

      Substitute disse verdiene inn (Ligning 1). Legg merke til at A, B, C er ukjente i øyeblikket.

      \\ [f (X) = Ax ^ 2 + Bx + C \\ ... (eq \\ 1) \\]

      \\ (S_y = A \\ venstre (S_x \\ right) ^ 2 + B \\ venstre (S_x \\ right) + C \\ \\)

      \\ (T_y = A \\ venstre (T_x \\ right) ^ 2 + B \\ venstre (T_x \\ right) + C \\ \\)

      \\ (U_y = A \\ venstre (U_x \\ right) ^ 2 + B \\ venstre (U_x \\ right) + C \\ \\) < .no>

      Nå omskrive i matriseform. Ta oppmerksom på at A, B, C er de ukjente vi løse for.

      [latex]
      \\ begin {bmatrix} S_y \\\\ T_y \\\\ U_y \\ end {bmatrix} =
      \\ begin {bmatrix}
      \\ venstre (S_x \\ right) ^ 2 & \\ venstre (S_x \\ right) & 1 \\\\
      \\ venstre (T_x \\ right) ^ 2 & \\ venstre (T_x \\ right) & 1 \\\\
      \\ venstre (U_x \\ right) ^ 2 & \\ venstre (U_x \\ right) & 1 \\ end {bmatrix}
      \\ begin {bmatrix} A \\\\ B \\\\ C \\ end {bmatrix} \\\\ product: [/latex]

      [latex]
      \\ begin { bmatrix}
      \\ venstre (S_x \\ right) ^ 2 & \\ venstre (S_x \\ right) & 1 \\\\
      \\ venstre (T_x \\ right) ^ 2 & \\ venstre (T_x \\ right) & 1 \\\\
      \\ venstre (U_x \\ right) ^ 2 & \\ venstre (U_x \\ right) & 1 \\ end {bmatrix} ^ {- 1}
      \\ begin {bmatrix} S_y \\\\ T_y \\\\ U_y \\ end {bmatrix} =
      \\ begin {bmatrix}
      \\ venstre (S_x \\ right) ^ 2 & \\ venstre (S_x \\ right) & 1 \\\\
      \\ venstre (T_x \\ right) ^ 2 & \\ venstre (T_x \\ right) & 1 \\\\
      \\ venstre (U_x \\ right) ^ 2 & \\ venstre (U_x \\ right) & 1 \\ end {bmatrix} ^ {- 1}
      \\ begin {bmatrix}
      \\ venstre (S_x \\ right) ^ 2 & \\ venstre (S_x \\ right) & 1 \\\\
      \\ venstre (T_x \\ right) ^ 2 & \\ venstre (T_x \\ right) & 1 \\\\
      \\ venstre (U_x \\ right) ^ 2 & \\ venstre (U_x \\ right) & 1 \\ end {bmatrix}
      \\ begin {bmatrix} A \\\\ B \\\\ C \\ end {bmatrix} \\\\ product: [/latex] product: [latex]
      \\ begin {bmatrix}
      \\ venstre (S_x \\ right) ^ 2 & \\ venstre (S_x \\ right) & 1 \\\\
      \\ venstre (T_x \\ right) ^ 2 & \\ venstre (T_x \\ right) & 1 \\\\
      \\ venstre (U_x \\ right) ^ 2 & \\ venstre (U_x \\ right) & 1 \\ end {bmatrix} ^ {- 1}
      \\ begin {bmatrix} S_y \\\\ T_y \\\\ U_y \\ end {bmatrix}
      = jeg
      \\ begin {bmatrix} A \\\\ B \\\\ C \\ end {bmatrix}
      \\\\
      K ^ {- 1} J = L product: [/latex]

      Selvfølgelig kan vi bruke likninger i stedet, men jeg foretrekker å bruke matriser fordi det er enklere. (Red.anm: så lenge du forstår matriser, som er!)

      Vi får den inverse av K og multipliser med J matrise for å få L. Etter at vi har lykkes løst for A, B, C, vil vi bare erstatte i den kvadratiske ligningen. Dermed vil vi ha en kvadratisk kurve som går gjennom alle tre poengene.



      Trinn 7: Importere Coral

      Som nevnt i forrige trinn, trenger vi å utføre en 3x3 matrise inversjon og multiplikasjon. Actionscript er flash.geom.matrix klassen vil ikke være i stand til å hjelpe på dette. Selvfølgelig har vi et valg om å utnytte flash.geom.Matrix3D, klasse, men jeg foretrekker Coral biblioteket fordi jeg kan lirke inn i disse tilpassede klasser og undersøke hva som skjer under panseret. Jeg personlig synes dette er svært nyttig når ved tvil om riktig bruk av kommandoer selv etter å ha lest API dokumentasjon.

      Så laste ned og plassere de utpakkede Coral filene inn i prosjektet kildemappen.



      Trinn 8: Action Implementering

      Her er et eksempel på resultatet. Prøv å flytte de røde prikkene og se den kvadratiske kurve tegnes på nytt for å krysse gjennom alle tre poengene



      Trinn 9:. Implementering Forklart

      Du finner hele manuset i Draw_curve.as. Følgende Actionscript er bare å aktivere musekontroller på de små prikkene
      offentlig funksjon Draw_Curve () {//setter opp kontroller c1 = new Circle (0xff0000).; addChild (c1); c1.x = stage.stageWidth * 0,2; c1.y = stage.stageHeight > > 1; c2 = new Circle (0xff0000); addChild (c2); c2.x = stage.stageWidth * 0,5; c2.y = stage.stageHeight > > 1; c3 = new Circle (0xff0000); addChild (c3); c3.x = stage.stageWidth * 0,8; c3.y = stage.stageHeight > > 1; c1.addEventListener (MouseEvent.MOUSE_DOWN, flytte); c1.addEventListener (MouseEvent.MOUSE_UP, flytte); c2.addEventListener (MouseEvent.MOUSE_DOWN, flytte); c2.addEventListener (MouseEvent.MOUSE_UP, flytte); c3.addEventListener (MouseEvent.MOUSE_DOWN, flytte); c3.addEventListener (MouseEvent.MOUSE_UP, flytte); tegne ()} privat funksjon flytte (e: MouseEvent): void {if (e.type == "mousedown") {e.target.startDrag () e.target.addEventListener (MouseEvent.MOUSE_MOVE, oppdatering); } Else if (e.type == "mouseup") {e.target.stopDrag (); e.target.removeEventListener (MouseEvent.MOUSE_MOVE, oppdatering); }} privat funksjon oppdateringen (e: MouseEvent): void {tegne ();}

      Kjernen ligger i den tegne funksjonen. Jeg har fremhevet matriseoperasjoner og kvadratisk funksjon for opptegning prosessen
      privat funksjon tegne (). Void {K = 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); K.invert () L = new 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 punkter: Vector < Number >. Antall >;; = new Vector <. Var cmd. Vector < int > = New Vector. ≪ int >; for (var i: int = 0; i < 200; i ++) {//nåværende x var x: Number = i * 2; //f (x) = A (x ^ 2) + B (x) + C Var y: Nummer = L.n11 * x * x + L.n21 * x + L.n31; points.push (x, y); if (i == 0) cmd.push (1); annet cmd.push (2); } Graphics.lineStyle (1); graphics.drawPath (cmd, påpeker);}

      Så du kan se at matrisen K ble initialisert og omvendt før de legges ut matrisen J.

      append () -funksjonen multipliserer dagens matrise, J, med innspill matrise, K som er lagt til sin venstre. En annen bemerkelsesverdig detalj er at vi ikke utnytter alle rader og kolonner i K og J matriser. Men siden matriseinversjon kan bare skje med en kvadratisk matrise, må vi fylle på fjerde rad, fjerde kolonne element av K med 1. (Det er ikke nødvendig å gjøre dette for J fordi vi ikke trenger sin inversjon i vår beregning. ) Dermed kan du se alle de andre elementene er 0 unntak av den første kolonnen



      Trinn 10:. Grafer Cubic Curve

      Så det er alt for tegning kvadratiske kurver. La oss gå videre til kubiske kurver.

      Igjen, vi vil ha en liten revisjon av grafer disse kurvene. Sjekk ut følgende bilde:

      Når du sammenligner denne kurven som i kvadratisk, vil du merke at det er brattere, og at en del av kurven ligger under x-aksen. Den ene halvdelen er speilet vertikalt, sammenlignet med et kvadratisk



      Trinn 11:. Cubic Coefficients

      Jeg har blant annet følgende Flash presentasjon for å la deg eksperimentere med koeffisientene i en kubisk ligning . Prøv tweaking verdien av A fra positiv til negativ og observere forskjellen i kurven produsert



      Trinn 12:. Action Implementering

      Her er den viktigste delen av gjennomføringen av den grafiske ovenfor :
      privat funksjon tegne (A: Antall, B: Antall, C: Antall, D: Number): void {for (var i: int = 0; i < 400; i ++) {var x: Number = i - 200; punkter [i * 2] = x * 10 + stage.stageWidth > > 1; punkter [i * 2 + 1] = cubic1 (x, A, B, C, D) + stage.stageHeight > > 1 dersom (i == 0) drawCommand [i] = 1; annet drawCommand [i] = 2; } Graphics.clear (); graphics.lineStyle (1); graphics.drawPath (drawCommand, påpeker);} private funksjon cubic1 (x: Antall, A: Antall, B: Antall, C: Antall, D: Number): Antall {//y = A (x ^ 3) + B ( x ^ 2) + C (x) + D avkastning A * x * x * x + B * x * x + C * x + D}

      Igjen, det er vanskelig å plassere kubisk kurve i henhold til et sett av punkter det krysser gjennom. Nok en gang viser vi til lineær algebra for en alternativ



      Trinn 13:. Alternativ metode

      Vi vet fra Trinn 6 at koeffisientene i en kvadratisk likning kan beregnes basert på tre gitt poeng, og kurven trukket fra det vil krysse gjennom disse punktene. En lignende tilnærming kan utføres med noen fire
      gitt poeng for å få en kubisk ligning:

      \\ (S \\ \\ venstre (S_x, \\ S_y \\ right) \\)

      \\ (T \\ \\ venstre (T_x, \\ T_y \\ right) \\)

      \\ (U \\ \\ venstre (U_x, \\ U_y \\ right) \\)

      \\ ( V \\ \\ venstre (V_x, \\ V_y \\ right) \\)

      Substitute disse koordinatene til (eq 2). Legg merke til at A, B, C, D er ukjente.

      \\ [g (x) = Ax ^ 3 + Bx ^ 2 + Cx + D \\ ... (eq \\ 2) \\] Anmeldelser

      \\ (S_y = A \\ venstre (S_x \\ right) ^ 3 + B \\ venstre (S_x \\ right) ^ 2 + C \\ venstre (S_x \\ right) + D \\)

      \\ (T_y = A \\ venstre (T_x \\ right) ^ 3 + B \\ venstre (T_x \\ right) ^ 2 + C \\ venstre (T_x \\ right) + D \\)

      \\ (U_y = A \\ venstre (U_x \\ right) ^ 3 + B \\ venstre (U_x \\ right) ^ 2 + C \\ venstre (U_x \\ right) + D \\)

      \\ (V_y = A \\ venstre (V_x \\ right) ^ 3 + B \\ venstre (V_x \\ right) ^ 2 + C \\ venstre (V_x \\ right) + D \\)

      Men nå skal vi håndtere en 4x4 matrise i stedet for 3x3 matrise:

      \\ (
      \\ begin {bmatrix} S_y \\\\ T_y \\\\ U_y \\\\ V_y \\ end {bmatrix} =
      \\ begin {bmatrix}
      \\ venstre (S_x \\ right) ^ 3 & \\ venstre (S_x \\ right) ^ 2 & \\ venstre (S_x \\ right) & 1 \\\\
      \\ venstre (T_x \\ right) ^ 3 & \\ venstre (T_x \\ right) ^ 2 & \\ venstre (T_x \\ right) & 1 \\\\
      \\ venstre (U_x \\ right) ^ 3 & \\ venstre (U_x \\ right) ^ 2 & \\ venstre (U_x \\ right) & 1 \\ \\
      \\ venstre (V_x \\ right) ^ 3 & \\ venstre (V_x \\ right) ^ 2 & \\ venstre (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
      \\)

      Nå vil vi utnytte alle elementer i 4x4 matrise for Q og hele første kolonnen for P . Da Q er speilvendt og brukes på P.



      Trinn 14: Action Gjennomføring

      Igjen, setter vi opp museknappene for å tillate å dra av disse punktene. Når noen av disse punktene blir dratt, rekalkulering og oppdatering av kurven hele tiden skje.
      offentlig funksjon Draw_Curve2 () {//setter opp kontroller c1 = new Circle (0xff0000); addChild (c1); c1.x = stage.stageWidth * 0,2; c1.y = stage.stageHeight > > 1; c2 = new Circle (0xff0000); addChild (c2); c2.x = stage.stageWidth * 0,4; c2.y = stage.stageHeight > > 1; c3 = new Circle (0xff0000); addChild (c3); c3.x = stage.stageWidth * 0,6; c3.y = stage.stageHeight > > 1; c4 = new Circle (0xff0000); addChild (c4); c4.x = stage.stageWidth * 0,8; c4.y = stage.stageHeight > > 1; c1.addEventListener (MouseEvent.MOUSE_DOWN, flytte); c1.addEventListener (MouseEvent.MOUSE_UP, flytte); c2.addEventListener (MouseEvent.MOUSE_DOWN, flytte); c2.addEventListener (MouseEvent.MOUSE_UP, flytte); c3.addEventListener (MouseEvent.MOUSE_DOWN, flytte); c3.addEventListener (MouseEvent.MOUSE_UP, flytte); c4.addEventListener (MouseEvent.MOUSE_DOWN, flytte); c4.addEventListener (MouseEvent.MOUSE_UP, flytte); tegne ();} private funksjon flytte (e: MouseEvent): void {if (e.type == "mousedown") {e.target.startDrag () e.target.addEventListener (MouseEvent.MOUSE_MOVE, oppdatering); } Else if (e.type == "mouseup") {e.target.stopDrag (); e.target.removeEventListener (MouseEvent.MOUSE_MOVE, oppdatering); }} privat funksjon oppdateringen (e: MouseEvent): void {tegne ();}

      tegne er den avgjørende funksjon der alt skjedde
      privat funksjon tegne (): void {var venstre: 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, en , 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 , \t1); left.invert () Var akkurat: 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 (til venstre); //f (x) = A (x ^ 3) + B (x ^ 2) + C (x) + D graphics.clear (); Var punkter: Vector < Number >. Antall >;; = new Vector <. Var cmd. Vector < int > = New Vector. ≪ int >; 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); annet cmd.push (2); } Graphics.lineStyle (1); graphics.drawPath (cmd, påpeker);}

      Til slutt, la oss se på produktet. Klikk og flytt de røde prikkene for å se kubisk kurve trukket passere gjennom alle disse punktene



      Trinn 15:. Polynomer av høyere grad

      Vi har nettopp gått gjennom tegning polynomer av grad 2 og 3 (kvadratisk og kubikk). Fra vår erfaring, kan vi forutsi at beregningen for polynom av grad 4 (quintic) vil kreve fem poeng, noe som vil kreve 5x5 matrise, og så videre for polynomer av enda høyere grad.

      Dessverre, Coral og blits. geom.Matrix3D bare tillate for 4x4 matriser, så du må skrive din egen klasse hvis behovet kommer. Det er sjelden nødvendig i spill, selv om



      Step. 16: Dele Regioner

      La oss prøve å bruke vår kunnskap til å dele regioner på vår scene. Dette krever noen revisjon av lignings ulikheter. Sjekk ut bildet nedenfor

      Dette bildet over viser en kurve dele regionene i to:.

    6. Blå regionen på toppen, der for hvert punkt y er større enn ligningen for kurve.

      Red region nederst, hvor for hvert punkt y er mindre enn ligningen for kurven.

      Det er ikke vanskelig å forstå dette konseptet. Faktisk har du allerede eksperimentert på dette i trinn 11 som du forskjøvet koeffisientene til kubikk formel. Tenk, i koordinatsystemet, at det er et uendelig antall kurver, alt differensiert etter bare en liten endring i D:



      Trinn 17: Action Implementering

      Så her er utvalget av produksjonen for kvadratisk kurve. Du kan prøve å flytte den røde prikken rundt og se regionene fargede.

      Her er det viktig Actionbiten. Sjekk ut hele manuset i Region_Curve.as
      privat funksjon tegne (): void {var venstre: 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 akkurat: Matrix3d ​​= new Matrix3d ​​(c1.y, 0, 0, 0, c2.y, 0, 0, 0, c3.y, 0, 0, 0, 0, 0, 0, 0 ); right.append (til venstre); //D = A (x ^ 2) + B (x) + C for hver (var element: Circle i bakgrunnen) {var D: Number = right.n11 * item.x * item.x + right.n21 * element .x + right.n31; //trace(background[i].y); if (item.y > D) item.color = 0; annet item.color = 0xAAAAAA; }}

      Her er prøven med hensyn til tredjegradskurve.

      Og gjennomføringen som følger med det. Igjen, full script er i Region_Curve2.as
      //D = A + B (x) + C (x ^ 2) for hver (var element: Circle i bakgrunnen) {var D: Number = right.n11 * element. 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; annet item.color = 0xAAAAAA;}



      Trinn 18: Variasjoner

      Hva med noen tilpasninger for å endre fargen på tvers av ulike kurver? Igjen, museklikk på de røde prikkene og se gradient endringer over skjermen



      Trinn 19:. Action Implementering

      Her er det viktig Action snippet hentet fra Region_Curve3.as. Først av alt vil vi ønsker å finne ut maksimum og minimum avvike fra den opprinnelige kurven
      Var max: Antall = 0; Var min.: Number = 0; Var Ds. Vector < Number > . = New Vector < Number >; //D = A (x ^ 2) + B (x) + C for hver (var element: Circle i bakgrunnen) {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;.}

      Når dette er gjort, vil vi bruke den til å fargelegge de enkelte punktene
      //fargevariasjoner basert på offsetvar farge: Numberfor (var i: int = 0; i < background.length, jeg ++) {if (Ds [i] > 0) {color = Ds [i] /max * 255 //beregning farge å spor i Bakgrunnen [i] Color = farge < < 16 | farge < < 8 | farge; //definere en gråskala} else if (Ds [i] < 0) {color = Ds [i] /min * 255; Bakgrunnen [i] Color = farge < < 16; //definere en gradient av rød}}



      Konklusjon

      Slik at alt for tegningen av kurver. Neste opp, finne røttene til en kvadratisk og tredjegradskurve. Takk for lesing. Gjør aksje hvis du ser noen virkelige applikasjoner som utnytter denne opplæringen. Anmeldelser