Denne tutorial vil være en kort gennemgang af den matematik der kommer til at lægge til grund for de Math tutorials der kommer til at følge her på FlashForum.dk.
Idéen med denne tutorial eller gennemgang er at lave en reference som du kan vende tilbage til og se de formler og beskrivelser som du måtte støde på senere. – en mini-reference til de anvendte begreber og formler.

Koordinatsystemet i flash.

En af de vigtigste ting når vi skal placere noget på vores scene i flash er vores mulighed for at give det x og y værdier. Men som du sikkert allerede vil have bemærket er det en smule anderledes koordinat system end det du sikkert kender fra skolen. Normalt er er y værdierne faldende på den lodrette nedadgående akse, og modsat stigende på den lodret opadgående akse. Men i flash forholder dig sig stik modsat. Det er en væsentlig forskel, især når man skal udregne stigende eller faldende grader i trekanter.

Videre er 0,0 punktet placeret helt oppe i øverste venstre hjørne, hvor vi også er vant til at det er placeret i midten eller i det mindste i nederste venstre hjørne. Men når man først har disse uligheder i mente, er det ikke noget problem at bruge koordinatsystemet i flash på lige fod med det velkendte koordinatsystem.


Figur 1 Normalt kooridnatsytem hvor de to akser er stigende i pilenes retning (op og hen ad).


Figur 2 Koordinatsystem i flash hvor 0,0 er i øverste venstre hjørne, og anden aksen (y aksen ) er stigende ned ad.

Grader og radianer:

Begrebet grader er velkendt af de fleste, i hvert fald kan de fleste uden større visualisere når noget er 90 grader i forhold til noget andet. Videre ved de fleste også at 180 grader er en halv omgang i en circle og 360 er hele vejen rundt.

Men hvad med radianer? Når vi taler flash får vi brug for både grader og radianer. Det forholder sig sådan at målingen i grader bruges i forhold til de grafiske værktøjer og også et givent objekts rotation på scenen, hvorimod radianer bruges i den kodemæssige udregning af cirkler og vinkler.

Og hvad er radianer så? En radian er ca. 57 grader, nærmere bestemt 57.2957795130823 grader og der går 6.28318530717959 radian på en cirkel . Puha det var da noget at huske på, og giver det overhovedet mening? Ja, det gør det faktisk. Hvis vi kan vende os til at se en cirkel i radianer, frem for grader, behøver vi kun at kende omskrivnings faktoren for radianer til grader og omvendt, for at kunne bevæge os frit mellem de to typer af måleenheder.

Inden jeg gennemgår selve formlen for omregning mellem de to, vil jeg komme lidt nærmere ind på hvad radianer er, eller måske mere præcist hvad radianer står i forhold til. Måske har det matematiske geni allerede set at det førstnævnte antal radianer der er i en cirkel ser interessant ud.
Hvis vi dividere antal radianer i en cirkel med 2 får vi tallet 3.14159265358979, og hvis dette stadig ikke ser bekendt ud, så kan jeg fortælle at det er tallet (eller ca. tallet) for den matematiske konstant kaldet PI. Ah-ha.

Vi kan altså pludseligt bruge PI i stedet for de mærkelig skæve radian tal:
En cirkel hele vejen rundt er altså det samme som 2 PI og en halv cirkel på 180 grader er 1 PI, 90 grader er en halv PI og så videre og så videre.
Derfor kan vi sige at forholdet mellem grader og radinar er forholdet mellem PI (en halv cirkel i radianer) og 180 (en halv cirkel i grader)
Derfor kommer omskrivnings formlerne til at se sådan ud.
(jeg har valgt at skrive dem som de ser ud når de skrives i flash)

1

2


var radian:Number = grader*Math.PI/180;

var grader:Number = radian *180/Math.PI;

Disse to formler kommer vi til at bruge igen og igen i de følgende tutorials når vi skal omskrive en beregning til reelle grader et objekt skal drejes eller flyttes til.

Trekanter:

Når vi arbejder med objekter i et koordinatsystem som vi gør det i flash, kan vi ofte finde stor nytte i brugen af trekanter. Hvis vi f.eks. har et objekt, og gerne vil finde ud af hvor langt vi skal gå ud af x aksen og op af y aksen, ja så er det i virkeligheden langsiden på en trekant vi ønsker at kende:


Figur 3 En bold der ønsket flyttet på x aksen og på y aksen til et nyt punkt.

