Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les bases Mathématiques

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Par didouche

Connaissances requises : Presque aucune.

Introduction

Avant de pouvoir faire de la physique à l’aide de Flash, nous avons besoins de certaines notions de mathématiques afin de pouvoir placer et déplacer des clips. Les voici donc résumées.

Repère

La position d’un point dans Flash est donnée par deux variables : Son abscisse _x (axe horizontal) et son ordonnée _y (axe vertical). Ces deux variables sont ce que l'on appelle les coordonnées du point.

La petite particularité par rapport à ce qu'on peut déjà savoir du sujet est que dans Flash, ainsi que très souvent en programmation, l’origine de ce repère (l’intersection de ces deux axes) c’est-à-dire le point de coordonnées (0,0) se situe dans le coin en haut et à gauche de la scène et que, par conséquent, l’axe des _y est orienté vers le bas.

Ceci est illustré par l’animation ci-contre.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Donc si l’on veut tracer une courbe mathématique dans Flash, il faut penser à inverser la valeur des ordonnées.

Lorsqu’on accède aux coordonnées d’un clip, elles sont toujours données relativement au clip qui le contient. En d’autres termes, si le clip est sur la scène, pas de problème mais si le clip (« clipB ») est placé dans un autre clip (« clipA »), les coordonnées obtenues décrivent la position de clipB dans le système de coordonnées de clipA, c’est-à-dire dans un repère ayant pour origine le point choisi lors de la création de ce clip (coin supérieur gauche, centre ……).

Pour ramener les coordonnées « locales » en coordonnées « globales » (c’est-à-dire relativement à la scène), on utilise la méthode localToGlobal() de MovieClip().
Dans l’animation suivante, le cercle est contenu dans le rectangle. On peut voir les deux systèmes de coordonnées qui s’affichent. Le point d’alignement de ces deux clips est dans le coin supérieur gauche. Cette méthode s’utilise en créant un objet (« monPoint ») et on enregistre les coordonnées du clip dans deux propriétés x et y. On applique la méthode au clip conteneur (car c’est dans son repère que sont exprimées les coordonnées) avec pour paramètre l‘objet monPoint. Ses propriétés x et y sont maintenant exprimées en coordonnées globales.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Voici le code:

rectangle.rond.startDrag(true); // on accroche le clip rond à la souris
var monPoint:Object=new Object(); // on crée un objet qui permet le passage des coordonnées.
onMouseMove=function(){
	monPoint.x=rectangle.rond._x;
        monPoint.y=rectangle.rond._y;
/* a chaque mouvement de la souris, on affecte les coordonnées de "rond" aux propriétés "x" et "y" de l'objet monPoint.*/
rectangle.localToGlobal(monPoint); 
/* on utilise la méthode localToGlobal() de MovieClip()pour le clip "rectangle" car c'est lui qui contient le clip "rond" */
trace(monPoint.x+"    "+monPoint.y);
/* les propriétés x et y de l'objet monPoint ont été converties par la méthode localToGlobal()
et indiquent maintenant la position du "rond" relativement à la scène.*/
}

Angles

Les angles sont aussi inversés pour la propriété _rotation de MovieClip() par rapport à vos souvenirs de Math dans lesquels le cercle trigonométrique était orienté dans le sens anti-horaire.
Il faut simplement penser à inverser les valeurs. L’animation suivante vous donne la valeur d’un angle donné par Flash et son équivalent dans le cercle trigonométrique. Notez que Flash manipule des angles compris entre -180 ° et + 180 °. Si vous affectez une valeur de _rotation dépassant cet intervalle il y sera ramené par Flash.
Exemple :

clip._rotation=270 ; 
trace(clip._rotation) ;

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Degrés et radians

