Understanding transformasjoner med Matrix Matematikk
15
Del
7
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter You Do The Math.Circular Motion i AS3. Lag en Moving Object Orbit AnotherThe Math og Action av Curves: Tegne Annen- og tredje Curves
Inspirert av Prof i sin foredragsserie på lineær algebra. Wildberger, jeg har tenkt å gjennomføre sin matematiske ideer med Flash. Vi skal ikke gå i dybden av den matematiske manipulering av matriser gjennom lineær algebra: bare gjennom vektorer. Denne forståelsen, selv om fortynne elegansen til lineær algebra, er nok til å lansere oss inn noen interessante muligheter for 2x2 matrise manipulasjon. Spesielt vil vi bruke den til å gjelde ulike klipping, forvrenger, bla, og skalering effekter på bildene under kjøring.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot. Trykke de fire retningstastene - opp, ned, venstre, høyre - for å se noen effekter vi kan oppnå med transformasjoner
Hvis du bare bruker venstre og høyre piltaster, synes fisken å svømme rundt i en. pseudo-3D isometrisk plass
Trinn 1:. Different Koordinere Spaces
Grafikk trekkes inn koordinere mellomrom. Så for å manipulere dem, spesielt til å oversette, rotere, skalere, reflektere og skew grafikk, er det viktig at vi forstår koordinere mellomrom. Vi vanligvis gjør bruk av ikke bare én, men flere koordinere mellomrom i et enkelt prosjekt - dette gjelder ikke bare for designere som bruker Flash IDE, men også for programmerere å skrive Action
I Flash IDE dette skjer når du. konvertere tegninger til MovieClip symboler: hvert symbol har sin egen opprinnelse
Bildet over viser opprinnelsen til scenen «koordinere plass (rød prikk), og at av symbol koordinere plass (registreringspunktet merket med trådkors. ). For å vite hvilket rom du er i for tiden, observere bar under tidslinjen av Flash IDE som vist på bildet nedenfor.
(Jeg bruker Flash CS3, slik at beliggenheten kan variere for CS4 og CS5.) Det jeg ønsker å understreke er at det finnes forskjellige koordinere mellomrom, og det faktum at du allerede er kjent med å bruke dem .
Trinn 2: Begrunnelsen
Nå er det en god grunn for dette. Vi kan bruke en koordinere plass som en referanse for å endre den andre koordinere plass. Dette høres kanskje fremmed, så jeg har tatt med Flash presentasjon under for å lette min forklaring. Klikk og dra de røde pilene. Lek litt med den.
I bakgrunnen er et blått rutenett, og i forgrunnen er en rød rutenett. De blå og røde pilene er i utgangspunktet justert langs x- og y-aksen av Flash koordinere plass, hvis sentrum har jeg flyttet til midten av scenen. Den blå rutenettet er en referanse grid; Kraftnettet vil ikke endres som du samhandler med de røde pilene. Den røde rutenettet, på den annen side, kan reorientert og skalert ved å dra de røde pilene.
Merk at pilene indikerer også en viktig egenskap av disse nett. De indikerer oppfatningen av en enhet av x og en enhet av y på sine respektive nett. Det er to røde piler på den røde rutenettet. Hver av dem angir lengden av en enhet på x-aksen og y-aksen. De har også diktere retningen av koordinatsystemet plass. La oss ta rød pil som peker langs x-aksen og utvide den til å være dobbelt så lang som den opprinnelige pilen (vist i blått). Observere følgende bilder.
Vi ser at bildet (det grønne boksen) tegnet på den røde nettet er nå strukket horisontalt, på grunn av det faktum at denne røde gitter det er tegnet på er nå dobbelt så bred. Poenget jeg prøver å gjøre er ganske enkelt: du kan bruke ett koordinere plass som grunnlag for å endre en annen koordinere plass
Trinn 3:. Affine Koordinere Space
Så hva er en "affine koordinere space"? Vel, jeg er sikker på at du er forsiktig nok til å observere at disse koordinerer mellomrom er tegnet med parallelle nett. La oss ta den røde affine plass for eksempel: det er ingen garanti for at både x-aksen og y-aksen er alltid vinkelrett på hverandre, men være trygg på at uansett du prøver å justere pilene, vil du aldri få en slik sak som nedenfor. Faktisk x- og y-aksene vanligvis refererer til kartesisk koordinatsystem plass, som vist nedenfor. Merk at de horisontale og vertikale gittere er vinkelrett på hverandre. Cartesian er en typen Som du kanskje har gjettet, de transformasjoner er oversettelse, skalering, refleksjon, forvrenger og rotasjon. Unødvendig å si, fysiske egenskaper slik som x, y, scaleX, Scaley og rotasjon avhenge av plass. Når vi ringe til disse egenskapene, er vi faktisk forvandle affine koordinater Jeg håper bildene som vises ovenfor er eksplisitt nok til å kjøre hjem ideen. Dette er fordi for en programmerer å arbeide med FlashDevelop, vil vi ikke se disse nett at Flash IDE beleilig viser for designere. Alle disse må leve i hodet ditt. Bortsett fra å forestille disse nett, trenger vi også å få hjelp av Matrix klasse. Dermed har en matematisk forståelse av matriser er viktig, så vi skal revidere driften av matrix her. Addisjon og multiplikasjon Matrix operasjoner convery betydninger geometrisk. Med andre ord, kan du se for deg hva de betyr på en graf. La oss anta at vi har fire poeng i vår koordinere plass og ønsker å skifte dem til et sett med nye steder. Dette kan gjøres ved hjelp av matrise tillegg. Sjekk ut bildet under. Som du ser, vi er faktisk skifter hele lokal koordinere plass (rød nett) hvor disse fire punktene er trukket. Notasjonen for å utføre disse operasjonene er som vist nedenfor: Vi kan også se at dette skiftet kan faktisk være representert ved hjelp av en vektor av (tx, ty). La oss skille vektorer og statiske punkter i koordinere mellomrom ved vår bruk av parenteser og hakeparenteser. Jeg har omskrevet dem i bildet nedenfor Her er en enkel implementering av matrix tillegg. Sjekk ut kommentarene: Matrix multiplikasjon er noe mer sofistikert enn matrix tillegg men Prof Wildberger har elegant brutt det ned til dette enkle tolkning. Jeg skal ydmykt forsøke å gjenta hans forklaring. For de som ønsker å dykke dypere inn i forståelsen av lineær algebra som fører til dette, sjekk ut professor foredragsserie. La oss starte med å takle det gjelder identitetsmatrisen, I. Fra bildet ovenfor vet vi at å multiplisere en vilkårlig matrise, A, av identitetsmatrisen, jeg vil alltid produsere A. Her er en analogi: 6 x 1 = 6; identitetsmatrisen er sammenlignes med nummer 1 i at multiplikasjon Alternativt kan vi skrive resultatet i følgende vektorformat som vil forenkle vår tolkning. Den geometriske tolkningen av denne formelen er vist på bildet nedenfor. Fra kartesisk grid (venstre grid), kan vi se det blå punktet er plassert på (2, 1). Nå hvis vi skulle forvandle denne originale rutenett av x og y til en ny tavle (høyre grid) i henhold til et sett av vektorer (under høyre grid), vil det blå punktet bli flyttet til (2, 1) på den nye tavla - men når vi kartlegge dette tilbake til den opprinnelige rutenettet, er det det samme punktet som før. Fordi vi transformerer den opprinnelige rutenettet til en annen rutenett som deler de samme vektorene for x og y, ser vi ingen forskjell. Faktisk endringer av x og y i denne transformasjonen er null. Dette er hva det menes med identitetsmatrisen Men hvis vi prøver å utføre en kartlegging ved hjelp av andre transformasjoner, vi skal se noen forskjell. Jeg vet at dette ikke var den mest avslørende eksempel for å begynne med, så la oss gå videre til et annet eksempel Bilde viser en skalering av koordinatsystemet ovenfor rom. Sjekk ut vektoren av xi forvandlet koordinere plass: en enhet av de transform x står for to enheter av den opprinnelige x. På den transformerte koordinat plass, representerer koordinatene for det blå punktet fremdeles (2, 1). Men hvis du prøver å kartlegge dette koordinere fra forvandlet rutenett på den opprinnelige rutenettet, er det ( 4 Hele denne ideen er fanget av bildet ovenfor. Hva med formelen? Resultatet skal være konsekvent; la oss sjekke det ut. Jeg er sikker på at du husker disse formlene. Nå har jeg lagt sine respektive betydninger nå for å sjekke ut den numeriske resultat av vår skalering eksempel De er enig med hverandre! Nå kan vi gjerne bruke denne ideen til andre transformasjoner. Men før det, en Action implementering Sjekk ut Action gjennomføring (og den resulterende SWF) nedenfor. Legg merke til at en av de overlappende boksene blir strukket langs x ved en skala fra 2. Jeg har fremhevet viktige verdier. . Disse verdiene vil bli forskjøvet i de senere trinnene for å representere ulike transformasjoner Her har vi skalert rutenettet med en faktor på to langs begge x- og y-aksene. Den blå punktet er i (2, 1) i den opprinnelige risten før transformasjonen, og (4, 2) i den opprinnelige gitteret etter transformasjon. (Selvfølgelig, det er fortsatt på (2, 1) i ny Og for å bekrefte resultatet numerisk ... .. . de sams igjen! For å se dette i Action gjennomføring, bare endre verdien av md fra 1 til 2. Jeg er sikker på dette punktet du ønsker å prøve ut ting selv, så gå videre og finpusse Jeg har inkludert Flash utgang for begge tilfeller som under. For lesere som ønsker litt hjelp med disse verdiene, sjekk ut Multiplication_final.as i kilde nedlasting Jeg anser rotasjon en undergruppe av forvrenger. Den eneste forskjellen er at i rotasjon, er omfanget av en enhet av både x og y-aksen vedlikeholdt, som er dets vertikale mellom de to aksene. Action gir faktisk en metode i Matrix klassen, roter ( ), å gjøre dette. Men la oss gå gjennom dette likevel Nå er vi ikke ønsker å endre størrelsen på en lengdeenhet i x og y fra den opprinnelige rutenettet.; bare for å endre retningen på hver. Vi kan gjøre bruk av trigonometri å komme frem til resultatet vises i bildet ovenfor. Gitt en vinkel på Rotasjon og en, vil vi få ønsket resultat ved å bruke vektorer av (cos a, synd a) for x-aksen og (-sin en, cos a) for y-aksen. Størrelsen for hver ny akse vil fortsatt være en enhet, men hver akse vil være i en vinkel på et, i forhold til originalene. For Action gjennomføring, forutsatt at vinkelen, a, er 45 ° (det vil er, 0,25 * pi radianer), bare finpusse matrise-verdiene til følgende: Den fulle kilde kan bli referert til i Multiplication_final.as Å ha en vektor tolkning av en 2x2. matrix åpner opp plass for oss å utforske. Sin søknad i manipulere bitmaps (BitmapData, LineBitmapStyle, LineGradientStyle, etc.) er utbredt - men jeg tror jeg vil lagre det på en annen tutorial. For tilfelle av denne artikkelen skal vi forsøke å forskyve våre sprite ved kjøring slik at det ser ut som det er faktisk sitter og blar i 3D. Fra bildet ovenfor kan vi se at i en verden med en isometrisk visning, noe grafikk som er "standing" holder sin y-aksen vektor uendret mens x-aksen vektor er roterer. Legg merke til at en måleenhet for x- og y-aksen ikke endrer - med andre ord, bør ingen skalering skje i enten akse, bare rotasjon rundt x-aksen Her er et eksempel på denne ide. i Flash. Klikk hvor som helst på scenen og begynner å dra rundt for å se fisken skew. Slipp for å stoppe samhandling. Her er det viktig bit av Actionscript. Jeg har uthevet de avgjørende linjene som håndterer x-aksen rotasjon. Du kan også lese FakeIso.as Her har jeg brukt Point klasse for lagring av vektorer I dette trinnet, vi. skal forsøke å legge til tastaturkontrollene. Fiskens plasseringen vil oppdatere i henhold til dens hastighet, velo. Vi vil definere trinnvis fremgangsmåte for positiv (med klokken) rotasjon og negative (mot klokken) rotasjon samt Ved et tastetrykk, vil velo rotere: Nå for hver ramme, skal vi forsøke å farge fremre side av fisken, og forskyve fisken i tillegg. Dersom hastigheten, velo, har en størrelse på mer enn 1, og vi bruker den til fiskens matrise, m, vil vi få en skalering effekt også - så for å eliminere denne muligheten, vi skal normalisere hastighet og deretter bare gjelde . som til fiskens matrise Klikk på scenen, deretter trykker du på tastene venstre og høyre piltastene for å se gjøre fisken endre retning å krydre ting opp, la oss tillate kontroll av y-aksen vector samt Også til å bestemme framsiden av fisken, vi nå trenger å innlemme y-aksen i Her er koden for at: Vel, for noen Resultatet av å kontrollere begge akser kan vise seg å være litt forvirrende, men poenget er at du nå kan skew fisk, oversette det, gjenspeiler det, og selv roter det! Prøv ut kombinasjoner på opptil + venstre, opp + høyre, ned + venstre, ned + høyre. Også, se om du kan opprettholde "front" side av fisk (fisk vil være nedtonet). Hint: Trykk opp kontinuerlig, deretter til venstre, så ned, deretter til høyre. Du gjør en rotasjon! Jeg håper du finner matrise matematikk en verdifull ressurs for dine prosjekter etter å ha lest denne artikkelen. Jeg håper å skrive litt mer på anvendelser av 2x2-matrise i liten Hurtigtips forgrening ut av denne artikkelen, og på Matrix3d som er avgjørende for 3D-manipulasjoner. Takk for lese, terima kasih. Anmeldelser
Dette koordinere plass er ikke anbefale en affine koordinere plass.
av affine koordinere plass, men vi kan forvandle det til andre affine områder som vi foretrekker. De horisontale og vertikale nett trenger ikke nødvendigvis å være vinkelrett på hverandre
Eksempel på en affine koordinere plass
Et annet eksempel på en affine koordinere plass
Trinn 4:. Affine Transformations
Original affine plass
skalerbare affine plass
Reflektert affine plass
Skjev affine plass
roteres og skaleres affine plass
Trinn 5:. Forstå Matrix
Trinn 6: Geometriske Betydning av Matrix Addition
Trinn 7:. Action Implementering
public class Tilsetting strekker Sprite {offentlig funksjon Addition () {var m: Matrix = new Matrix (); //instantiate matrise m.tx = stage.stageWidth * 0,5; //skifte i x m.ty = stage.stageHeight * 0,5; //skifte i y Var d: DottedBox = new DottedBox (); //opprette egendefinerte grafiske (stiplede boksen er en Sprite) addChild (d); d.transform.matrix = m; //gjelder matrisen til vår grafiske}}
Trinn 8: Geometriske Betydning av matrisemultiplikasjon
, fra et geometrisk synspunkt.
Trinn 9:. Scaling Langs X
, 1).
Original koordinere:.. (2, 1)
Vector på forvandlet x-aksen: (2, 0)
Vector på forvandlet y-aksen: (0, 1)
Forventet resultat: (2 * 2 + 0 * 1, 0 * 2 + 1 * 1) = (4, 1)
Trinn 10:. Action Implementering
public class multiplikasjon strekker Sprite {offentlig funksjon multiplikasjon () {var ref: DottedBox = new DottedBox (); //lage referanse grafisk addChild (ref); ref.x = stage.stageWidth * 0,5; ref.y = stage.stageHeight * 0,5; Var m: Matrix = new Matrix (); //instantiate matrise m.tx = stage.stageWidth * 0,5; //skifte i x m.ty = stage.stageHeight * 0,5; //skifte i y m.a = 2; m.c = 0; m.b = 0; m.d = 1; Var d: DottedBox = new DottedBox (); //opprette egendefinerte grafiske addChild (d); d.transform.matrix = m //gjelder matrisen på vår grafiske}}
Trinn 11: Scaling X og Y
grid etter omleggingen.)
orientering forvandlet y-aksen og samtidig opprettholde den x-aksen
retningen på begge akser helt
Trinn 14:. Rotation
Var en: Number = 0,25 * Math.PIm.a = Math.cos (a); m.c = -1 * tak i Math.sin (a); m.b = tak i Math.sin (a); md = Math.cos (a);
Trinn 15: Søknad
Visning av en isometrisk pseudo-3D-verden
private Var f1: Fisk, m.: Matrix, private Var disp: Point, private Var axisX: Point, axisY: Point; offentlig funksjon FakeIso () {disp = new Point (stadium .stageWidth * 0,5, stage.stageHeight * 0,5); m = new Matrix (); m.tx = disp.x; m.ty = disp.y; //fortrenge til sentrum av scenen f1 = new Fish (); addChild (f1); f1.transform.matrix = m; //gjelder transformasjon til på fisk axisX = new Point (1, 0); //vektor for x - aksen axisY = new Point (0, 1); //vektor for y - aksen stage.addEventListener (MouseEvent.MOUSE_DOWN, start); //Start samhandling stage.addEventListener (MouseEvent.MOUSE_UP, end); //end interaksjon} privat funksjon start (e: MouseEvent): void {f1.addEventListener (Event.ENTER_FRAME, oppdatering);} private funksjon enden (e: MouseEvent): void {f1.removeEventListener (Event.ENTER_FRAME, oppdatering); } private funksjon oppdateringen (e: Hendelses): void {axisX.setTo (mouseX - f1.x, mousey - f1.y); //bestemme retningen (men omfanget endret i tillegg) axisX.normalize (1); //fix omfanget av vektor med ny orientering til en enhet apply2Matrix (); //gjelder matrise på fisk} privat funksjon apply2Matrix (): void {m.setTo (axisX.x, axisX.y, axisY.x, axisY.y, disp.x, disp.y); f1.transform.matrix = m;}
Trinn 16: Legg Keyboard Kontroll
velo = new Point (1, 0).; //velo vil bli brukt for å definere x-axisaxisY = new Point (0, 1); delta_positive = new Matrix (); delta_positive.rotate (Math.PI * 0,01); //positive rotationdelta_negative = new Matrix (); delta_negative.rotate (Math.PI * -0,01); //negative rotasjon
privat funksjon keyUp (e: KeyboardEvent): void {if (e.keyCode == Keyboard.LEFT) {velo = delta_negative.transformPoint (velo) //rotere velo mot klokken} else if (e.keyCode == Keyboard.RIGHT) {velo = delta_positive.transformPoint (velo) //rotere velo klokken}}
privat funksjon oppdateringen (e: Hendelses): void {var front_side: Boolean = velo.x > 0 //sjekker for forsiden av fisk if (front_side) {f1.colorBody (0x002233,0.5)} //farge forsiden av fisk annet f1.colorBody (0xFFFFFF, 0,5) //hvit brukes på baksiden av fisk disp = disp.add (velo); //oppdatere gjeldende forskyvning med hastighet Var velo_norm: Point = velo.clone (); //i tilfelle velo > 0, må vi beregne en måleenhet for x. velo_norm.normalize (1); //oppmerksom på at x-aksen mer enn en vil utføre skalering. Vi ønsker ikke at for nå m.setTo (velo_norm.x, velo_norm.y, axisY.x, axisY.y, disp.x, disp.y); f1.transform.matrix = m;}
Trinn 17:. Din Fish
< hr>
Steg 18: En annen Keyboard Kontroll
privat funksjon keyUp (e: KeyboardEvent):. void { if (e.keyCode == Keyboard.LEFT) {velo = delta_negative.transformPoint (velo)} else if (e.keyCode == Keyboard.RIGHT) {velo = delta_positive.transformPoint (velo)} if (e.keyCode == Keyboard.UP) {axisY = delta_negative.transformPoint (axisY)} else if (e.keyCode == Keyboard.DOWN) {axisY = delta_positive.transformPoint (axisY)}}
Var front_side. Boolean = velo.x * axisY.y > 0if (front_side) {f1.colorBody (0x002233,0.5)} else f1.colorBody (0xFFFFFF, 0,5)
Trinn 19: Din No-So-Regular Fish
Konklusjon