Aplicació de funcions trigonomètriques per controlar els moviments i les orientacions dels clips de pel·lícula  
 

 
 
   En aquesta tercera pràctica del mòdul 5, aplicareu les funcions trigonomètriques sin(), cos(), atan2() de l'objecte Math  
      
 

L'objecte Math us permetrà accedir tant a funcions matemàtiques com a constants (PI). En realitat, podeu considerar aquestes funcions com a mètodes de l'objecte Math, però també sabeu que aquest objecte pot tenir constants. Aquestes es poden distingir dels mètodes perquè s'escriuen amb majúscules i no necessiten paràmetres.

Aquestes funcions trigonomètriques solucionen molts problemes que es presenten en la programació de moltes aplicacions, sobretot en jocs que, en moltes ocasions, impliquen deteccions de canvis de direcció, girs...

Un exemple seria calcular la distància que pot recórrer una nau en qualsevol de les direccions d'acord al seu grau de rotació.

Les pràctiques que a continuació desenvolupareu poden servir, també, per veure el caire pràctic i funcional que poden tenir les matemàtiques, especialment, la trigonometria.

 
      
       
   Desenvolupament de la pràctica  
     
Determinació d'un angle amb atan2()  
   
 

Flash inclou una funció trigonomètrica que us permetrà determinar l'angle d'un vèrtex d'un triangle rectangle o qualsevol punt determinat que pugui formar un triangle virtual entre el punt, l'horitzontal i la posició de l'altre objecte.

Aquesta funció és una millora de la funció atan() (o arctangent). La funció atan2() està més pensada per treballar amb les coordenades de l'escenari de Flash.

Com sabeu, en Flash, l'eix de coordenades es diferencia del cartesià en el fet que els valors de la coordenada Y es redueixen en pujar. A la imatge 1 podeu observar gràficament aquesta afirmació.

Aquesta funció ha resolt, també, el treball feixuc per als matemàtics de controlar el sentit del gir en els angles, ja que, en cas de gir en el sentit contrari de les agulles d'un rellotge, els angles es van sumant, però les seves funcions trigonomètriques poden adquirir valors negatius segons el quadrant on finalitzin. Atan2() elimina aquest problema fent molt més fàcil la tasca de programació, ja que no heu de tenir en compte el signe del gir ni el signe corresponent de les coordenades.

Aquest fet fa que sigui més fàcil l'ús de la funció atan2() per determinar l'angle d'un vèrtex d'un triangle rectangle que la clàssica funció atan(), tan utilitzada en programació amb altres llenguatges.

Amb la funció atan2() veureu, doncs, que els problemes es redueixen. Només es necessita especificar dos paràmetres: un per al valor de Y i un altre per al valor de X.

 
 

  

 
 
 
 
 Imatge núm. 1
 
 
  
 
      

 

 

 

 

» Per veure un exemple d'aplicació d'aquesta funció, creeu una pel·lícula nova. La idea és crear una simulació d'un clip que s'orienta en la direcció i sentit d'un altre clip.

Observeu la pel·lícula següent per veure un exemple. Proveu de moure el peix o el mosquit i veureu els canvis d'orientació aconseguits amb aquesta funció.

  

 
     

» Creeu dos clips de pel·lícula i inseriu a cada clip un botó amb la finalitat que es puguin arrossegar per l'escenari.

» Anomeneu, com a nom d'instància, peix i mosquit, respectivament, als dos clips creats.

» Doteu els dos clips de les accions necessàries perquè es puguin arrossegar per l'escenari.

Programareu un clip d'aquests perquè s'orienti dinàmicament cap al segon clip. Com ja s'ha vist en altres pràctiques, és un bon costum organitzar el codi en un clip a part, fora de l'escenari, que controli les accions dels altres. Seguiu utilitzant aquesta tècnica d'organització de codi.

» Creeu un altre clip fora de l'escenari i inseriu aquest codi:

 
     