Nous avons parlé d'angles et nous les avons exprimés en degrés (°) mais vous savez sûrement qu’il existe une autre unité de mesure des angles : le radian, lié à un nombre extrêmement connu : PI. PI est connu depuis très longtemps comme le rapport entre la circonférence d'un cercle et son diamètre. Sa valeur est approximativement 3,14. C’est une constante accessible dans Flash par la propriété PI de la classe Math(), donc

Math.PI;

La mesure des angles en radians est liée à cette propriété : un angle plat (180°) fait PI radians. Un tour complet (360°) équivaut donc à 2*PI radians. Cela donne une propriété intéressante : un angle de 1 radian forme un arc de cercle de longueur égale à une fois le rayon. En d’autres termes, lorsqu’un point tourne sur une trajectoire circulaire d’un angle de 1 radian, il parcourt une distance égale au rayon du cercle sur lequel il tourne. Ceci est très utile pour passer d’une vitesse angulaire à une vitesse linéaire lors d’une rotation. On aura sûrement l’occasion d’y revenir. Pour convertir des degrés en radians ou inversement il suffit donc de faire :

angleRadians=angleDegrés*Math.PI/180
angleDegrés=angleRadians*180/Math.PI ;

Une illustration en image :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Tout ceci est passionant me direz-vous (je sais que vous alliez me le dire) mais pourquoi nous embrouiller la tête avec les radians alors qu'on a les degrés ?

tout simplement parce que, dans Flash, les fonctions mathématiques sinus et cosinus prennent des valeurs en radians et non en degrés.

Sinus et cosinus

L’étude des angles nous amène tout droit à la trigonométrie et ses fameux sinus et cosinus. La trigonométrie, littéralement « étude des triangles », nous vient des babyloniens qui, 2000 avant JC, l’utilisaient en astronomie. Elle a été enrichie depuis, notamment par les grecs qui lui ont donné son nom et chez lesquels nous trouvons les premières tables trigonométriques. Nous avons tout de même conservé de ses origines Babyloniennes un peu de la numération sexagésimale (base 60) qu’ils utilisaient puisque le cercle est divisé en 360 degrés.

Les fonctions sinus et cosinus sont des méthodes de la classe Math() dans Flash.

Math.sin() ;
Math.cos() ;

Pour les utiliser il faudra donc veiller à ce que les angles en question soient exprimés en radians. Si ce n’est pas le cas, il faudra alors les convertir.

Les fonctions sinus et cosinus permettent de faire le lien entre un coté d’un triangle rectangle, un angle de ce triangle et son hypoténuse (plus grand coté).

Le sinus d'un angle est égal au rapport du coté opposé à l'angle par l'hypothénuse. Le cosinus d'un angle est égal au rapport du coté adjacent par l'hypothénuse.

Ceci est illustré par le dessin suivant:

L'hypothénuse est, bien entendu, le coté AB.

Cela nous permet de placer un point dans un repère en fonction d'un angle et d'une distance. Sur le schéma suivant:

xA=OA*cos(a) 
yA=OA*sin(a).

Ainsi, si l'on veut faire tourner un point à une distance fixe d'un autre dans Flash, il suffit d'augmenter la valeur de l'angle et de positionner le point à l'aide des formules précédentes.

cont._x=cont._y=100;
var angle:Number=0;
var rayon:Number=50;
cont.onEnterFrame=function(){
this.rond._x=rayon*Math.cos(angle);
this.rond._y=rayon*Math.sin(angle);
angle+=0.05;
}

Le rond est contenu dans le clip “cont” qui est placé au milieu de la scène car avec cette formule, le clip tourne autour du point de coordonnées (0,0).

Attention: l'axe des ordonnées est orienté vers le bas. Si on veut le faire tourner dans l'autre sens, il suffit de diminuer la valeur de l'angle au lieu de l'augmenter ou de prendre l'opposé pour _y.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Question : Et si je veux qu'il tourne autour d'un point de coordonnées différentes, que je nomme (centreX,centreY) ?

Très bonne question: Il suffit de faire une petite translation:

onEnterFrame=function(){
rond._x=centreX+rayon*Math.cos(angle);
rond._y=centreY+rayon*Math.sin(angle);
angle+=0.05;
}

et le clip tourne autour du point de coordonnées (centreX,centreY).

On peut donc définir la position d'un point dans un repère à l'aide de son abscisse et de son ordonnée, ce système de coordonnées est appelé cartésien. Mais on peut aussi le définir avec l'angle et la distance à l'origine du repère comme vu précédemment, on parle alors de coordonnées polaires.

Changement de coordonnées

Nous avons vu comment passer des coordonnées polaires (rayon, angle) aux coordonnées cartésiennes (x,y). Peut-on faire l'inverse ?

Il suffit de trouver la valeur du rayon et de l'angle.

Rayon

Il suffit d'appliquer le théorème de Pythagore qui nous dit que dans un triangle rectangle le carré de l'hypothénuse est égal à la somme des carrés des deux autres carrés. En d'autres termes:

rayon²=x²+y²

Ce qui dans Flash donne:

rayon=Math.sqrt(x*x+y*y);

La méthode sqrt() de la classe Math() donne la racine carrée. (square root).

Angle

Et l'angle alors ? Comment qu'on fait ? Et ben on utilise une méthode de la classe Math() faite pour ça: atan2(). Attention à l'utilisation: Il faut lui rentrer le couple de coordonnées du point en commençant par l'ordonnée (voir l'aide pour plus de détails).

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Dans l'exemple précédent:

angle=Math.atan2(rond._y,rond._x);

Rotation

Nous pouvons appliquer simplement ce que nous venons de voir pour faire tourner un objet (clip “rond”) d'un certain angle autour d'un autre (clip “centre”).

Dans l'exemple ci-dessous, on utilise la méthode atan2() pour connaitre l'angle entre l'horizontale et le segment liant les deux clips. Ils sont tous les deux déplaçables. Il suffit de rentrer un angle en degré dans le cadre prévu pour voir le résultat de la rotation.

Notez que l'angle affiché est celui donné directement par Flash (donc inversé par rapport au cercle trigonométrique) mais que l'on rentre la valeur de l'angle de rotation conformément à l'orientation du cercle trigonométrique (positif dans le sens anti-horaire).

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

On commence par récupérer l'angle à l'aide de atan2() avec le code suivant:

angle=Math.atan2(rond._y-centre._y,rond._x-centre._x);

cela revient à trouver l'angle des coordonnées polaires du clip “rond” mais dans un repère ayant pour origine le clip “centre”.

On le convertit en degrés pour l'affichage mais on peut manipuler directement des radians.

Ensuite, pour faire pivoter le clip “rond”, il suffit de calculer l'angle auquel il doit se placer. Pour cela, on additionne l'angle dont on veut faire tourner le clip (appelons-le angle_rotation) à celui que l'on a calculé précédemment.

nouvelangle=angle+angle_rotation;

Il suffit alors de placer le clip à ce nouvel angle à l'aide des formules vues dans cette section en prenant comme rayon la distance entre le clip et le centre de rotation calculée à l'aide du théorème de pythagore:

distance=Math.sqrt(Math.pow((rond._x-centre._x),2)+Math.pow((rond._y-centre._y),2));

Note : Il existe une formule qui donne directement les coordonnées d'arrivée lors d'une rotation d'un point autour d'un autre:

ancienX=rond._x;
ancienY=rond._y;
rond._x=(ancienX-centre._x)*Math.cos(angle)-(ancienY-centre._y)*Math.sin(angle)+centre._x;
rond._y=(ancienX-centre._x)*Math.sin(angle)+(ancienY-centre._y)*Math.cos(angle)+centre._y;

cet exemple ne servait donc qu'a appliquer les méthodes vues précédemment.


Pour toute question, utilisez les salles du forum.

Nous avons donc vu la base mathématique permettant le placement et le déplacement d'objets dans Flash. On peut passer à un peu de physique.