Får at vi kan få et objekt til at flytte sig naturligt langs den lange linie i trekanten, også kaldet hypotenusen, hvis nogen kan huske det fra deres matematiktimer, så er vi nød til at kende den ratio, eller forholdet mellem x stykket og y stykket.. Det kan vi gøre ved at tage udgangspunkt i det koordinat vores objekt befinder sig på, og det koordinat vi gerne vil have det hen til.

Lad os i eksemplet antage at vores bold er på koordinatet x 100 og y 100 (100,100), og vi gerne vil have at bolden skal hen på x 250 og y 300 (250,300).
Hvis vi bare skriver det i vores action script bliver det ikke en særligt spændende animation, da vores bold blot vil være på det nye koordinat med det samme, uden nogen tween i mellem stat og slut. – og det skulle jo gerne være pointen med at bruge tid på at lave det i action script; at det bliver en naturlig bevægelse for bolden.

Derfor kan vi udregne det delta, altså det mellemstykke der er mellem de to x’er og de to y’er.
Hvis vi kalder vores udgangspunkt for (x1,x2) og vores slut punkt for (x2,y2) kan vi finde deltaX og deltaY sådan:

1

2


deltaX = x2 – x1;

deltaY = y2 – y1;

Nu har vi de to liniestykker som er i billedet ovenfor, og nu vil vi gerne bruge dem til at udregne den hvordan vi får bolden til at flytte sig langs den stiplende linie. Det gør vi ved at finde ration, altså forholdet mellem de to delta stykker:
var ration = deltaY / deltaX;

Vi dividere altså deltaY med deltaX, så vi kan bruge rationen og siger: ”hver gang vi bevæger os x enheder ud af x-aksen, skal vi flytte os x * ratio på y aksen”.

Ikke nok med at vi kan finde forholdet eller rationen mellem x aksen og y aksen vi kan også finde selve længden på den stiplende linie. De fleste har sikkert hørt om pythagoras og hans lærersætning om trekanter?! For dem der ikke har, eller lige skal have den opfrisket kommer den her.
”om en trekants liniestykker kan siges: a2*b2 = c2 ” (a i anden gange b i anden er lig med c i anden);
Det vil sige at vi kan bruge vores delta stykker igen:
c2 = (deltaX*deltaX)+(deltaY*deltaY)
Nu står vi med længden på den stiplede linie. – men i anden potens, det vil sige at det tal vi står med er længden ganget med sig selv. Men det er jo ikke noget problem, for når vi skal modsatte vej af potens, eller noget ganget med sig selv, så kan vi blot tage kvadratroden, og så har vi det tal der var udgangspunktet. I flash ser det sådan ud:

var c = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
Var det en hård omgang? Lad os hoppe et øjeblik væk fra de tunge udregninger og se på hvad vi ellers kan bruge trekanter til.

Sinus Cosinu og Tangens

Jeg vil kun berøre emnerne omkring sinus, cosinus og tanges let her, og vende tilbage til dem ved senere lejlighed i en mere avanceret gennemgang af de matematiske funktioner og beregninger vi kan bruge i flash.

De fleste har leget lidt med at måle graderne i en trekant, og er sikkert også støt på betegnelsen sinus og cosinus. Math klassen i flash har også både sinus, tangens og cosinus som funktioner, og de er utroligt anvendelige når man skal finde forholdet mellem to liniestykker eller sider i en trekant. Det kræver at man har et grad - tal at regne ud fra.

Ud fra det grad - tal kan vi finde ud af ratioen mellem to linie stykker i en tre kant, det vil sige vi kan f.eks. finde forholdet mellem x og y som vi brugte oven for, hvis vi kender antal grader.

De tre forhold vi kan måle i en trekant med sinus cosinus og tangens


Figur 4 Kan du finde en fejl på tegningen??

Når vi ved at koordinatsystemet er modsat i flash, må det jo være – 45 grader når vinklen går op ad på y aksen. – det er værd at huske når man skal udregne grader i flash.

Sinus af en vinkel er forholdet mellem modstående og hypotenusen (modstående / hypotenusen)
Cosinus af en vinkel er forholdet mellem hosliggende og hypotenusen (hosliggende / hypotenusen)
Tangens af en vinkel er forholdet mellem modstående og hosliggende (modstående / hosliggende)

Hvis man skal fortolke det lidt frit, og med fare for at få alle landets matematikere på nakken kan man sige at sinus bruges til at udregne forholdet for et objekt på y aksen, cosinus bruges til forholdet på x aksen og tangens bruges til forholdet mellem x og y.

