Math Basic 2: Den Efterfølgende Pil

Husk at du kan finde en gennemgang af de brugte termer og begreber i "Introduktion til Math i Flash".

Pre Script

I sidste uges tutorial Den Drejende Pil fik vi hul på hvordan vi bruger tangens eller rettere den omvendte tangens funktion Math.atan2 som gav os den vinkel vi gerne vil dreje vores pil til, målt i radianer. – radianer vi derefter kunne omskrive til grader og bruge til at rotere pilen.

Introduktion

I denne uges tutorial ”Den Efterfølgende Pil”, tager vi fat hvor vi slap og prøver at tilføje to fysiske omstændigheder til vores pil. Den første ting vi vil se på er velocitet, altså retningsbestemt hastighed, og hvordan vi kan arbejde med at justere denne retningsbestemte hastighed ved hjælp af sinus og cosinus funktionerne i Math klassen.
Den anden ting vi vil se på efter vi har tilføjet velocitet, er acceleration, og hvordan vi kan tilføje en stigende eller faldende acceleration til vores objekts bevægelse ud fra f.eks. afstanden mellem objektet og vores mus’ position.

Teorien

Når vi i en trekant kender vinklen mellem hypotenusen og den hosliggende kan vi bruge denne vinkels mål i radianer til at få forholdet mellem hypotenusen og den hosliggende samt forholdet mellem hypotenusen og den modstående kant i trekanten. Det vil med andre ord sige at vi kan få forholdet mellem hypotenusen altså retningen på pilen, og den hosliggende, altså x- aksen, samt forholdet mellem retningen på pilen og den modstående, altså y- aksen.

Vi kan bruge denne ratio til at udregne videre på vores vektorer, som i vores tilfælde er velocitet; retningsbestemt hastighed.

Hvis vi fastsætter en hastighed (hvor mange pixels) vi ønsker vores pil skal flytte sig med langs hypotenusen, kan vi ud fra ratioen på x og y aksen bestemme hvor meget pilen skal flyttes på x og på y for at give os en den ønskede bevægelse (hastighed i pixel per frames) langs hypotenus.

Men inden vi drukner helt i teoretisk matematik må vi hellere hoppe over i Flash og begynde at lege lidt med sagerne.

Velocitet

Da vi arbejder videre på koden fra ”Den Drejende Pil” vil koden der får pilen til at dreje ikke blive gennemgået her. Du kan selv lave noget grafik, eller hente den fla fil vi arbejder ud fra her, som allerede indeholder koden der drejer pilen efter musen.

Ude på scenen har vi allerede vores pil, og det er fortsat det eneste vi skal bruge. Så vi kan gå direkte ind på vores Action Script frame og åbne panelet hvor vores kode er.

Det første vi skal have deklareret er 3 nye variabler.

Den første er den hastighed/antal pixel vi ønsker vores pil skal flyttes med langs hypotenusen hvert frame. I dette tilfælde har jeg givet den hastigheden 3, men dette tal er helt op til dig selv, og prøv endelig forskellige muligheder af, og se hvilken effekt det giver for animationen.
var speed:Number = 3;

De næste variabler vi skal bruge er en til at holde vores samlede velocitet for x og en til den samlede velocitet på y aksen. Da velociteten på de to akser jo hele tiden ændrer sig, definere vi ikke nogen værdi i variablerne her.

1 2	var vx:Number; var vy:Number;

Det var alt hvad vi skulle bruge af variabler for at tilføje velocitet til vores pil. Nu kan vi hoppe lidt længere ned og ind i vores drejPil funktion som vi også vil bruge til at flytte vores pil.

Da vi i ”drejPil” funktionen allerede har udregnet hvor mange radianer vinklen er på, kan vi bruge denne variabel igen til at udregne vx og vy. Som nævnt i "Introduktion til Math. i Flash" bruger vi Math.cos til udregning på x aksen og Math.sin til y aksen. Derfor ser de første tilføjede linier sådan ud:

1 2	vx = Math.cos(radianer)speed; vy = Math.sin(radianer)speed;

- vi udregner altså forholdet på de to akser og ganger dette forhold med vores hastighed. På den måde opnår vi at få to vectorer som tilsammen giver en bevægelse på 3 pixel langs hypotenusen.

Da vi i vores tilfælde bruger vectorerne som velocitet (retninger med hastighed) skal de tilføjes vores objekts x og y egenskaber

1 2	pil._x += vx; pil._y +=vy;

Den samlede kode ser sådan her ud:

/***********************************************************
*     Matematisk Mandag

*     Basic 2: "Den Efterfølgende Pil"

*     -Velocitet

*     <a href="http://www.flashforum.dk" title="www.flashforum.dk">www.flashforum.dk</a> (flashger)

***********************************************************/

/**********************************************************

* VIGTIGE FORMLER I DENNE TUTORIAL:

* grader = radianer* 180/PI

* vinklen i en trekant = Math.atan2(deltaY,deltaX)

* forholdet mellem hypotenusen og hosliggende = Math.cos(vinkel i radian)

* forholdet mellem hypotenusen og modstående = Math.sin(vinkel i radian)

**********************************************************/

 

//--------------------VARIABLER---------------------------

//for at drejer vores pil:

var pil:MovieClip = _root.pil;

var deltaX:Number;

var deltaY:Number;

var radianer:Number;

var grader:Number;

 

//til at efterfølge vores musekoordinat:

var speed:Number = 3;

var vx:Number = 0;

var vy:Number = 0;

 

 

 

//--------------------EVENT HÅNDTERING--------------------

pil.onEnterFrame = drejPil;

 

 

//-----------------EKSEKVERENDE FUNKTION-------------------

function drejPil():Void