onClipEvent (enterFrame) {

//Primer bloc
var disty = _root.mosquit._y-_root.peix._y;
var distx = _root.mosquit._x-_root.peix._x;

// Segon bloc
var gir_radians = Math.atan2(disty, distx)
var gir_graus= gir_radians*(180/Math.PI);
_root.peix._rotation = gir_graus;

}

 
    
 

Amb aquest exemple, cada vegada que entri un marc, s'executaran els dos blocs de codi.

En el primer bloc de codi, es calcula la distància entre les coordenades dels dos clips de pel·lícula. A tal efecte, es creen les variables locals disty, distx, que us serviran per emmagatzemar el valor de la distància entre els dos clips i, depenent de la posició dels clips, aquest valor pot ser positiu o negatiu, però, com ja s'ha dit, no us heu de preocupar, ja que la funció atan2() us allibera de fer les conversions a valors absoluts de les distàncies.

En el segon bloc, es posa com a contingut de la variable gir_radians el valor retornat en radiants de l'angle que hi ha entre aquests dos clips utilitzant la distància entre ells. Com que la propietat _rotation treballa amb graus, s'ha de convertir l'angle que us retorna la funció matemàtica de radiants a graus.

Per aquesta raó, la penúltima línia de codi s'encarrega d'aquesta conversió.

Finalment, s'aplica la rotació necessària al clip de pel·lícula utilitzant aquest valor en graus.

Proveu d'arrossegar la vostra pel·lícula per comprovar el funcionament correcte similar a la pel·lícula de demostració.

Segur que us ha agradat l'efecte aconseguit en la pel·lícula que acabeu de crear i us animeu a complicar una mica més les coses afegint clips nous que es puguin orientar uns envers els altres, al vostre gust.

Com a exemple, s'ha afegit un tauró que vigila el peix que es vol menjar, mentre que el peix vigila l'insecte formant una xarxa atròfica. Arrossegueu cada animal i veieu el que fa l'altre.

 
       
 
      
  Funcions trigonomètriques: sin(), cos()  
 
A la pel·lícula següent s'utilitzen aquestes funcions per dirigir (no només orientar) el clip de pel·lícula i que es desplaci en direcció al clip de pel·lícula (mosquit) escollit, però, si arrossegueu el clip de pel·lícula objecte d'aquesta direcció cap al lloc de seguretat (cova), el peix s'orientarà buscant un altre objectiu. Si no ho aconseguiu, el peix se'l menjarà.
    
 
     
    
 

Com a exemple, es mostren unes línies de codi que fan primer l'orientació de l'objecte utilitzant la funció atan2() ja explicada amb anterioritat, i a continuació, incrementant les coordenades X, Y perquè l'objecte les vagi modificant anant cap a l'objecte (mosquit) amb un desplaçament que ve donat per la funció sin() i cos(), que us marquen la posició en què es mourà.

L'exemple és una aplicació petita aconseguida amb aquestes funcions, però, com a programadors, podeu desenvolupar moltes altres, i com a exemples d'idees, podríeu fer aplicacions de xarxes atròfiques de qualsevol medi o ecosistema on, de forma gràfica, qualsevol alumne/a pot entendre ràpidament qui es menja a qui, què passaria si falla una quantitat determinada d'individus augmentant o disminuint el nombre dels altres que formen la xarxa...

 
       
  El codi que permet aquest moviment orientat del peix és aquest:  
       
  disty = eval("_root.menjar"+_root.n)._y-_root.objeto._y;
distx = eval("_root.menjar"+_root.n)._x-_root.objeto._x;
_root.gir = Math.atan2(disty, distx)*180/(Math.PI);

_root.objeto._rotation = _root.gir;
_root.objeto._x = _root.objeto._x+Math.cos(Math.PI/180*_root.objeto._rotation)*9;
_root.objeto._y = _root.objeto._y+Math.sin(Math.PI/180*_root.objeto._rotation)*9;
 
      
  En aquest codi, podeu observar com, mitjançant les funcions sin() i cos(), es calcula la distància que ha de recórrer el peix tenint en compte l'angle de rotació.  
     
  En la propera pràctica, continuareu treballant amb aquestes funcions per crear altres aplicacions.  
     
  Podeu desar aquest exercici al vostre disc dur.