Hvis du skulle have bemærket det så netop tanges har vi faktisk haft fat i før. Vi udregnede jo tidligere forholdet mellem deltaY og deltaX, altså de to liniers længde, og fik derved den ratio vi kunne bruge til at flytte vores bold på den stiplede linie eller rettere langs hypotenusen. Vi udregnede således: ration = deltaY / deltaX, og hvis vi kigger på tanges så er det faktisk det samme tal vi får, for formlen for tanges af en vinkel er jo netop modstående (deltaY) / hosliggende (deltaX).

Nu kan du både finde forholdet mellem x og y ved hjælp af to punkter og ved hjælp af grader.
Der er kun én ting at bemærke til det, og det er når vi har et grade antal skal vi selvfølgelig have det omformet til radianer før vi smider det ind i vores sin, cos eller tangens funktion.

1
2

var yRatio = Math.sin(45 * Math.PI/180);
var xRatio = Math.cos(45*Math.PI/180);

Omvendte sinus, cosinus og tanges funktioner.

Du troede måske lige at vi var færdige med sinus og trekanterne?? – ikke helt. Vi skal lige have en sidste smart ting med. Når vi snakker sinus, cosinus og tanges har vi også muligheden for at gå den anden vej.
Det vil sige at vi også ud fra et ratio tal, kan få antal radianer eller grader for en given vinkel. Den mest interessante i denne sammenhæng er Math.atan og Math.atan2 som er den modsatte eller omvendte tangens funktion. Som vi så ovenfor er tangens forholdet mellem modstående og hosliggende eller overført til vores brug; forholdet mellem deltaY og deltaX. Når vi går den anden kan vi altså ud fra det tal vi får ved at dividere deltaY med deltaX finde det grad tal der er i den trekant vores objekt befinder sig i. Hvis det hele virker lige ulogisk så forestil dig dette. Vi har en pil på scenen, og vi vil gerne have at pilen drejer sig efter hvor vi har vores mus. Pilen skal ikke flytte sig men kun dreje ved at vi stiller på pilens _rotation parameter. Har kan vi bruge den omvendte tangens funktion.


Figur 5

Hvis vi i eksemplet har en funktion der hele tiden tester hvor vores _xmouse og _ymouse koordinator befinder sig (det er koordinatet for hvor brugerens mus er) så kan vi forestille os en usynlig trekant som den på billedet. Vi kan finde deltaY og deltaX ved at bruge ovenstående udregning af pilens koordinat og vores musekoordinat, men vi vil gerne have pilen til at dreje et antal grader så den peger sin spids op mod brugerens mus. Har kan vi så bruge atan (eller rettere atan2 forklaring følger) til at finde vores grad/radian tal i trekanten og så dreje pilen.

Hvorfor atan2?

Grunden til at der er en atan2 funktion er, at der i flash vil være tvivl om hvis man drejer f.eks. 26 grader om det er det ene eller det andet sted. – jeg er ikke specialist inden for dette område, men kan kun sige at det giver et problem hvis man gerne vil kunne dreje et objekt hele vejen rundt når man bruger atan.


Figur 6

Derimod kan man bruge atan2 som giver et bedre tal til brug for en rotation


Figur 7

Billedet viser atan2 to hvor man i stedet for at få det relative grad tal, får det absolutte grad tal på – 154 i stedet for 26 når man skal dreje.

Hvis du ikke helt forstå ovenstående, skal du ikke bryde dit hoved yderligere over det, men bare huske at bruge atan2 i stedet for atan. – som du kan se har jeg selv ikke brugt meget tid på at sætte mig ind i forskellen, da det vigtigste kun er at vide at der er en forskel.
Atan2 funktionen tager 2 parametre for at kunne bedømme den reelle vinkel: y og x. Det fantastiske er at de to parametre kender vi allerede for det er nemlig vores deltaY og vores deltaX som atan2 gerne vil have.

Det sidste jeg kort vil komme ind på, inden du er klar til at gå i krig med de basale matematik tutorials er velocitet og acceleration. Nå vi skal lave naturlige animationer i flash har vi brug for at bestemme et objekts velocitet. Mange forbinder velocitet med hastighed eller fart, men det er kun den ene del af velocitet. Den anden og lige så vigtige er retning. Derfor kan vi altså sige om velocitet at det er en retningsbestemt hastighed. – eller endnu mere dansk det er fart i en bestemt retning. I brugen i flash vil veocitet ofte være et udtryk i pixels per frame (ppf) hvor vi flytter vores objekt et givent antal ppf på både x og y aksen.