{

  //Koden der drejer pilen mod musen

  deltaX = _xmouse - pil._x;

  deltaY = _ymouse - pil._y;

  radianer = Math.atan2(deltaY,deltaX);

  grader = radianer*180/Math.PI;

  pil._rotation = grader;

  

  //koden der udregner vores velocitet

  vx = Math.cos(radianer)*speed;

  vy = Math.sin(radianer)*speed;

  pil._x += vx;

  pil._y += vy;

  

}

Et fungerende eksempel
Den færdige fla fil

Acceleration

Jeg nævnte i starten at vi ville se på én ting til i denne tutorial: nemlig tilføjelse af acceleration på en bevægelse.
Kort beskrevet er acceleration tilføjelse til en vectores længde, eller omskrevet til vores velocitet: tilføjelse af hastighed til en allerede defineret retningsbestemt hastighed. Denne forøgelse sker i forbindelse med acceleration ikke kun én gang, men forekommer igen og igen og derfor øges eller mindskes hastigheden hele tiden. Når man taler om acceleration giver det mening også at tale om minus acceleration; det vil i teorien betyde at en vector bliver kortere og kortere for til sidst at skifte retning til det modsatte. Rent praktisk vil det betyde at et objekts fart bliver mindre og mindre indtil det et øjeblik står stille og herefter begynder at bevæge sig modsatte vej.

For at vi i vores eksempel har mulighed for hele tiden at tilføje acceleration til vores velocitet, er vi nød til at ændre en lille smule på den måde vi har opbygget vores udregning på.
Hvis vi blot lægger acceleration til vx og vy inde i ”drejPil” vil det kun svare til at vi havde sat vores ”speed” variabel lidt højere. - dette er på grund af at funktionen kaldes igen og igen, og derfor bliver vx og vy hele tiden nulstillet og gemmer altså ikke tidligere tillagt acceleration.

Vi er nød til at gemme vx og vy uden for funktionen. Ment på den måde at de ikke må nulstilles eller udregnes hver gang vores ”drejPil” kaldes.
Det klare vi ved at oprette to nye variabler:

1 2	var ax:Number; var ay:Number;

Disse to gør de ud for acceleration på x og acceleration på y akserne.
Vi ændre også vores speed variable til et mere sigende navn ”force” altså kræft, for at symbolisere den kræft vores objekt drives frem med. Samtidig skal vi have sat ”force” til et mere moderat tal, da vi ellers vil få svært ved at følge vores objekt
var speed:Number = 3;

- bliver altså til:
var force:Number = .3;

Grunden til at vi kun skal have en force på 0.3 er at vi jo hele tiden øger velociteten med "force", og derfor vil vi hurtigt komme galt (eller rettere HURTIGT) af sted hvis ”force” er for høj.

Inde i vores ”drejPil” ændre vi følgende sætninger:

1 2	vx = Math.cos(radianer)speed; vy = Math.sin(radianer)speed;

Til:

1 2	ax = Math.cos(radianer)force; ay = Math.sin(radianer)force;

Vi gemmer altså en accelerations factor som pilen skal accelerere langs hypotenusen udregnet på baggrud af cosinus og sinus I ax og ay.

Det næste vi gør er at tillægge denne accelerations faktor til vores velocitet:

1 2	vx += ax; vy += ay;

På den måde ændres vores vx og vy altså hele tiden men nulstilles aldrig.

Det sidste vi allerede gør i funktionen; det at føje vx og vy til vores objekts x og y egenskab, skal vi stadig gøre for at vores objekt kan reagere på vores tilføjelser.

Den samlede kode ser således sådan ud:

/***********************************************************
*     Matematisk Mandag

*     Basic 2: "Den Efterfølgende Pil"

*     -Acceleration

*     <a href="http://www.flashforum.dk" title="www.flashforum.dk">www.flashforum.dk</a> (flashger)

***********************************************************/

/**********************************************************

* VIGTIGE FORMLER I DENNE TUTORIAL:

* grader = radianer* 180/PI

* vinklen i en trekant = Math.atan2(deltaY,deltaX)

* forholdet mellem hypotenusen og hosliggende = Math.cos(vinkel i radian)

* forholdet mellem hypotenusen og modstående = Math.sin(vinkel i radian)

**********************************************************/

 

//--------------------VARIABLER---------------------------

//for at drejer vores pil:

var pil:MovieClip = _root.pil;

var deltaX:Number;

var deltaY:Number;

var radianer:Number;

var grader:Number;

 

//til at efterfølge vores musekoordinat:

var force:Number = .3;

var vx:Number = 0;

var vy:Number = 0;

 

//til acceleration af pilen:

var ax:Number;

var ay:Number;

 

 

//--------------------EVENT HÅNDTERING--------------------

pil.onEnterFrame = drejPil;

 

 

//-----------------EKSEKVERENDE FUNKTION-------------------

function drejPil():Void

{

  //Koden der drejer pilen mod musen

  deltaX = _xmouse - pil._x;

  deltaY = _ymouse - pil._y;

  radianer = Math.atan2(deltaY,deltaX);

  grader = radianer*180/Math.PI;

  pil._rotation = grader;

  

  //koden der udregner accelerations faktor

  ax = Math.cos(radianer)*force;

  ay = Math.sin(radianer)*force;

  vx += ax;

  vy += ay;

  

  //tilføjelse af velocitet

  pil._x += vx;

  pil._y += vy; 

}

Et fungerende eksempel
Den færdige fla fil

Prøv at lege lidt med at indstille ”force” parameteret for at finde den mest naturlige og glidende animation. - du kan eventuelt prøve at lave en forceX og en forceY med forskellige værdier, for at se hvordan det ville arte sig.

I næste tutorial ser vi på hvordan vi dynamisk kan styre velociteten ved at føje positiv eller negativ acceleration til.