Et eksempel:

1

2

3

4

5

6

7

8


var vx:Number = 5;

var vy:Number = 4;

 

bold.onEnterFrame = function ()
{

  bold._x += vx;

  bold._y += vy;

}

I eksemplet lægger vi altså vores velocitet for x og y til boldens x og y positioner.

Faktisk finders der et begreb for en sådan retning med en given størrelse, nemlig vektor.
En vektor en er retning med en størrelse eller størrelsesorden. Og hvis vi overfører vektor til velocitet bliver denne størrelse til hastighed, en retning med hastighed.


Figur 8

Her ses tre vektorer med hver deres størrelse og hver deres retning. Hvis man lægger dem sammen får man den samlede størrelse og retning, og det er den vi er interesseret i, når vi skal flytte et objekt i flash.

Men hvordan hænger det sammen med alt det om trekanter, sinus og cosinus??


Figur 9

Hvis vi igen forestiller os at vi har en bold som vi ønsker at flytte til et andet koordinat som ligger 3 pixels væk, og vi ved at vinklen er 45 grader, altså størrelsen på vektoren er 3 og retningen er 45, så kan vi bruge vores formler fra tidligere og lave denne vektor om til velocitet.

Udregningen kommer til at se sådan her ud når vi omregner vores vektor, med en hastighed på 3 og en retning på 45 til velocitet på x aksen og på y aksen. Som nævnt før bruger vi cos til at udregne forholdet på x aksen og sin til at udregne forholdet på y aksen.

1

2


var vx = Math.cos(45* Math.PI/180)*3;

var vy = Math.sin(45*Math.PI/180)*3;

Det der sker inde i parenteserne er selvfølgelig at vi omskriver vores 45 grader til radianer ved at bruge den tidligere gennemgåede formel.

Nu kan vi altså tage vores vx og vy variabler og tillægge dem vores objekst x og y position lige som før.

Formlen:

1

2


vx = Math.cos(vinkel i radianer)* hastighed;

vy = Math.sin(vinkel i radianer)* hastighed;

Hvad med acceleration?

Nu hvor vi har bestemt en retningsbestemt hastighed (velocitet) så kan vi også tale om en acceleration. Det kunne være et rumskib der hver gang vi trykker på pil-op tasten får lagt lidt til sin fart.
Rent praktisk vil det fungere sådan her i koden.
Vi har vores vx og vy fra før som er den retnings hastighed vi lægger til hver gang.
Og hvis vi så forestiller os at vi har en ax og en ay variabel til at holde vores acceleration så kan vi altså starte med at lægge ax til vx og ay til vy inden disse bliver lagt til vores objekts x og y værdier.
På den måde kan vi også tale om at en acceleration kan være minus, og på den måde gøre vx og vy mindre og dermed sænke farten på vores objekt.

Et eksempel:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27


var vx = 5;

var vy = 5;

var ax = .2;

var ay = .2;

 

bold.onEnterFrame = function()
{

  if(Key.isDown(Key.UP))

  {

    vy -=ay;

  }

  else if(Key.isDown(Key.DOWN))

  {

    vy += ay;

  }

  if(Key.isDown(Key.LEFT))

  {

    vx -=ax;

  }

  else if(Key.isDown(Key.RIGHT))

  {

    vx += ay;

  }

  

  bold._x += vx;

  bold._y += vy;

}

På den måde tester vi altså for om brugeren har pilene trykket ned, for at vores objekt kan skifte acceleration i den passende retning. Prøv selv at indtaste ovenstående kode og lav et objekt på scenen du kalder bold… det bliver pludseligt meget mere naturligt når bolden animeres rundt på skærmen. – det føles nu som om at den skal bremses ned, før den kan skifte retning, og rent teoretisk er det faktisk også det der sker.

I de følgende tutorials ser vi på hvordan vi også kan lege med at tilføje friktion, vind, bounce og en masse andre sjove ting der bygger på samme princip.
Nu vil jeg heller ikke holde på dig længere, men i stedet lade dig komme til at bruge de forskellige funktioner så du kan få set hvordan de virker i praksis.
Du kan vende tilbage til denne gennemgang hvis du ikke kan huske hvad de forskellige ting er, og hvordan de bruges i forhold til hinanden.

God fornøjelse.